html滚动图片怎么做（html图片左右滚动代码）

2年前 (2024-04-19)

无缝滚动的结构：一共两个盒子，个大盒子下套第二个大盒子，第二个大盒子下有4张图片，个大盒子宽度固定为600px，第二个大盒子宽度是400%;原理：个盒子相对浮动，第二个盒子浮动，让第二个盒子的left值一直变化。当left值小于等于4张图片的宽度的时候，让left值瞬间归0，用户看不到，以为是无缝滚动。例子：<!DOCTYPE html><html><head lang=”en”><meta charset=”UTF-8″><title></title><style>*{margin: 0;padding: 0;}.box{width: 600px;height: 200px;background-color: pink;margin: 100px auto;overflow: hidden;border: x solid red;position: relative;}.box ul{width: 400%;height: 200px;position: absolute;top: 0;left: 0;}.box ul li{list-style: none;float: left;}.box ul li img{vertical-align: middle;}</style></head><body><div class=”box” id=”myscroll”><ul><li><img src=”images/1.jpg” alt=””/></li><li><img src=”images/2.jpg” alt=””/></li><li><img src=”images/3.jpg” alt=””/></li><li><img src=”images/4.jpg” alt=””/></li><li><img src=”images/1.jpg” alt=””/></li><li><img src=”images/2.jpg” alt=””/></li></ul></div></body></html><script>var myscroll = document.getElementById(“myscroll”);var myscroll_ul = myscroll.children[0];var num = 0; //控制左侧值 leftvar timer = null;//定时器timer = setInterval(autoPlay,10);function autoPlay(){num–;num<=-1200 ? num = 0 : num ;myscroll_ul.style.left=num+”px”;myscroll.onmouseover = function () {clearInterval(timer);//鼠标经过大盒子停止定时器timer}myscroll.onmouseout = function(){timer = setInterval(autoPlay,10); //开启定时器名字还是叫timer}}</script>123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566注意：如果图片有4张的话，代码里需要写6张，第5，6两张是的第1，2两张;

随机文章