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 相关文章推荐
JS Loading功能的简单实现
Nov 29 Javascript
jQuery文件上传插件Uploadify使用指南
Jun 05 Javascript
Javascript实现网络监测的方法
Jul 31 Javascript
JavaScript实现的经典文件树菜单效果
Sep 08 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
Oct 23 Javascript
AngularJs 60分钟入门基础教程
Apr 03 Javascript
Bootstrap表格和栅格分页实例详解
May 20 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
Oct 10 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
Dec 12 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
Mar 02 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
Aug 22 Javascript
vue实现虚拟列表功能的代码
Jul 28 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
php xml留言板 xml存储数据的简单例子
2009/08/24 PHP
php数组函数序列之array_search()- 按元素值返回键名
2011/11/04 PHP
php教程之phpize使用方法
2014/02/12 PHP
laravel安装zend opcache加速器教程
2015/03/02 PHP
PHP实现上一篇下一篇的方法实例总结
2016/09/22 PHP
Yii输入正确验证码却验证失败的解决方法
2017/06/06 PHP
Laravel实现ORM带条件搜索分页
2019/10/24 PHP
(JS实现)MapBar中坐标的加密和解密的脚本
2007/05/16 Javascript
告诉大家什么是JSON
2008/06/10 Javascript
小议Javascript中的this指针
2010/03/18 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
2011/11/10 Javascript
javascript 数字格式化输出的实现代码
2013/12/10 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
2014/06/03 Javascript
js比较日期大小的方法
2015/05/12 Javascript
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
2015/10/23 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
2016/09/08 Javascript
vue-quill-editor实现图片上传功能
2017/08/08 Javascript
ES7中利用Await减少回调嵌套的方法详解
2017/11/01 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
2017/12/18 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
2019/01/21 Javascript
Smartour 让网页导览变得更简单(推荐)
2019/07/19 Javascript
react native 仿微信聊天室实例代码
2019/09/17 Javascript
Python open()文件处理使用介绍
2014/11/30 Python
Python3.0中普通方法、类方法和静态方法的比较
2019/05/03 Python
Python实现遗传算法(二进制编码)求函数最优值方式
2020/02/11 Python
python中time、datetime模块的使用
2020/12/14 Python
css3实现动画的三种方式
2020/08/24 HTML / CSS
特步官方商城:Xtep
2017/03/21 全球购物
Vans(范斯)德国官网:美国南加州的原创极限运动潮牌
2017/05/02 全球购物
转党组织关系介绍信
2014/01/08 职场文书
知识竞赛活动方案
2014/02/18 职场文书
团委书记的竞聘演讲稿
2014/04/24 职场文书
2014年校长工作总结
2014/12/11 职场文书
读《解忧杂货店》有感:请相信一切都是最好的安排
2019/11/07 职场文书
nginx刷新页面出现404解决方案(亲测有效)
2022/03/18 Servers