Banner轮播左右切换效果代码及实现思路，支持左右切换图片，支持点击选择对应的图片。实现思路通过定时器去自动选图和点击触发事件去选择图片。而图片的选择是通过计算对应图片的宽度和第几张图的距离进行动画margin-left滚动。具体代码如下：
源码下载：
banner轮播（左右切换效果）.rar
代码思路：
php<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>轮播</title><script src="js/jquery-1.11.3.min.js"></script><style type="text/css">*{margin:0;padding:0;}img{display:block;}.banner {width:500px;height:300px;margin:10% auto;background:#cccccc;overflow:hidden;position:relative;}.banner ul { position:absolute;left:0;top:0;z-index:100;}.banner ul li { display:block;width:500px;height:300px;float:left;}.banner .con { position:absolute; left:45%; bottom:3%;z-index:101; }.banner .con a { float:left; margin-right:8px; display:block; width:8px; height:8px; border-radius:100%; background:#000;z-index:101;}.banner .con a.active { background:#fff;}.banner .u { width:30px;height:20px;background:rgba(255,255,255,0.5); display:none;}.banner .left { position:absolute; top:40%;left:2%;z-index:103;}.banner .right { position:absolute; top:40%;right:2%;z-index:103;}</style></head><body> <div class="banner"> <ul> <li><img src="image/1.jpg" /></li> <li><img src="image/2.jpg" /></li> <li><img src="image/3.jpg" /></li> </ul> <div class="con"></div> <div class="u left">left</div> <div class="u right">right</div></div> <script type="text/javascript"> var index = 0; //图片总个数 var imgnum = $('.banner ul li').length; var nmun=''; //计算单个图片的宽度 var imgwidth = $('.banner ul li').width(); //计算所有左浮动图片的宽度 var allimgwidth = imgwidth*imgnum; //设置ul宽度 $('.banner ul').css('width',allimgwidth); $('.banner').hover(function(){ //鼠标移动上来停止轮播 clearInterval(p); //显示两边切换按钮 $('.banner .u').fadeIn(); },function(){ //鼠标移开继续轮播 pic(); //隐藏两边按钮 $('.banner .u').fadeOut(); }); //轮播切换图片的函数， //思路就是通过定时器不停的改变index的值， //然后乘以宽度就是总宽度 function pic(){ p=setInterval(function(){ index++; if(index>=imgnum){ index=0; } //选择对应的图片 selectimg(index); },3000); } function selectimg(index){ //通过改变ul往左边的距离显示对应的图片 $('.banner ul').animate({'margin-left':'-' + imgwidth*index + 'px'},600); //切换图片并选择对应按钮 $('.con a').eq(index).addClass('active').siblings('a').removeClass('active'); } //点击左边的按钮选择对应的图片，往左切换图 $('.banner .left').click(function(){ index-=1; if(index<0){ index=imgnum-1; } selectimg(index); }); //点击左边的按钮选择对应的图片，往右切换图 $('.banner .right').click(function(){ index+=1; if(index>imgnum-1){ index=0; } selectimg(index); }); //根据图片个数写入对应按钮的个数 for(var ni=0;ni<imgnum;ni++){ nmun +="<a href='javascript:;'></a>"; } $('.banner .con').html(nmun); $('.banner .con a').eq(0).addClass('active'); //点击圆点选择对应的图片 $('.con a').each(function(i){ $(this).click(function(){ index=i; $('.banner ul').animate({'margin-left':'-' + imgwidth*i + 'px'},600); $('.con a').eq(index).addClass('active').siblings('a').removeClass('active'); }); }); //默认开始执行 pic(); </script></body></html>- 本文固定链接: http://qiantao.net.cn/?id=1236
- 转载请注明: admin 于 千淘万漉 发表
《本文》有 0 条评论