原生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 相关文章推荐
利用javascript/jquery对上传文件格式过滤的方法
Jul 25 Javascript
javaScript call 函数的用法说明
Apr 09 Javascript
javascript如何判断输入的url是否正确
Apr 11 Javascript
javascript ASCII和Hex互转的实现方法
Dec 27 Javascript
正则验证小数点后面只能有两位数的方法
Feb 28 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
May 15 Javascript
在vue 中使用 less的教程详解
Sep 26 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
Aug 20 Javascript
vue实现购物车小案例
Sep 27 Javascript
selenium+java中用js来完成日期的修改
Oct 31 Javascript
解决vue项目获取dom元素宽高总是不准确问题
Jul 29 Javascript
解决vue路由name同名,路由重复的问题
Aug 05 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
香妃
2021/03/03 冲泡冲煮
PHP实现今天是星期几的几种写法
2013/09/26 PHP
php生成0~1随机小数的方法(必看)
2017/04/05 PHP
详解PHP变量传值赋值和引用赋值变量销毁
2019/03/23 PHP
Thinkphp极验滑动验证码实现步骤解析
2020/11/24 PHP
Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
2008/12/19 Javascript
JavaScript 获取用户客户端操作系统版本
2009/08/25 Javascript
JavaScript 学习笔记(七)字符串的连接
2009/12/31 Javascript
Javascript 函数中的参数使用分析
2010/03/27 Javascript
将string解析为json的几种方式小结
2010/11/11 Javascript
读jQuery之五(取DOM元素)
2011/06/20 Javascript
JavaScript入门之事件、cookie、定时等
2011/10/21 Javascript
js中top的作用深入剖析
2014/03/04 Javascript
jQuery获取样式中颜色值的方法
2015/01/29 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
2016/03/30 Javascript
Node.js 中exports 和 module.exports 的区别
2017/03/14 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
2017/07/31 Javascript
vue根据条件不同显示不同按钮的操作
2020/08/04 Javascript
[05:05]第三天的dota2
2013/07/29 DOTA
python数据结构之二叉树的建立实例
2014/04/29 Python
Python基于scrapy采集数据时使用代理服务器的方法
2015/04/16 Python
python输出指定月份日历的方法
2015/04/23 Python
Python 实现选择排序的算法步骤
2018/04/22 Python
Python面向对象之Web静态服务器
2019/09/03 Python
Django2 连接MySQL及model测试实例分析
2019/12/10 Python
Python argparse模块使用方法解析
2020/02/20 Python
Python Socket TCP双端聊天功能实现过程详解
2020/06/15 Python
详解Open Folder as PyCharm Project怎么添加的方法
2020/12/29 Python
pycharm Tab键设置成4个空格的操作
2021/02/26 Python
python实现发送邮件
2021/03/02 Python
Marks & Spencer爱尔兰:英国马莎百货
2016/04/20 全球购物
学生会竞选演讲稿纪检部
2014/08/25 职场文书
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
优秀班主任申报材料
2014/12/16 职场文书
北京大学中文系教授推荐的10本小说
2019/08/08 职场文书
Python中异常处理用法
2021/11/27 Python