js图片无缝滚动

最新推荐文章于 2022-02-18 19:52:16 发布

web_note

最新推荐文章于 2022-02-18 19:52:16 发布

阅读量404

点赞数

分类专栏： javascript 文章标签：左右无缝滚动无缝滚动无缝轮播代码

本文链接：https://blog.csdn.net/web_note/article/details/52848673

版权

javascript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

无缝滚动的原理：假设轮播区域有7张图片进行轮播，当第一张图片向左移动后，轮播区域尾部必然会有空缺的区域；为了不让不能播区域有空缺，我们可以在布局的7张图片后面再加上7张同样的照片，当第一张图片向左移动后，第八张图片就会补位到轮播区域的第7个位置。然而这样只能实现一次的轮播，那么我们就考虑使用定时器来实现无限循环。（实现步骤如下）

一、首先先布局

准备一个盒子box作为轮播区域，然后盒子里面用ul装着li标签，li标签为每个要轮播的图片（用img标签放图片也可以，我这里只做简单演示而已；还有上面说到的轮播区空缺补位的图片也是用js代码写出来，布局和样式不需要写）；

二、写JS代码实现滚动

在布局和样式完成的前提下，编写js代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
#box{
width: 700px;
height: 150px;
margin: 50px auto;
background: lawngreen;
position: relative;
overflow: hidden;
}
#box ul{
width: 1400px;
height: 150px;
position: absolute;
left: 0;
}
#box ul li{
width: 100px;
height: 150px;
border: 1px solid #000000;
box-sizing: border-box;
float: left;
text-align: center;
line-height: 150px;
font-family: "微软雅黑";
font-size: 50px;
}
</style>
<script type="text/javascript">
window.οnlοad=function(){
var oPic_box=document.getElementById('pic_box');
var aLi=oPic_box.getElementsByTagName('li');
oPic_box.innerHTML=oPic_box.innerHTML+oPic_box.innerHTML;//补位空缺区域的ul
oPic_box.style.width=aLi[0].offsetWidth*aLi.length+'px';//装着li的ul的宽，这样写是为了方便；假如轮播图片为8张，那么这样写就不用去样式里面改ul的宽度了
var timer=null;
var speed=-2;
timer=setInterval(function move(){
if (oPic_box.offsetLeft<-oPic_box.offsetWidth/2) {
oPic_box.style.left=0+'px';
} else if(oPic_box.offsetLeft>0){
oPic_box.style.left=-oPic_box.offsetWidth/2+'px';
}
oPic_box.style.left=oPic_box.offsetLeft+speed+'px';

},30);
};
</script>
</head>
<body>
<div id="box">
<ul id="pic_box">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</div>
</body>
</html>

以上实例是向左轮播的代码；轮播还可以扩展到其他知识点，比如，我可以添加两个按钮，一个向左，一个向右，当点击向左，图片向左运动，反之向右运动；还有当鼠标移入轮播区域，轮播停止等等。