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 相关文章推荐
在textarea中显示html页面的javascript代码
Apr 20 Javascript
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
Mar 12 Javascript
读jQuery之三(构建选择器)
Jun 11 Javascript
利用js实现选项卡的特别效果的实例
Mar 03 Javascript
jQuery on()方法使用技巧详解
Apr 16 Javascript
jQuery动画效果相关方法实例分析
Dec 31 Javascript
jQuery stop()用法实例详解
Jul 28 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
Nov 09 Javascript
vue计算属性及使用详解
Apr 02 Javascript
JS使用setInterval实现的简单计时器功能示例
Apr 19 Javascript
vue计算属性和监听器实例解析
May 10 Javascript
vuejs简单验证码功能完整示例
Jan 08 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
不用iconv库的gb2312与utf-8的互换函数
2006/10/09 PHP
用PHP生成自己的LOG文件
2006/10/09 PHP
discuz7 phpMysql操作类
2009/06/21 PHP
简单PHP上传图片、删除图片实现代码
2010/05/12 PHP
php stream_get_meta_data返回值
2013/09/29 PHP
PHP 观察者模式深入理解与应用分析
2019/09/25 PHP
javascript Window及document对象详细整理
2011/01/12 Javascript
JS中的public和private对象,即static修饰符
2012/01/18 Javascript
解析prototype,JQuery中跳出each循环的方法
2013/12/12 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
2014/01/03 Javascript
js判断undefined类型示例代码
2014/02/10 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
2014/04/12 Javascript
jQuery中:contains选择器用法实例
2014/12/30 Javascript
jQuery中animate动画第二次点击事件没反应
2015/05/07 Javascript
Svg.js实例教程及使用手册详解(一)
2016/05/16 Javascript
js操作DOM--添加、删除节点的简单实例
2016/07/08 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
2016/07/10 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
2016/10/26 Javascript
nodejs和php实现图片访问实时处理
2017/01/05 NodeJs
Angular通过angular-cli来搭建web前端项目的方法
2017/07/27 Javascript
关于前后端json数据的发送与接收详解
2017/07/30 Javascript
Vue.JS项目中5个经典Vuex插件
2017/11/28 Javascript
ES6下子组件调用父组件的方法(推荐)
2018/02/23 Javascript
详解iview的checkbox多选框全选时校验问题
2019/06/10 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
用Python的Django框架完成视频处理任务的教程
2015/04/02 Python
基于Python 装饰器装饰类中的方法实例
2018/04/21 Python
Python文本处理简单易懂方法解析
2019/12/19 Python
python实现简单飞行棋
2020/02/06 Python
Python urllib.request对象案例解析
2020/05/11 Python
python+flask编写一个简单的登录接口
2020/11/13 Python
Python实现粒子群算法的示例
2021/02/14 Python
智能室内花园:Click & Grow
2021/01/29 全球购物
岗位标兵事迹材料
2014/05/17 职场文书
农村文化建设标语
2014/10/07 职场文书
2014年组织部工作总结
2014/11/14 职场文书