js实现简单的无缝轮播效果


Posted in Javascript onSeptember 05, 2020

本文实例为大家分享了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?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实现简单的无缝轮播效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery蒙版控件实现代码
Dec 08 Javascript
Jquery 数据选择插件Pickerbox使用介绍
Aug 24 Javascript
jquery的clone方法应用于textarea和select的bug修复
Jun 26 Javascript
js 左右悬浮对联广告特效代码
Dec 12 Javascript
jQuery中html()方法用法实例
Dec 25 Javascript
jquery小火箭返回顶部代码分享
Aug 19 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
Dec 07 Javascript
基于JavaScript实现前端数据多条件筛选功能
Aug 19 Javascript
JS 创建对象的模式实例小结
Apr 28 Javascript
JavaScript实现简单的弹窗效果
May 19 Javascript
Vue组件间数据传递的方式(3种)
Jul 13 Javascript
Openlayers绘制地图标注
Sep 28 Javascript
JS+CSS实现炫酷光感效果
Sep 05 #Javascript
js实现炫酷光感效果
Sep 05 #Javascript
js实现搜索提示框效果
Sep 05 #Javascript
jQuery实现简单三级联动效果
Sep 05 #jQuery
javascript canvas实现简易时钟例子
Sep 05 #Javascript
vue中使用vue-pdf的方法详解
Sep 05 #Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
Sep 05 #Javascript
You might like
php eval函数用法 PHP中eval()函数小技巧
2012/10/31 PHP
CodeIgniter图像处理类的深入解析
2013/06/17 PHP
解析PHP中常见的mongodb查询操作
2013/06/20 PHP
PHP入门教程之面向对象的特性分析(继承,多态,接口,抽象类,抽象方法等)
2016/09/11 PHP
javascript 导出数据到Excel(处理table中的元素)
2009/12/18 Javascript
JavaScript类和继承 constructor属性
2010/03/04 Javascript
跟着Jquery API学Jquery之一 选择器
2010/04/07 Javascript
基于jquery的loading效果实现代码
2010/11/05 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
2013/11/10 Javascript
jquery css 设置table的奇偶行背景色示例
2014/06/03 Javascript
PHP PDO操作总结
2014/11/17 Javascript
老生常谈javascript变量的命名规范和注释
2016/09/29 Javascript
使用JS正则表达式 替换括号,尖括号等
2016/11/29 Javascript
Javascript中构造函数要注意的一些坑
2017/01/23 Javascript
vue移动端实现下拉刷新
2018/04/22 Javascript
浅谈如何通过node.js对数据进行MD5加密
2018/05/16 Javascript
Electron-vue脚手架改造vue项目的方法
2018/10/22 Javascript
小程序如何获取多个formId实现详解
2019/09/20 Javascript
从表单校验看JavaScript策略模式的使用详解
2020/10/17 Javascript
[46:03]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python中map和列表推导效率比较实例分析
2015/06/17 Python
修复CentOS7升级Python到3.6版本后yum不能正确使用的解决方法
2018/01/26 Python
使用python生成杨辉三角形的示例代码
2018/08/29 Python
如何通过python实现人脸识别验证
2020/01/17 Python
python获取时间戳的实现示例(10位和13位)
2020/09/23 Python
HTML5 embed 标签使用方法介绍
2013/08/13 HTML / CSS
曼联官方网上商店:Manchester United Direct
2017/07/28 全球购物
诺心蛋糕官网:LE CAKE
2018/08/25 全球购物
Groupon比利时官方网站:特卖和网上购物高达-70%
2019/08/09 全球购物
庆元旦演讲稿
2014/09/15 职场文书
咖啡厅商业计划书
2014/09/15 职场文书
房屋维修协议书范本
2014/09/25 职场文书
关于元旦的广播稿2016
2015/12/17 职场文书
拥有这5个特征人,“命”都不会太差
2019/08/16 职场文书
Pytorch中使用ImageFolder读取数据集时忽略特定文件
2022/03/23 Python
【海涛教你打dota】体验一超神发条:咱是抢盾专业户
2022/04/01 DOTA