jQuery实现一组图片循环滚动

在 上张贴 由 lianhe发表回复

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • 多种JQuery循环滚动文字图片效果代码
  • jQuery循环滚动展示代码 可应用到文字和图片上
  • JQuery循环滚动图片代码
  • 利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
  • 基于jquery实现点击左右按钮图片横向滚动
  • 基于jQuery的图片左右无缝滚动插件
  • jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码
  • 基于jQuery图片平滑连续滚动插件
  • js jquery做的图片连续滚动代码
  • jquery实现图片左右间隔滚动特效(可自动播放)
张贴在2