banner滑动juqery特效 带自动切换

突然在网络上找不到合适的banner滑动切换代码了……之前不找的时候一搜一大把，我有点意外，好容易找到一个，竟然在笔记本电脑上不兼容。不得已，自己手写了一个，其实代码也非常简单，懂得它的原理，改淡入淡出，加上向前，向后小图标也非常容易。

请转载此文的朋友务必附带原文链接，谢谢。

原文链接：http://xuyran.blog.51cto.com/11641754/1878370

js代码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

//滑动切换 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) }); //对应banner滑动      $( "#bd1lfsj ul li" ).stop().eq(page - 1).addClass( "show" ).siblings().removeClass( "show" );      //对应小圆点样式改变 }   $( function  () {      var  changeSelf = setInterval(bannerSlide, 4000); //自动切换      $( "#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;      }) })

html代码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<!--banner滑动开始--> < 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 = "#" >< img  src = "../Content/images/u4618.jpg"  alt = "" ></ a ></ dt >             </ dl >          < dl >              < dt >< a  href = "#" >< img  src = "../Content/images/u4620.jpg"  alt = "" ></ a ></ dt >                 </ dl >          < dl >              < dt >< a  href = "#" >< img  src = "../Content/images/u4622.jpg"  alt = "" ></ a ></ dt >                 </ dl >                              </ div >              </ div >      </ div >                                       <!--banner滑动结束-->

css代码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73

/* banner滑动 开始*/ .sub_box{      width : 750px ;      height : 350px ;      position : relative ;      overflow : hidden ; } .sub_box img{      width : 750px ;      height : 350px ; } #bd1 lfimg{      position : relative ;      width : 750px ;      height : 350px ;      overflow : hidden ; } #bd1 lfimg div{      width : 100000px ; } #bd1 lfimg dl{      width : 750px ;      height : 350px ;      position : relative ;      overflow : hidden ;      float : left ; } #bd1 lfimg 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滑动 结束*/

如过要加上向前向后小图标，原理如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

//点击切换      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) });//对应banner滑动          $("#bd1lfsj ul li").stop().eq(page - 1).addClass("show").siblings().removeClass("show");      //对应小圆点样式改变      })      $(".lightbox-prev").click(function () {          if (page == 1) {              page = len;          } else {              page--;          } $("#bd1lfimg > div").animate({ marginLeft: "-" + 750 * (page - 1) });//对应banner滑动      $("#bd1lfsj ul li").stop().eq(page - 1).addClass("show").siblings().removeClass("show");      //对应小圆点样式改变      })

本文转自  小旭依然  51CTO博客，原文链接:http://blog.51cto.com/xuyran/1878370