突然在网络上找不到合适的banner滑动切换代码了……之前不找的时候一搜一大把,我有点意外,好容易找到一个,竟然在笔记本电脑上不兼容。不得已,自己手写了一个,其实代码也非常简单,懂得它的原理,改淡入淡出,加上向前,向后小图标也非常容易。
成都创新互联公司坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都做网站、成都网站制作、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的伊春网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!
请转载此文的朋友务必附带原文链接,谢谢。
原文链接:http://xuyran.blog.51cto.com/11641754/1878370
js代码如下:
//滑动切换 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代码如下:
css代码如下:
/* banner滑动 开始*/ .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滑动 结束*/
如过要加上向前向后小图标,原理如下:
//点击切换 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"); //对应小圆点样式改变 })