A common banner written by jquery

The approximate layout is as follows:

<div class= "banner" >
<div class= "pic" >
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!--on-demand list--
<div class= "tab" >
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!--buttons on both sides of the banner--
<div class= "BTN" >
<div id= "Left" > < </div>
<div id= "right" > > </div>
</div>
</div>

CSS styles are as follows:

. banner{width:100%;height:400px;position:relative;}
. banner. Pic{width:100%;height:100%;overflow:hidden;}
. Banner. pic Ul{width:1000%;height:100%;margin-left:-100%;}
. banner. pic UL Li{width:10%;height:100%;float:left;}
. banner. pic ul Li img{width:100%;height:100%;}
. Banner. Tab{width:136px;height:3px;position:absolute;bottom:20px;left:50%;margin-left: -68px;}
. banner. tab UL li{width:30px;height:3px;float:left;margin:0 2px;background: #5D5C60;}
. banner. tab UL Li.on{background: #0DA1A4;}
. Banner. Btn Div{width:30px;height:40px;background:rgba (0, 0, 0, 0.5); Font-size:20px;text-align:center;line-height: 40px;color: #fff;p osition:absolute;top:50%;margin-top: -20px;display:none;}
#left {left:15px;}
#right {right:15px;}

JS Code:

~function () {
var banner = $ ('. Banner ');
var picul = $ ('. Banner. pic ul ');
var Tabli = $ ('. Banner. tab UL Li ');
var btndiv = $ ('. Banner. btn Div ');
var width = banner.width ();
var index = 0;
var timer = null;
var nowtime = 0;
Add an on style to the Li list at the bottom
Tabli.eq (0). addclass (' on ');
Setauto ();
Tabli.click (function () {
Index = $ (this). index ();
Tabli.eq (Index). addclass (' on '). Siblings (). Removeclass (' on ');
Picul.stop (). Animate ({
marginleft:-width* (index+1) + ' px '
},1000);
});
Btndiv.click (function () {
if (new Date ()-Nowtime >500) {
Nowtime = new Date ();
var i = $ (this). index ();
i?index++:index--;
Change ();
}
});
function Setauto () {
Timer = setinterval (function () {
index++;
Change ();
},5000);
};
Banner.hover (function () {
Btndiv.show (1000);
Clearinterval (timer);
},setauto). MouseLeave (function () {
Btndiv.hide (1000);
});

function Change () {
Index >= tabli.length?tabli.eq (0). addclass (' on '). Siblings (). Removeclass (' on '): Tabli.eq (Index). addclass (' on '). Siblings (). Removeclass (' on ');
Picul.stop (). Animate ({
marginleft:-width* (index+1) + ' px '
},1000,function () {
if (index==4) {
index = 0;
Picul.css ("MarginLeft",-width+ ' px ');
} else if (index = =-1) {
index = tabli.length-1;
Picul.css ("MarginLeft",-width* (index+1) + ' px ');
}
});
}
}();

As a novice, with two days to debug the banner map, feel can still ~_~ ~_~

A common banner written by jquery