原生js滑动轮播封装


Posted in Javascript onJuly 31, 2020

本文实例为大家分享了原生js滑动轮播的具体代码,供大家参考,具体内容如下

封装滑动轮播

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>cmm无缝轮播</title>
 <style type="text/css">
 *{margin: 0 ;padding : 0}
  #container{
   height: 470px;
   width: 590px;
   border: 1px solid red;
   position: relative;
   margin: 50px auto;
  }
  #box{
   position: absolute;
   list-style: none;
   
  }
  #box li{
   float: left;
  }
  #pages {
 width: 100%;
 height: 30px;
 background: #ccc;
 position: absolute;
 bottom: 0;
 }

 #pages i {
 width: 20px;
 height: 20px;
 display: inline-block;
 border-radius: 10px;
 background: #fff;
 margin: 5px;
 }

 #pages i.current {
 background: #f00;
 }

 #prev, #next {
 width: 45px;
 height: 100px;
 position: absolute;
 top: 0;
 bottom: 0;
 margin: auto;
 background: #ccc;
 line-height: 100px;
 text-align: center;
 font-size: 40px;
 color: #fff;
 }
 #next {
 right: 0;
 }
 </style>
</head>
<body>
 <div id="container">
 <ul id="box">
 <li><img src="images/1.jpg"></li>
 <li><img src="images/2.jpg"></li>
 <li><img src="images/3.jpg"></li>
 <li><img src="images/4.jpg"></li>
 </ul>
 <div id="pages"></div>
 <div id="prev"><</div>
 <div id="next">></div>
 </div>

 <script src="js/tools.js"></script>
 <script>
  var lis = $("li"),
   length = lis.length,
   liWidth = lis[0].clientWidth,
   currentIndex = 0,
   nextIndex = 1,
   timer = null,
   move = null,
   circls = null,
   durations = 2000;

 // 动态设置ul宽度
 $("#box").style.width = length * liWidth + "px";

 // 动态设置小圆点
 var html = "";
 for(var i = 0 ;i <length ;i++){
  html += "<i></i>"
 }
 $("#pages").innerHTML= html;
 circls = $("i");
 circls[0].className = "current";

 // 切换动画
 move = function(){
  // 设置box运动终点值
  var _left = -1 * nextIndex * liWidth;

  // 开始动画
  animate($("#box"),{left:_left},200)

  // 修改小圆点样式
  circls[currentIndex].className = "";
  circls[nextIndex].className = "current";

  // 修改索引
  currentIndex = nextIndex;
  nextIndex++;
  if(nextIndex >= length){
   nextIndex = 0;
  }
 }


 // 自动动画
 timer = setInterval(move, durations)

 // container中鼠标移入,移出事件
 on($("#container"),"mouseenter",function(){
  clearInterval(timer);
 })
 on($("#container"),"mouseleaver",function(){
  timer = setInterval(move, durations);
 })

 // 点击小圆点,切换至对应的图片
 on($("#pages"),"click",function(e){
  e = e || event;
  var src = e.target || src.Element;
  if(src.nodeName === "I"){
   var _index = Array.from(circls).indexOf(src);
   if(_index === currentIndex){
    return
   }
   nextIndex = _index;
   move();
  }
 })

 // 点击翻页进行切换
 on($("#prev"),"click",function(){
  nextIndex = currentIndex - 1;
  if(nextIndex < 0){
   nextIndex = length;
  }
  move();
 })
 on($("#next"),"click",function(){
  move();
 })
 </script>
</body>
</html>

更多关于轮播图效果的专题,请点击下方链接查看学习

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

Javascript 相关文章推荐
jquery 简单图片导航插件jquery.imgNav.js
Mar 17 Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
Dec 20 Javascript
JQuery UI的拖拽功能实现方法小结
Mar 14 Javascript
js使用eval解析json实例与注意事项分享
Jan 18 Javascript
vue-router跳转页面的方法
Feb 09 Javascript
React组件之间的通信的实例代码
Jun 27 Javascript
VUE element-ui 写个复用Table组件的示例代码
Nov 18 Javascript
Vue.js实现的表格增加删除demo示例
May 22 Javascript
看看“疫苗查询”小程序有温度的代码
Jul 31 Javascript
vue拖拽组件使用方法详解
Dec 01 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
May 22 Javascript
vue 使用 canvas 实现手写电子签名
Mar 06 Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
Jul 31 #Javascript
jquery轮播图插件使用方法详解
Jul 31 #jQuery
在Uni中使用Vue的EventBus总线机制操作
Jul 31 #Javascript
jQuery带控制按钮轮播图插件
Jul 31 #jQuery
Vue之封装公用变量以及实现方式
Jul 31 #Javascript
three.js 将图片马赛克化的示例代码
Jul 31 #Javascript
three.js 如何制作魔方
Jul 31 #Javascript
You might like
rrmdir php中递归删除目录及目录下的文件
2011/05/15 PHP
srcElement表格样式
2006/09/03 Javascript
Javascript开发包大全整理
2006/12/22 Javascript
初学JavaScript_03(ExtJs Grid的简单使用)
2008/10/02 Javascript
js constructor的实际作用分析
2011/11/15 Javascript
Jquery刷新页面背景图片随机变换的实现方法
2013/03/15 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
2020/09/12 Javascript
jquery中EasyUI实现异步树
2015/03/01 Javascript
js获取页面及个元素高度、宽度的代码
2016/04/26 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
2016/06/01 Javascript
关于Vue.js一些问题和思考学习笔记(2)
2016/12/02 Javascript
ES6中的rest参数与扩展运算符详解
2017/07/18 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
2017/09/12 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
2018/09/28 Javascript
微信小程序云开发之使用云数据库
2019/05/17 Javascript
node.js 微信开发之定时获取access_token
2020/02/07 Javascript
[49:27]LGD vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[10:05]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD 选手采访
2021/03/11 DOTA
Python实现快速多线程ping的方法
2015/07/15 Python
Python图像灰度变换及图像数组操作
2016/01/27 Python
Python自定义进程池实例分析【生产者、消费者模型问题】
2016/09/19 Python
浅谈Python中(&amp;,|)和(and,or)之间的区别
2019/08/07 Python
pycharm中导入模块错误时提示Try to run this command from the system terminal
2020/03/26 Python
Python类绑定方法及非绑定方法实例解析
2020/10/09 Python
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
西班牙国家航空官方网站:Iberia
2017/11/16 全球购物
莫斯科大型旅游休闲商品超市:Camping.ru
2020/09/16 全球购物
说一下Linux下有关用户和组管理的命令
2014/08/18 面试题
班级旅游计划书
2014/05/03 职场文书
优秀少先队大队辅导员事迹材料
2014/05/04 职场文书
企业晚会策划方案
2014/05/29 职场文书
停车场管理制度范本
2015/08/05 职场文书
python执行js代码的方法
2021/05/13 Python
详解缓存穿透击穿雪崩解决方案
2021/05/28 Redis
Python爬虫框架之Scrapy中Spider的用法
2021/06/28 Python
关于PostgreSQL JSONB的匹配和交集问题
2021/09/14 PostgreSQL