JS Seamless Switch
Css.clearfix{Clear:both; }. Banner{width:500px;Height:500px;Overflow:Hidden;margin:0 Auto;position:relative;background:URL (.. /img/loading.gif) No-repeat Center;}. Banner ul{Height:500px;}. Banner Li{position:Absolute; Left:500px;Top:0;width:500px;Height:500px;List-style:None;Z-index:5;}. Bannerspan{text-align:Center;position:Absolute;Bottom:10px; Left:0px;width:500px;Z-index: One;}. Bannerspan span{Display:Inline-block;width:10px;Height:10px;Border-radius:5px;background:#0ff;margin:0 3px;cursor:Pointer;}. Bannerspan Span.on{background:#f0f;}
Js:
$(function(){ varLi = $ (". Banner Li"), _span= $ (". Bannerspan"), Imglength=Li.length, time; //Generate Dots for(vari = 0; i < imglength; i++) {_span.append ("<span></span>"); } //Initial functioninit () {Li.eq (0). css ("left", 0). addclass ("Active"); _span.find ("span"). EQ (0). addclass ("on"); } init (); //Click the dot Event_span.find ("span"). Click (function() {clearinterval (time); Run ($ ( This). index ()); }) //gets the index value of the current presentation index functionGetactiveindex () {varJ; Li.each (function(e) {if($( This). Hasclass ("Active") ) {J=e; return; } }) returnJ; } Run (1) //Public Functions functionRun (DX) {Li.eq (Getactiveindex ()). Stop (). Animate ({left:-500, ' Z-index ': 5}, 500,function(){ $( This). CSS ("left", 500) }); Li.eq (DX). Stop (). Animate ({' Z-index ': Ten, left:0}, 500,function(){ $( This). addclass ("active"). Siblings (). Removeclass ("active"). CSS ("left", 500); }); _span.find ("span"). EQ (dx). addclass ("on"). Siblings (). Removeclass ("on"); DX++; time= SetTimeout (function() {Run (dx%imglength)},2000) } })
Seamless scrolling Js