banner滑动juqery特效带自动切换

2024-11-12 技术教程

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

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

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

js代码如下：

//滑动切换varpage=1;functionbannerSlide(){varlen=$("#bd1lfimg>divdl").length;if(page==len){page=1;}else{page++;}$("#bd1lfimg>div").animate({marginLeft:"-"+750*(page-1)});//对应banner滑动$("#bd1lfsjulli").stop().eq(page-1).addClass("show").siblings().removeClass("show");//对应小圆点样式改变}$(function(){varchangeSelf=setInterval(bannerSlide,4000);//自动切换$("#bd1lfsjulli").on("click",function(){varindex=$(this).index();$(this).addClass("show").siblings().removeClass("show");$("#bd1lfimg>div").stop().animate({marginLeft:"-"+750*index});page=index;})})

html代码如下：

<divclass="sub_box"><divid="p-select"class="sub_nav"><divclass="sub_no"id="bd1lfsj"><ul><liclass="show"></li><li></li><li></li></ul></div></div><divid="bd1lfimg"><div><dlclass="show"><dt><ahref="#"><imgsrc="../Content/p_w_picpaths/u4618.jpg"alt=""></a></dt></dl><dl><dt><ahref="#"><imgsrc="../Content/p_w_picpaths/u4620.jpg"alt=""></a></dt></dl><dl><dt><ahref="#"><imgsrc="../Content/p_w_picpaths/u4622.jpg"alt=""></a></dt></dl></div></div></div>

css代码如下：

/*banner滑动开始*/.sub_box{width:750px;height:350px;position:relative;overflow:hidden;}.sub_boximg{width:750px;height:350px;}#bd1lfimg{position:relative;width:750px;height:350px;overflow:hidden;}#bd1lfimgdiv{width:100000px;}#bd1lfimgdl{width:750px;height:350px;position:relative;overflow:hidden;float:left;}#bd1lfimgdt{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_noli{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_noli.show{background:#fbd74f;width:20px;height:20px;margin-top:-3px;}/*banner滑动结束*/

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

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