使用js实现一个简单的无缝轮播效果

发布时间:2020-11-04 17:36:20 作者:Leah
来源:亿速云 阅读:219

今天就跟大家聊聊有关使用js实现一个简单的无缝轮播效果,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

具体内容如下

*{
 margin: 0;
 padding: 0;
}
#box{
 width: 500px;
 height: 200px;
 padding: 5px;
 margin: 50px auto;
 border: 1px solid #999999;
}
.inner{
 width: 500px;
 height: 200px;
 overflow: hidden;
 position: relative;
}
ul,ol{
 list-style: none;
 position: absolute;
}
ul{
 width: 3000px;
 height: 200px;
}
li{
 float: left;
}
ol{
 right: 20px;
 bottom: 20px;
}
ol>li{
 width: 25px;
 height: 25px;
 line-height: 25px;
 text-align: center;
 background-color: #fff;
 border-radius: 50%;
 margin-right: 10px;
 cursor: pointer;
}
ol>li.current{
 background-color: orange;
 color: white;
}
.control{
 display: none;
}
.control>span{
 position: absolute;
 top: 50%;
 margin-top: -20px;
 display: inline-block;
 width: 25px;
 height: 40px;
 line-height: 40px;
 background-color: rgba(0,0,0,0.3);
 color: white;
 font-size: 20px;
 cursor: pointer;
 text-align: center;
}
.right{
 right: 0;
}
<div id="box">
 <div class="inner">
 <ul>
  <li><img src="image/1.jpg" alt=""></li>
  <li><img src="image/2.jpg" alt=""></li>
  <li><img src="image/3.jpg" alt=""></li>
  <li><img src="image/4.jpg" alt=""></li>
  <li><img src="image/5.jpg" alt=""></li>
 </ul>
 <ol>
  <li class="current">1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
 </ol>
 <div class="control">
  <span class="left"><</span>
  <span class="right">></span>
 </div>
 </div>
</div>
var box=document.getElementById("box");
var ul=box.getElementsByTagName("ul")[0];
var ol=box.getElementsByTagName("ol")[0];
var olLiArr=ol.children;
var control=box.getElementsByClassName("control")[0];

ul.appendChild(ul.children[0].cloneNode(true));
var index=0;
var circleIndex=0;

var timer=setInterval(autoPlay,2000);
//鼠标移入移出
box.onmouseover=function () {
 clearInterval(timer);
 control.style.display="block";
};
box.onmouseout=function () {
 timer=setInterval(autoPlay,2000);
 control.style.display="none";
};
//小圆点
for (var i=0;i<olLiArr.length;i++) {
 olLiArr[i].index=i;
 olLiArr[i].onclick=function () {
 if(index===5){
  ul.style.left=0;
  index=0;
 }
 for (var i=0;i<olLiArr.length;i++){
  olLiArr[i].removeAttribute("class");
 }
 this.setAttribute("class","current");
 animate_constSpeed_x(ul,-this.index*500);
 index=this.index;
 circleIndex=this.index;
 }
}
//左右点击
control.children[1].onclick=function () {
 autoPlay();
};
control.children[0].onclick=function () {
 index--;
 if (index<0){
 ul.style.left=-2500+"px";
 index=4;
 }
 animate_constSpeed_x(ul,-index*500);
 circleIndex--;
 if (circleIndex<0){
 circleIndex=4;
 }
 for (var i=0;i<olLiArr.length;i++) {
 olLiArr[i].removeAttribute("class");
 }
 olLiArr[circleIndex].setAttribute("class","current");
};
//自动轮播封装
function autoPlay() {
 index++;
 if (index>5){
 ul.style.left=0;
 index=1;
 }
 animate_constSpeed_x(ul,-index*500);
 circleIndex++;
 if (circleIndex>4){
 circleIndex=0;
 }
 for (var i=0;i<olLiArr.length;i++) {
 olLiArr[i].removeAttribute("class");
 }
 olLiArr[circleIndex].setAttribute("class","current");
}
//匀速封装
function animate_constSpeed_x(ele,endX) {
 clearInterval(ele.timer);
 var step=(endX-ele.offsetLeft)>0&#63;10:-10;
 ele.timer=setInterval(function () {
 ele.style.left=ele.offsetLeft+step+"px";
 console.log(1);
 if(Math.abs(endX-ele.offsetLeft)<=Math.abs(step)){
  clearInterval(ele.timer);
  ele.style.left=endX+"px";
 }
 },10)
}

使用js实现一个简单的无缝轮播效果

看完上述内容,你们对使用js实现一个简单的无缝轮播效果有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注亿速云行业资讯频道,感谢大家的支持。

推荐阅读:
  1. 如何使用js制作动态无缝轮播
  2. js如何实现无缝轮播图效果

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

js

上一篇:Android如何使用图文居中显示控件

下一篇:Jenkins节点配置的实现原理是什么

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》