JavaScript实现带有子菜单和控件的slider轮播图效果


Posted in Javascript onNovember 01, 2017

大家或许做过(照片轮播)无限滚动图片的项目,但是,如果使用普通的滚动,当到达最后一张时,便会滚动回第一张,这是一个非常不好的用户体验。下面通过本文给大家分享基于JavaScript实现带有子菜单和控件的slider轮播图效果,具体实现代码如下所示:

实现效果:

JavaScript实现带有子菜单和控件的slider轮播图效果

实现原理:

// 步骤
// 1. 获取事件源以及相关元素
// 2. 复制第一张图片所在的li,添加到ul的最后面
// 3. 给ol添加li,ul中的个数-1个,并点亮第一个按钮
// 4. 鼠标放到ol的li上切换图片
// 5. 添加定时器
// 6. 左右切换图片(鼠标放上去隐藏,移开显示)

实现代码:

<!DOCTYPE html>
<html>
<head>
  <title>轮播图</title>
  <meta charset="utf-8">
  <style type="text/css">
    *{
      padding: 0;
      margin: 0;
      list-style: none;
      border: 0;
    }
    .all{
      width: 500px;
      height: 200px;
      padding: 7px;
      margin: 100px auto;
      position: relative;
      box-shadow: 1px 1px 5px #2d2d2d;
    }
    .screen{
      width: 500px;
      height: 200px;
      overflow: hidden;
      position: relative;
    }
    .screen li{
      width: 500px;
      height: 200px;
      overflow: hidden;
      float: left;
    }
    .screen ul{
      position: absolute;
      left: 0;
      top: 0;
      width: 3000px;
    }
    .all ol{
      position: absolute;
      right: 10px;
      bottom: 10px;
      line-height: 20px;
      text-align: center;
    }
    .all ol li{
      float: left;
      width: 20px;
      height: 20px;
      text-align: center;
      background-color: #fff;
      border: 1px solid #ccc;
      margin-left: 10px;
      cursor: pointer;
    }
    .all ol li.current{
      background-color: #03c03c;
    }
    #arr{
      display: none;
    }
    #arr span{
      width: 40px;
      height: 40px;
      left: 5px;
      top: 50%;
      position: absolute;
      margin-top: -20px;
      background-color: #000;
      cursor: pointer;
      line-height: 35px;
      text-align: center;
      font-weight: bold;
      font-family: "微软雅黑";
      font-size: 30px;
      color: #fff;
      opacity: 0.3;
      border-radius: 50%;
      box-shadow: 1px 1px 3px #2d2d2d;
    }
    #arr #right{
      right: 5px;
      left: auto;
    }
  </style>
</head>
<body>
<div class="all" id="all">
  <div class="screen" id="screen">
    <ul id="ul">
      <li><img src="./images/01.jpg" width="500" height="200"></li>
      <li><img src="./images/02.jpg" width="500" height="200"></li>
      <li><img src="./images/03.jpg" width="500" height="200"></li>
      <li><img src="./images/04.jpg" width="500" height="200"></li>
      <li><img src="./images/05.jpg" width="500" height="200"></li>
    </ul>
    <!-- 图片子菜单 -->
    <ol>
    </ol>
    <!-- 左右切换按钮 -->
    <div id="arr">
      <span id="left"><</span>
      <span id="right">></span>
    </div>
  </div>
</div>
<!-- script -->
<script type="text/javascript">
  // 赋值第一张图片放到ul的最后,当图片切换到第五张的时候,直接切换第六张,再从第一张切换到第二张的时候先瞬间切换到第一张图片,然后滑倒第二张
  // 步骤
  // 1. 获取事件源以及相关元素
  // 2. 复制第一张图片所在的li,添加到ul的最后面
  // 3. 给ol添加li,ul中的个数-1个,并点亮第一个按钮
  // 4. 鼠标放到ol的li上切换图片
  // 5. 添加定时器
  // 6. 左右切换图片(鼠标放上去隐藏,移开显示)
  // 1. 获取事件源以及相关元素
  var all = document.getElementById("all");
  var screen = all.firstElementChild || all.firstChild;
  var imgWidth = screen.offsetWidth;
  var ul = screen.firstElementChild || screen.firstChild;
  var ol = screen.children[1];
  var div = screen.lastElementChild || screen.lastChild;
  var spanArr = div.children;
  // 2. 复制第一张图片所在的li,添加到ul的最后面
  var ulNewLi = ul.children[0].cloneNode(true);
  ul.appendChild(ulNewLi);
  // 3. 给ol添加li,ul中的个数-1个,并点亮第一个按钮
  for(var i=0; i<ul.children.length-1; i++){
    var olNewLi = document.createElement("li");
    olNewLi.innerHTML = i+1;
    ol.appendChild(olNewLi);
  } 
  var olLiArr = ol.children;
  olLiArr[0].className = "current";
  // 4. 鼠标放到ol的li上切换图片
  for(var i=0; i<olLiArr.length; i++){
    // 自定义属性,把索引值绑定到元素的index属性上
    olLiArr[i].index = i;
    olLiArr[i].onmouseover = function(){
      // 排他思想
      for(var j=0; j<olLiArr.length; j++){
        olLiArr[j].className = "";
      }
      this.className = "current"
      // 鼠标放到小方块上时,索引值和key以及square同步
      // key = this.index;
      // square = this.index;
      key = square = this.index;
      // 移动盒子
      animate(ul, -this.index*imgWidth);
    }
  }
  // 5. 添加定时器
  var timer = setInterval(autoPlay, 1000);
  // 固定向右切换图片
  // 两个定时器(一个记录图片,一个记录子菜单栏)
  var key = 0;
  var square = 0;
  function autoPlay(){
    // 通过key的自增来模拟图片的索引值,然后移动ul
    key++;
    if(key > olLiArr.length){
      // 图片已经滑到最后一张,接下来应该跳转到第一张,然后滑动到第二张
      ul.style.left = 0;
      key = 1;
    }
    animate(ul, -key*imgWidth);
    // 通过控制square的自增来模拟小方块的索引值,然后点亮盒子
    // 排他思想做小方块
    square++;
    if(square > olLiArr.length-1){
      // 索引值不能大于5,如果大于5则立即变为0;
      square = 0;
    }
    for(var i=0; i<olLiArr.length; i++){
      olLiArr[i].className = "";
    }
    olLiArr[square].className = "current";
  }
  // 鼠标放上去清除定时器,移开启动定时器
  all.onmouseover = function(){
    div.style.display = "block";
    clearInterval(timer);
  }
  all.onmouseout = function(){
    div.style.display = "none";
    timer = setInterval(autoPlay,1000);
  }
  // 6. 左右切换图片(鼠标放上去显示,移开隐藏)
  spanArr[0].onclick = function(){
    // 通过控制key的自增来模拟图片的索引值,然后移动ul
    key--;
    if(key<0){
      // 先移到最后一张,然后key的值取前一张的索引值,然后向前移动
      ul.style.left = -imgWidth*(olLiArr.length) + "px";
      key = olLiArr.length-1;
    }
    animate(ul, -key*imgWidth);
    // 通过控制square的自增来模拟小方块的索引值,然后点亮小方块
    square--;
    if(square<0){
      // 索引值不能大于等于5,如果为5,立即变为0
      square = olLiArr.length-1;
    }
    for(var i=0; i<olLiArr.length; i++){
      olLiArr[i].className = "";
    }
    olLiArr[square].className = "current";
  }
  spanArr[1].onclick = function(){
    // 右侧的和定时器一模一样
    autoPlay();
  }
  // 动画封装
  var absSpeed = 10; //设定步长
  function animate(ele, target){
    clearInterval(ele.timer);
    var speed = target > ele.offsetLeft ? absSpeed : -absSpeed;
    ele.timer = setInterval(function(){
      var val = target - ele.offsetLeft;
      ele.style.left = ele.offsetLeft + speed + "px";
      if(Math.abs(val) < Math.abs(speed)){
        ele.style.left = target + "px";
        clearInterval(ele.timer);
      }
    }, 10)
  }
</script>
</body>
</html>

总结

以上所述是小编给大家介绍的JavaScript实现带有子菜单和控件的slider轮播图效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
可以用鼠标拖动的DIV实现思路及代码
Oct 21 Javascript
鼠标经过tr时,改变tr当前背景颜色
Jan 13 Javascript
JS动态加载当前时间的方法
Feb 09 Javascript
jQuery插件开发的五种形态小结
Mar 04 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
Nov 04 Javascript
AngularJS实现元素显示和隐藏的几个案例
Dec 09 Javascript
利用纯JS实现像素逐渐显示的方法示例
Aug 14 Javascript
three.js实现3D影院的原理的代码分析
Dec 18 Javascript
浅谈React的最大亮点之虚拟DOM
May 29 Javascript
深入探讨JavaScript的最基本部分之执行上下文
Feb 12 Javascript
Angular封装表单控件及思想总结
Dec 11 Javascript
JS实现可控制的进度条
Mar 25 Javascript
bootstrap Table的一些小操作
Nov 01 #Javascript
react-native fetch的具体使用方法
Nov 01 #Javascript
Vue异步加载about组件
Oct 31 #Javascript
微信小程序顶部可滚动导航效果
Oct 31 #Javascript
React Native使用Modal自定义分享界面的示例代码
Oct 31 #Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
Oct 31 #Javascript
使用nvm管理不同版本的node与npm的方法
Oct 31 #Javascript
You might like
JavaScript中获取元素索引的函数
2010/09/10 Javascript
网页中CDATA标记的说明
2010/09/12 Javascript
jQuery实现可拖动的浮动层完整代码
2013/05/27 Javascript
jQuery中get和post方法传值测试及注意事项
2014/08/08 Javascript
jquery单选框radio绑定click事件实现方法
2015/01/14 Javascript
使用JS代码实现点击按钮下载文件
2016/11/12 Javascript
详解用webpack把我们的业务模块分开打包的方法
2017/07/20 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
2019/04/17 Javascript
ES6 Promise对象的应用实例分析
2019/06/27 Javascript
js实现图片无缝循环轮播
2019/10/28 Javascript
用Golang运行JavaScript的实现示例
2019/11/25 Javascript
js判断密码强度的方法
2020/03/18 Javascript
详解关于Vue单元测试的几个坑
2020/04/26 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
2020/06/04 Javascript
vue实现购物车列表
2020/06/30 Javascript
[01:01:01]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第一场 10.29
2020/10/29 DOTA
Python random模块常用方法
2014/11/03 Python
利用python程序生成word和PDF文档的方法
2017/02/14 Python
python编程实现随机生成多个椭圆实例代码
2018/01/03 Python
Windows下安装Django框架的方法简明教程
2018/03/28 Python
python实现朴素贝叶斯算法
2018/11/19 Python
在python3中实现更新界面
2020/02/21 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
使用css3制作登录表单的步骤
2014/04/07 HTML / CSS
CSS3绘制超炫的上下起伏波动进度加载动画
2016/04/21 HTML / CSS
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
Original Penguin英国官方网站:美国著名休闲时装品牌
2016/10/30 全球购物
Born鞋子官网:Born Shoes
2017/04/06 全球购物
捐款倡议书范文
2014/02/02 职场文书
小学英语教学反思案例
2014/02/04 职场文书
擅自离岗检讨书
2014/02/11 职场文书
2015年党风廉政承诺书
2015/01/22 职场文书
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
2021/05/30 Javascript
Opencv实现二维直方图的计算及绘制
2021/07/21 Python
JavaScript高级程序设计之变量与作用域
2021/11/17 Javascript
如何通过cmd 连接阿里云服务器
2022/04/18 Servers