jQuery一组图片循环滚动
丁七岁 人气:0效果:
代码:
<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>实现一组图片的循环滚动</title> <style type="text/css"> *{ margin: 0; padding: 0; } div{ width: 1066px;/*2张图片的总宽度*/ height: 300px; background-color: #000000; margin: 120px auto; overflow: hidden;/*超出的隐藏*/ border: 1px solid #00ff37; } ul{ width: 3198px; /*6张图片的总宽度 放在一行*/ height: 300px; list-style: none; background-color: #000000; } ul>li { float: left; } </style> <script type="text/javascript" src="js/jquery-1.12.4.js"></script> <script type="text/javascript"> $(function () { //编写一个可以让图片自动循环滚动的函数(弄一个定时器,回调函数里设置它的marginLeft) var timer var offset = 0 //待会用这个变量设置它的marginLeft (js代码可以不写分号的,我是懒得写了) function autoRun(){ timer = setInterval(function () { offset += -10 //这是marginLeft if(offset <= -2132){ //滚动了四张图片 接着滚动 offset = 0 } $("ul").css({ marginLeft:offset }) },131.4) } autoRun()//滚动起来 //监听li的移入 移出事件 $("li").hover(function () { //鼠标指针放上面 不让ta滚动(停掉这个定时器) clearInterval(timer) //鼠标指针没有放上面的图片 给他们一个黑色的背景 这样显得选中的这个亮 $(this).siblings().fadeTo(120,0.33) //当前的这个图片亮 $(this).fadeTo(120,1) },function () { autoRun() //滚动 $("li").fadeTo(120,1) //1-->全亮 }) }) </script> </head> <body> <div> <ul> <li> <img src="img/111.jpg"> </li> <li> <img src="img/222.jpg"> </li> <li> <img src="img/333.jpg"> </li> <li> <img src="img/444.jpg"> </li> <li> <img src="img/111.jpg"> </li> <li> <img src="img/222.jpg"> </li> </ul> </div> </body> </html>
加载全部内容