javascript无缝滚动

最新推荐文章于 2023-07-25 17:05:03 发布

qianlingvip

最新推荐文章于 2023-07-25 17:05:03 发布

阅读量223

点赞数

本文链接：https://blog.csdn.net/zhangqling/article/details/82804643

版权

鼠标滑过左侧按钮向左滑动，鼠标滑过右侧按钮，向右滑动。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>无缝滚动</title>
	<style>
		@font-face {
		  font-family: 'iconfont';
		  src: url('font/iconfont.eot');
		  src: url('font/iconfont.eot?#iefix') format('embedded-opentype'),
		  url('font/iconfont.woff') format('woff'),
		  url('font/iconfont.ttf') format('truetype'),
		  url('font/iconfont.svg#iconfont') format('svg');
		}
		.iconfont{
		  font-family:"iconfont" !important;
		  font-size:80px;font-style:normal;
		  -webkit-font-smoothing: antialiased;
		  -webkit-text-stroke-width: 0.2px;
		  -moz-osx-font-smoothing: grayscale;
		}
		*{
			padding: 0;
			margin: 0;
		}
		.box{
			position: relative;
			width: 900px;
			height: 200px;
			overflow: hidden;
			margin:20px auto 0;
		}
		ul{
			list-style: none;
			height: 200px;
			position: absolute;
			top: 0;
			left: 0;
		}
		li{display: inline-block;
			width: 300px;
			height: 200px;
		}
		img{
			width: 100%;
			height: 100%;
		}
		a{
			display: inline-block;
			position: fixed;
			right: 90px;
			top: 20px;
			width: 80px;
			height: 200px;
			overflow: auto;
			z-index: 1;
			background:rgba(0,0,0,0.8);
			text-decoration: none;
			color: #fff;
			line-height: 200px;
			text-align: center;
		}
		.le{
			left: 90px;
			transform: rotate(180deg);
		}
	</style>
	<script>
		window.onload=function(){
			var roll=document.getElementById("roll");
			var oUl=document.getElementsByTagName("ul")[0];
			var oli=document.getElementsByTagName("li");
			var btn=document.getElementsByTagName("a");
			var iSpend=-2;
			var timer=null;
			oUl.style.width=oli[0].offsetWidth*oli.length+34+"px";
			timer=setInterval(function(){
				oUl.style.left=oUl.offsetLeft+iSpend+"px";

				if (oUl.offsetLeft<-oUl.offsetWidth/2) {
					oUl.style.left='0px';
				}
				else if (oUl.offsetLeft>0){
					oUl.style.left=-oUl.offsetWidth/2+'px';
				}
			},10)
			btn[0].onmouseover=function(){
				iSpend=2;
			}
			btn[1].onmouseover=function(){
				iSpend=-2;
			}
			oUl.onmouseover=function(){
				clearInterval(timer);
			}
			oUl.onmouseout=function(){
				timer=setInterval(function(){
				oUl.style.left=oUl.offsetLeft+iSpend+"px";

				if (oUl.offsetLeft<-oUl.offsetWidth/2) {
					oUl.style.left='0px';
				}
				else if (oUl.offsetLeft>0){
					oUl.style.left=-oUl.offsetWidth/2+'px';
				}
			},10)
			}
			
		}
			
	</script>
</head>
<body>
	<div class="box" id="roll">
		<a href="#" class="iconfont">&#xe62d;</a>
		<a href="#" class="le iconfont">&#xe62d;</a>
		<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/5.jpg" alt=""></li>
			<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/5.jpg" alt=""></li>
		</ul>
	</div>
</body>
</html>

效果展示：

qianlingvip

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript无缝滚动

鼠标滑过左侧按钮向左滑动，鼠标滑过右侧按钮，向右滑动。 &lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;无缝滚动&lt;/title&gt; &lt;style&gt; @font-face
复制链接

扫一扫