ae图片无缝循环滚动_HTML图片滚动

最新推荐文章于 2022-12-01 20:11:52 发布

VIP文章神经小黑

最新推荐文章于 2022-12-01 20:11:52 发布

阅读量1.8k

点赞数

文章标签： ae图片无缝循环滚动

本文链接：https://blog.csdn.net/weixin_29166013/article/details/112091736

版权

HTML图片无缝滚动鼠标悬停

<!DOCTYPE html>
<html>
<head>
	<title>无缝滚动</title>
</head>
<style type="text/css">
*{
    margin: 0;padding: 0;}
	#div1{
    position: relative;border:1px solid #0ff;width:1100px; height: 180px;margin:50px auto 0;overflow: hidden;}
	#div1 ul{
    position: absolute;left: 0;}
	#div1 ul li{
    list-style: none;width:200px;float: left;padding: 10px;height: 160px;}
	#div1 ul li img{
    width:100%;}
</style>
<script type="text/javascript">
	window.onload=function(){
    
		var oDiv=document.getElementById('div1');
		var oUl=oDiv.getElementsByTagName('ul')[0];
		var aLi=oUl.getElementsByTagName('li');
		var aA=document.getElementsByTagName('a');//获取向右向左的箭头
		var timer=null;
		var iSpeed=10;
		oUl.innerHTML+=oUl.innerHTML;//定义图片可以循环播放
		oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';//定义外层ul的宽度，根据图片的个数和每个图片的宽度计算，保证总宽度是可调整的
		function fnMove(){
    
			if(oUl.offsetLeft<-oUl.offsetWidth/2){
    
				oUl.style.left=0;
			}else if(oUl.offsetLeft>0){
    
				oUl.style.left=-oUl.offsetWidth/2+'px';
			}//定义到边界的时候，实现无缝衔接
			oUl.style.left=oUl.offsetLeft+iSpeed+'px';
//定义图片的右边距随着速度不断不断增加，或减小，实现运动的效果
		}
		timer=setInterval(fnMove,30);
		aA[0].onclick=function(){
    
			iSpeed=-10;
//按下左箭头，定义向左运动
		}
		aA[1].onclick=function(){
    
			iSpeed=10;
//按下右箭头，定义向右运动
		}
		oDiv.onmouseover=function(){
    
			clearInterval(timer);
//鼠标移动到图片上，清除定时器，停止运动
		}
		oDiv.onmouseout=function(){
    
			timer=setInterval(fnMove,30);
//鼠标移出，重新开启定时器，重新运动
		}
	};
</script>
<body>
	<a href="javascript:;">←</a>
	<a href="javascript:;">→</a>
<div id="div1">
	<ul>
		<li><img src="miaoflash/images/1.jpg"></li>
		<li><img src="miaoflash/images/2.jpg"></li>
		<li><img src="miaoflash/images/3.jpg"></li>
		<li><img src="miaoflash/images/4.jpg"></li>
		<li><img src="miaoflash/images/5.jpg"></li>
		<div style="clear: none;"></div>
	</ul>
</div>
</body>
</html>

无缝滚动按钮响应滚动一次三张

最低0.47元/天解锁文章

神经小黑

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
ae图片无缝循环滚动_HTML图片滚动

HTML图片无缝滚动鼠标悬停<!DOCTYPE html><html><head> <title>无缝滚动</title></head><style type="text/css">*{margin: 0;padding: 0;} #div1{position: relative;border:1px...
复制链接

扫一扫