jq写无缝轮播

来源：互联网发布：哈尔滨停车软件编辑：程序博客网时间：2024/06/09 22:54
<!doctype html><html lang="en"><head><meta charset="UTF-8" /><title>Document</title><style type="text/css">*{padding: 0;margin: 0;list-style: none;text-decoration: none;}.box{width: 400px;height: 300px;overflow: hidden;border: 3px solid #000000;position: relative;}.imgs{width: 2800px;height: 300px;border: 1px solid red;position: absolute;top: 0;left: 0;}.imgs a img{width: 400px;height: 300px;float: left;}ul{width: 140px;height: 20px;position: absolute;bottom: 5px;right: 10px;z-index: 10;}ul li{width: 10px;height: 10px;border: 1px solid rgba(0,0,0,.5);border-radius: 50%;float: left;margin-right: 5px;background: rgba(0,0,0,.5);}.active{background: red;}.box_s{width: 40px;height: 60px;background: rgba(0,0,0,.5);font-size: 20px;color: white;line-height: 60px;text-align: center;position: absolute;top: 45%;display: none;}.pre{left: 0;}.next{right: 0;}</style><script src="jquery.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){var num = 0;var timer = setInterval(run,1000);function run() {   //自动执行num++;if(num == $('.imgs a').length)  //如果num == 所有图片长度{num = 1;$('.imgs').css({'left':'0px'});}if(num == $('.imgs a').length - 1)   //目的是让 下面的点 {$('ul li').eq(0).addClass('active').siblings('li').removeClass('active');}$('.imgs').animate({'left': -400*num+'px'}) //偏移量$('ul li').eq(num).addClass('active').siblings('li').removeClass('active');  //点}$('.box').hover(function(){clearInterval(timer);$('.pre,.next').show();  //鼠标经过盒子},function(){$('.pre,.next').hide();   //鼠标离开盒子timer = setInterval(run,1000);})$('.pre').click(function(){  //点击上翻按钮num--;if(num == -1){num = $('ul li').length - 1;   //5$('.imgs').css({'left':'-2400px'});  //总2800-重复= 2400}$('.imgs').animate({'left': -400*num+'px'}) //2000. 偏移一张$('ul li').eq(num).addClass('active').siblings('li').removeClass('active');})$('.next').click(function(){  //下翻按钮num++;if(num == $('.imgs a').length){num = 1;$('.imgs').css({'left':'0px'});}if(num == $('.imgs a').length - 1)  // ==6 {$('ul li').eq(0).addClass('active').siblings('li').removeClass('active');}$('.imgs').animate({'left': -400*num+'px'})  //最大2400，$('ul li').eq(num).addClass('active').siblings('li').removeClass('active');})$('ul li').click(function(){  //下面原点 点击事件num = $(this).index();$('.imgs').animate({'left': -400*num+'px'})$('ul li').eq(num).addClass('active').siblings('li').removeClass('active');})})</script></head><body><div class="box"><div class="imgs"><a href=""><img src="img/1.jpg"/></a><a href=""><img src="img/2.jpg"/></a><a href=""><img src="img/3.jpg"/></a><a href=""><img src="img/4.jpg"/></a><a href=""><img src="img/5.jpg"/></a><a href=""><img src="img/6.jpg"/></a><a href=""><img src="img/1.jpg"/></a></div><a href="javascript:;"class="pre box_s"> < </a><a href="javascript:;"class="next box_s"> > </a><ul><li class="active"></li><li></li><li></li><li></li><li></li><li></li></ul></div></body></html>
阅读全文
0 0