简单轮播图的实现

来源：互联网发布：网络体系结构名词解释编辑：程序博客网时间：2024/05/21 13:18
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>轮播</title><style type="text/css">*{margin: 0;padding: 0;list-style:none;}.banner{width: 1000px;height: 345px;position: relative;margin: 50px;overflow: hidden;}.banner .img{width: 6000px;position: absolute;}.img li{float: left;width: 1000px;}.num{position: absolute;width: 100%;bottom:10px;left:0px;text-align:center;}.num li{width: 10px;height: 10px;background: #333;border-radius:50%;margin: 0 3px;display: inline-block;}.num .on{background: #f39;}.btn{width: 30px;height: 50px;position: absolute;top:50%;background: rgba(0,0,0,0.5);text-align:center;line-height:50px;color:#fff;font-size:40px;margin-top: -25px;font-family:'宋体';cursor:pointer;}.btn_l{left:0px;}.btn_r{right:0px;}</style></head><body><div class="banner"><ul class="img"><li><img src="./001.jpg" width="100%"></li><li><img src="./002.jpg" width="100%"></li><li><img src="./003.jpg" width="100%"></li><li><img src="./004.jpg" width="100%"></li><li><img src="./005.jpg" width="100%"></li></ul><ul class="num"><li class="on"></li><li></li><li></li><li></li><li></li></ul><div class="btn btn_l"><</div><div class="btn btn_r">></div></div><script type="text/javascript" src="jquery-1.8.3.min.js"></script><script type="text/javascript">//定义全局变量var i = 0;//无缝第一步 克隆第一张图片插入到尾部var cloneimg = $('.banner .img li:first').clone();//插入尾部$('.banner .img').append(cloneimg);var len = $('.img li').length;//获取图片数量//启动定时器var inte = setInterval(moveR,3000);//鼠标悬停效果$('.banner').hover(function(){//清除定时器clearInterval(inte);},function(){inte = setInterval(moveR,3000);});//绑定单击事件$('.banner .num li').click(function(){//获取当前元素的索引i = $(this).index();//计算leftvar newleft = i*1000;//设置动画$('.banner .img').stop().animate({left:-newleft+'px'},1000);//设置圆点的样式$('.banner .num li:eq('+i+')').addClass('on').siblings().removeClass('on');})//绑定左右单击事件$('.banner .btn_r').click(function(){moveR();})//绑定左右单击事件$('.banner .btn_l').click(function(){moveL();})//移动右function moveR(){i++;//判断越界if(i == len){//无缝第二步 越界时用css快速定位ul位置 0$('.banner .img').css({left:0});//修改i的值// i = 0;i = 1;}//计算leftvar newleft = i*1000;//设置动画$('.banner .img').stop().animate({left:-newleft+'px'},1500);//无缝第三步if(i == len-1){$('.banner .num li:eq(0)').addClass('on').siblings().removeClass('on');}else{//设置圆点的样式$('.banner .num li:eq('+i+')').addClass('on').siblings().removeClass('on');}}//移动左function moveL(){i--;//判断越界if(i == -1){//无缝第四步$('.banner .img').css({left:-(len-1)*1000});// i = len-1;i = len -2;}//计算leftvar newleft = i*1000;//设置动画$('.banner .img').stop().animate({left:-newleft+'px'},1500);//设置圆点的样式$('.banner .num li:eq('+i+')').addClass('on').siblings().removeClass('on');}</script></body></html>
0 0