jQuery实现一组图片循环滚动
作者:丁七岁
这篇文章主要为大家详细介绍了jQuery实现一组图片循环滚动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了jQuery实现一组图片循环滚动的具体代码,供大家参考,具体内容如下
效果:
代码:
<!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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。