javascript实现图片无缝滚动

最新推荐文章于 2022-04-18 00:23:50 发布

超级侠哥

最新推荐文章于 2022-04-18 00:23:50 发布

阅读量554

点赞数

本文链接：https://blog.csdn.net/znb769525443/article/details/42805539

版权

代码如下;

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片滚屏效果</title>
<link href="miaov_style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
window.οnlοad=function(){
	var oDiv=document.getElementById('roll');
	var oUl=oDiv.getElementsByTagName('ul')[0];
	var aLi=oUl.getElementsByTagName('li');
	var aBtn=oDiv.getElementsByTagName('a');
	
	var iSpeed=-5;
	var timer=null;
	oUl.innerHTML+=oUl.innerHTML;
	
	oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
	timer = setInterval(function(){
		oUl.style.left=oUl.offsetLeft+iSpeed+'px';
		if(oUl.offsetLeft<-oUl.offsetWidth/2){
			oUl.style.left='0px';
		}else if(oUl.offsetLeft>0){
			oUl.style.left=-oUl.offsetWidth/2+'px';
		}
	},30);
	
	aBtn[0].οnmοuseοver=function(){
		iSpeed=-5;
	};
	aBtn[1].οnmοuseοver=function(){
		iSpeed=5;
	};
	
	oUl.οnmοuseοver=function(){
		clearInterval(timer);
	};
	oUl.οnmοuseοut=function(){
		timer = setInterval(function(){
		oUl.style.left=oUl.offsetLeft+iSpeed+'px';
		if(oUl.offsetLeft<-oUl.offsetWidth/2){
			oUl.style.left='0px';
		}else if(oUl.offsetLeft>0){
			oUl.style.left=-oUl.offsetWidth/2+'px';
		}
	},30);
	};
};
</script>
</head>
<body>

<div class="roll" id="roll">
    <a href="javascript:void(0);" class="btn_left"></a>
    <a href="javascript:void(0);" class="btn_right"></a>
    <div class="wrap">
        <ul>
            <li><a href="http://www.miaov.com/"><img src="images/1.jpg" /></a></li>
            <li><a href="http://www.miaov.com/"><img src="images/2.jpg" /></a></li>
            <li><a href="http://www.miaov.com/"><img src="images/3.jpg" /></a></li>
            <li><a href="http://www.miaov.com/"><img src="images/4.jpg" /></a></li>
			<li><a href="http://www.miaov.com/"><img src="images/1.jpg" /></a></li>
            <li><a href="http://www.miaov.com/"><img src="images/2.jpg" /></a></li>
            <li><a href="http://www.miaov.com/"><img src="images/3.jpg" /></a></li>
            <li><a href="http://www.miaov.com/"><img src="images/4.jpg" /></a></li>
			
        </ul>
    </div>
</div>
</body>
</html>

其中css文件如下：

* { padding: 0; margin: 0; }
li { list-style: none; }
img { border: 0; }

.roll { width: 698px; height: 108px; margin: 50px auto 0; position: relative; }
.btn_left { display: block; width: 68px; height: 68px; background: url(images/btn.jpg) no-repeat -70px -69px; position: absolute; top: 20px; left: 1px; z-index: 1; }
.btn_left:hover { background: url(images/btn.jpg) no-repeat -70px 0; }
.btn_right { display: block; width: 68px; height: 68px; background: url(images/btn.jpg) no-repeat 1px -69px; position: absolute; top: 20px; right: 0; z-index: 1; }
.btn_right:hover { background: url(images/btn.jpg) no-repeat 1px 0; }
.roll .wrap { width: 546px; height: 108px; margin: 0 auto; position: relative; overflow: hidden; }
.roll ul{ position: absolute; top: 0; left: 0; }
.roll li { float: left; width: 182px; height: 108px; text-align: center; }
.roll li a:hover { position: relative; top: 2px; }

.control { border-bottom: 1px solid #ccc; background: #eee; text-align: center; padding: 20px 0; display: none; }

效果如下：