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 相关文章推荐
爱恋千雪-US-AscII加密解密工具(网页加密)下载
Jun 06 Javascript
字符串的replace方法应用浅析
Dec 06 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
Dec 16 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
Dec 16 Javascript
面试常见的js算法题
Mar 23 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
Jun 01 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
Sep 14 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
vue2.0获取鼠标位置的方法
Sep 13 Javascript
js实现搜索栏效果
Nov 16 Javascript
使用layui定义一个模块并使用的例子
Sep 14 Javascript
javascript中闭包closure的深入讲解
Mar 03 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原创论坛
2006/10/09 PHP
关于shopex同步ucenter的redirect问题,导致script不运行
2013/04/10 PHP
php判断字符串在另一个字符串位置的方法
2014/02/27 PHP
thinkPHP+phpexcel实现excel报表输出功能示例
2017/06/06 PHP
php原生数据库分页的代码实例
2019/02/18 PHP
laravel 判断查询数据库返回值的例子
2019/10/11 PHP
Javascript限制网页只能在微信内置浏览器中访问
2014/11/09 Javascript
JQuery插件jcarousellite的参数中文说明
2015/05/11 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
2015/06/03 Javascript
javascript常见数据验证插件大全
2015/08/03 Javascript
jquery实现华丽的可折角广告代码
2015/09/02 Javascript
详解Document.Cookie
2015/12/25 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
2016/10/10 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
2017/01/04 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
2017/02/10 Javascript
AngularJS 中ui-view传参的实例详解
2017/08/25 Javascript
vue如何在自定义组件中使用v-model
2018/05/14 Javascript
jquery实现搜索框功能实例详解
2018/07/23 jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
2019/06/10 jQuery
layui表格数据复选框回显设置方法
2019/09/13 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
jquery实现点击左右按钮切换图片
2021/01/27 jQuery
python并发编程之多进程、多线程、异步和协程详解
2016/10/28 Python
Python面向对象class类属性及子类用法分析
2018/02/02 Python
使用anaconda的pip安装第三方python包的操作步骤
2018/06/11 Python
Pandas统计重复的列里面的值方法
2019/01/30 Python
css3 伪类选择器快速复习小结
2019/09/10 HTML / CSS
HTML5实现视频直播功能思路详解
2017/11/16 HTML / CSS
医科大学毕业生自荐信
2014/02/03 职场文书
2014村务公开实施方案
2014/02/25 职场文书
教师节促销方案
2014/03/22 职场文书
教师竞聘上岗演讲稿
2014/09/03 职场文书
2016中学教师读书心得体会
2016/01/13 职场文书
CSS变量实现主题切换的方法
2021/06/23 HTML / CSS
opencv深入浅出了解机器学习和深度学习
2022/03/17 Python
MySQL时区造成时差问题
2022/04/13 MySQL