图片滚动j效果query

Posted 2021-01-02 yinwangyizhi

效果图如下：

原理是：

　　通过叠加滚动条的值，再通过setInterval()进行重复调用，实现移动效果。

html部分：

<div id="main">
        <div id="in" style="width: 300%;">
            <div id="p1">
                <a href="#"><img src="2018a.png" alt=""></a>
                <a href="#"><img src="2018b.png" alt=""></a>
                <a href="#"><img src="2018c.png" alt=""></a>
                <a href="#"><img src="2018d.png" alt=""></a>
                <a href="#"><img src="2018e.png" alt=""></a>
            </div>
            <div id="p2"></div>
        </div>
    </div>

这里值得注意的是，外面的盒子（#main）必须小于里面的盒子（#in）

　　目的是撑大里面的盒子，出现内存条。

　　#p1里面是图片，但要注意的是，图片的总宽度一定要大于最外层#main的宽度，否则滚动不起来啊！

　　而#p2则是用来复制一份#p1的内容，以便扩大图片的总宽度。

 

css部分：

* {
            margin: 0;
            padding: 0;
        }
        #main {
            width: 800px;
            /*height: 80px;*/
            margin: 0 auto;
            overflow: hidden;
            border:1px solid #666;
            
        }
        #in {
            width: 300%;
        }
        img {
            float: left;
            height: 80px;
            width: 120px;
            margin-right: 8px;
        }
        #in div {
            float: left;
        }

这里要注意的有两点

　　1.是#main{}里的 width: 800px;　　//这800px可根据显示器宽度进行调整。一旦不滚动了，就再复制一份#p1的内容即可。

　　2.#in{}，目的是撑大内部空间。

 

jquery部分：

<script>
    var timer;
    //复制一份#p1里的图片给#p2，如果内容不够，再复制一份！
    $("#p2").html($("#p1").html());
        
    var img_gun = function(){
        if($("#main").scrollLeft() >= $("#p1").width()){
            $("#main").scrollLeft(0);
        }else{
            $("#main").scrollLeft($("#main").scrollLeft()+1);
        }
    };
    var timer = window.setInterval("img_gun();",20);
    $("#main").hover(function(){
        clearInterval(timer);
    },function(){
        timer=setInterval("img_gun();",20);
    })();
    </script>

var img_gun = function(){}　　//定义函数，当#main的滚动值大于#p1的图片总宽度时，#main的滚动条的值归零，否则滚动条的值+1

利用 var timer = window.setInterval("img_gun();",20); 这段函数让滚动条偏移，从而动起来。

.hover()　　//这个就是鼠标悬浮和鼠标离开，移除变量timer，实现让滚动停止和继续的效果。