Jq plug-in Virgo image carousel

I haven't written a blog for a long time. I'm so lazy and self-satisfied. I have been learning sass and jq plug-ins recently. Thanks to me for a jq plug-in, it is also the first plug-in to be truly called a plug-in.

(Function ($) {$. fn. optional usel = function (options) {if ($ (this ). length = 0) return false; var opts = $. extend ({}, $. fn. invalid usel. defaults, options); function Slide (o) {this. o = o; this. box = o. find (opts ['imgbox']); this. cirEle = this. box. find (opts ['cirele']) this. nav = o. find (opts ['slidenav']); this. rightAr = o. find (opts ['rightar ']); this. leftAr = o. find (opts ['leftar ']); this. et = opts ['eventtype']; this. AutoPlay = opts ['autoplay']; this. navClass = opts ['navclass']; this. speed = opts ['speed'] this. timer = null; this. len = this. cirEle. length; this. cirNavEle = null; this. onOff = true; this. activeIndex = 0; this. iNow = 0; this. boxWidth = this. box. outerWidth ()} Slide. prototype. init = function () {var _ this = this; _ this. createNav (). togglePage (); this. leftAr. on ('click', function () {_ this. play (1) ;}) thi S. rightAr. on ('click', function () {_ this. play () ;}) if (this. autoPlay) {this. stop (); this. timer = setInterval (function () {_ this. play () ;}, this. speed [1]); this. o. hover (function () {_ this. stop () ;}, function () {_ this. timer = setInterval (function () {_ this. play () ;}, _ this. speed [1])} Slide. prototype. createNav = function () {var _ this = this; var arr = []; $. each (_ this. cirEle, function (I, n) {if (I = 0 ){ Arr. push ('<span class = "cur">' + (I + 1) + '</span>');} else {arr. push ('<span>' + (I + 1) + '</span>'); _this.cirEle.eq( I ).css ({'left': _ this. boxWidth}) ;}}); _this.nav.html (arr. join (''); this. cirNavEle = _ this. nav. find ('span '); return this;} Slide. prototype. togglePage = function () {var _ this = this; this. cirNavEle. on (_ this. et, function () {if (_ this. onOff) {_ this. onOff = false; _ this. activeIndex = $ (this ). Index (); $ (this ). addClass (_ this. navClass ). siblings (). removeClass (_ this. navClass); if (_ this. activeIndex> _ this. iNow) {_ this. toggleRight ();} else if (_ this. activeIndex <_ this. iNow) {_ this. toggleLeft ();} _ this. cirEle. eq (_ this. activeIndex ). animate ({'left': 0}, _ this. speed [0], function () {_ this. onOff = true; then (this).css ({'z-Index': 1}).siblings().css ({'z-Index': 0}) _ this. iNow = _ this. activeIndex ;} }) Return this;} Slide. prototype. toggleLeft = function () {var _ this = this; _this.cirele.eq(_this.activeindex#.css ({'left':-_ this. boxWidth}) _ this. cirEle. eq (_ this. iNow ). animate ({'left': _ this. boxWidth}, _ this. speed [0])} Slide. prototype. toggleRight = function () {var _ this = this; _this.cirele.eq(_this.activeindex#.css ({'left': _ this. boxWidth}) _ this. cirEle. eq (_ this. iNow ). animate ({'left':-_ this. boxWidt H}, _ this. speed [0])} Slide. prototype. play = function (dir) {var _ this = this; if (_ this. onOff) {_ this. onOff = false; if (! Dir) {_ this. activeIndex ++; _ this. activeIndex % = _ this. len; _ this. toggleRight ();} else {_ this. activeIndex --; if (_ this. activeIndex <= 0) {_ this. activeIndex = 0;} _ this. toggleLeft ();} _ this. cirEle. eq (_ this. activeIndex ). animate ({'left': 0}, _ this. speed [0], function () {_ this. onOff = true; _ this. iNow = _ this. activeIndex; _ this. cirNavEle. eq (_ this. activeIndex ). addClass (_ this. navClass ). siblings (). removeClass (_ this. navClass); ((this).css ({'z-Index': 1}).siblings().css ({'z-Index': 0})} Slide. prototype. stop = function () {clearInterval (this. timer);} return this. each (function () {var $ this = $ (this); var obj = new Slide ($ this); obj. init () ;};}; // default configuration $. fn. invalid usel. ults = {'imgbox ':'. incluusel-box', // The parent container of the Rolling Element 'cirele': 'lil', // The Rolling Element 'slidenav ':'. carousel-nav ', // image index menu 'autoplay': true, // whether to automatically carousel 'rightar ':'. arr', // The next 'leftar ':'. arl', // The Last 'speed': [,], // The time displayed for the speed record, interval 'eventtype': 'click ', // switch mode 'navclass': 'cur' // highlight css in the current menu}) (jQuery );

 

HTML

<div class="area">    <div class="carousel-box">        <ul>            <li><a href="#1"></a></li>            <li><a href="#2"></a></li>            <li><a href="#3"></a></li>            <li><a href="#4"></a></li>            <li><a href="#5"></a></li>            <li><a href="#6"></a></li>            <li><a href="#7"></a></li>        </ul>    </div>    <div class="carousel-nav"></div>    <span class="arL">&lt;</span>    <span class="arR">&gt;</span>        </div><script>    $(function(){        $('.area').carousel();    })</script>

Css

.area, .area .carousel-box {  width: 310px; }.area .carousel-nav span, .area .arR, .area .arL {  width: 20px;  height: 20px;  border: 1px solid #666;  text-align: center;  display: inline-block; }.area .carousel-box ul, .area .carousel-box li {  position: absolute;  left: 0;  top: 0; }.area {  margin: 50px auto; }  .area .carousel-box {    height: 350px;    overflow: hidden;    position: relative; }  .area .carousel-nav span.cur {    background: #000;    color: #FFF; }  .area .arR, .area .arL {    margin-top: 20px; }

 

Now let's look back at it. In fact, jq plug-ins are not as difficult as we think. The difficulty is still in implementing functions. The writing method is similar to that of common js, now the above is just a simple implementation of left and right carousel, there is time to add up and down the direction, ga