Banner slide juqery effect with auto switch

Suddenly on the network can not find the right banner sliding switch code ... Before looking at the time of a search a lot of, I was a little surprised to find one, unexpectedly on the laptop incompatible. Forced to write one of their own, in fact, the code is very simple, understand its principle, change fade, plus forward, the back small icon is also very easy.

Please reprint this article of friends must accompany the original link, thank you.

Original link: http://xuyran.blog.51cto.com/11641754/1878370

The JS code is as follows:

Slide Switch var page = 1;function bannerslide ()  {    var  len  = $ ("#bd1lfimg  > div dl") .length;    if  (page ==  len)  {        page = 1;    }  else {        page++;    }     $ ("#bd1lfimg  > div"). Animate ({ marginleft:  "-"  + 750 *  (page - 1)  });//corresponds to banner sliding     $ ("#bd1lfsj  ul li"). Stop (). EQ (page  - 1). addclass ("show"). Siblings (). Removeclass ("show"),     //corresponding small dot style change}$ (function   ()  {    var changeself = setinterval (bannerslide, 4000);// Automatically switches     $ ("#bd1lfsj  ul li"). On ("click", function  ()  {          var index = $ (this). Index ();         $ (this). AddClass ("show"). Siblings (). Removeclass ("show");         $ ("# Bd1lfimg > div "). Stop (). Animate ({ marginleft: "-" + 750 * index  });         page = index;    })})

The HTML code is as follows:

<!--banner slide start--><div class= "Sub_box" ><div id= "P-select" class= "Sub_nav" ><div class= "Sub_no" Id= "BD1LFSJ" ><ul><li class= "show" ></li><li></li><li></li></ul ></div></div><div id= "bd1lfimg" ><div><dl class= "show" > <dt><a href= "#" ></a></dt></dl><dl><dt><a href=" # "></a></dt></dl><dl><dt><a href=" # "></a></dt></dl></div> </div></div><!-- Banner Slide End--

The CSS code is as follows:

/* banner slide   start */.sub_box{width:750px;height:350px;position: Relative;overflow:hidden;}. sub_box img{width:750px;height:350px;} #bd1lfimg {Position:relative;width:750px;height:350px;overflow:hidden;} #bd1lfimg  div{width:100000px;} #bd1lfimg  dl{width:750px;height:350px;position:relative;overflow:hidden;float:left;} #bd1lfimg  dt{width:750px;height:350px;position:absolute;left:0px;top:0px;}. sub_nav{width:150px;height:25px;bottom:0px;position:absolute;z-index:10;padding-bottom:30px;left:260px;}. Sub_no{height:25px;float:right;}. Sub_no li{display:block;width:15px;height:15px;float:left;margin-left:10px;overflow:hidden;line-height : 25px;vertical-align:middle;text-align:center;background: #bcbcbc;  filter:alpha (opacity=70); Opacity:0.7;  font-family:arial;font-size:11px;cursor:pointer;border-radius:50%;}. Sub_no li.show{background: #fbd74f; width:20px;height:20px;margin-top:-3px;} /* banner Slide   End */

If you want to add a small forward backward icon, the principle is as follows:

 //Click Switch     var page = 1;    var len =  $ (". Bottom-list li"). length;    $ (". Lightbox-next"). Click (function  ()  {        if  (Page == len)  {             page = 1;         } else {             page++;        }       $ ("#bd1lfimg  > div "). Animate ({ marginleft: "-" + 750 *  (page - 1) &NBSP,});//corresponds to banner sliding         $ ("#bd1lfsj  ul li"). Stop (). EQ ( page - 1). addclass ("show"). Siblings (). Removeclass ("show"),     //corresponding small dot style change      })     $ (". Lightbox-prev"). Click (function  ()  {         if  (page == 1)  {             page = len;        } else {             page--;        } $ ("#bd1lfimg  > div"). Animate ({ marginleft:  "-"  + 750 *  (page -  1)  //corresponds to banner sliding     $ ("#bd1lfsj  ul li"). Stop (). EQ (page -  1). addclass ("show"). Siblings (). Removeclass ("show"),     //corresponding small dot style change      })

This article is from the "Rookie of the Wings of the Advanced" blog, please be sure to keep this source http://xuyran.blog.51cto.com/11641754/1878370

Banner slide juqery effect with auto switch