标签：pad oat img idt interval fun 函数 hover class
效果图如下：
原理是：
通过叠加滚动条的值，再通过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，实现让滚动停止和继续的效果。
标签：pad oat img idt interval fun 函数 hover class
原文地址：https://www.cnblogs.com/yinwangyizhi/p/9457188.html
