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 相关文章推荐
悄悄用脚本检查你访问过哪些网站的代码
Dec 04 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
Sep 04 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
Dec 29 Javascript
JavaScript数据类型学习笔记
Jan 25 Javascript
js实现内容显示并使用json传输数据
Mar 16 Javascript
Bootstrap表单布局样式代码
May 31 Javascript
JS正则匹配中文的方法示例
Jan 06 Javascript
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
angular中子控制器向父控制器传值的实例
Oct 08 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
Feb 18 Javascript
详解如何理解vue的key属性
Apr 14 Javascript
Node.js API详解之 readline模块用法详解
May 22 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
上海无线电三厂简史修改版
2021/03/01 无线电
德生PL450的电路分析和低放电路的改进办法
2021/03/02 无线电
水质对咖图啡风味的影响具体有哪些
2021/03/03 冲泡冲煮
PHP的autoload自动加载机制使用说明
2010/12/28 PHP
drupal 代码实现URL重写
2011/05/04 PHP
php从数组中随机抽取一些元素的代码
2012/11/05 PHP
php中用加号与用array_merge合并数组的区别深入分析
2013/06/03 PHP
PHP OPP机制和模式简介(抽象类、接口和契约式编程)
2014/06/09 PHP
JavaScript 给汉字排序实例代码
2008/06/28 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
2011/09/29 Javascript
纯JS实现旋转图片3D展示效果
2015/04/12 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
2016/05/21 Javascript
Bootstrap表单布局
2016/07/19 Javascript
easyui combogrid实现本地模糊搜索过滤多列
2017/05/13 Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
2018/09/18 Javascript
小程序实现投票进度条
2019/11/20 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
2020/05/09 Javascript
JS实现拖拽元素时与另一元素碰撞检测
2020/08/27 Javascript
[04:03]DOTA2英雄梦之声_第02期_风暴之灵
2014/06/30 DOTA
为Python程序添加图形化界面的教程
2015/04/29 Python
Python多线程爬虫简单示例
2016/03/04 Python
Python首次安装后运行报错(0xc000007b)的解决方法
2016/10/18 Python
疯狂上涨的Python 开发者应从2.x还是3.x着手?
2017/11/16 Python
python用pandas数据加载、存储与文件格式的实例
2018/12/07 Python
Flask项目中实现短信验证码和邮箱验证码功能
2019/12/05 Python
CentOS7下安装python3.6.8的教程详解
2020/01/03 Python
windows下Pycharm安装opencv的多种方法
2020/03/05 Python
深入浅析CSS3中的Flex布局整理
2020/04/27 HTML / CSS
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
利用Storage Event实现页面间通信的示例代码
2018/07/26 HTML / CSS
印度领先的在线时尚商店:Koovs
2016/08/28 全球购物
青奥会口号
2014/06/12 职场文书
2014年圣诞节寄语
2014/12/08 职场文书
合理化建议书
2015/02/04 职场文书
nginx配置proxy_pass中url末尾带/与不带/的区别详解
2021/03/31 Servers
写一个Python脚本下载哔哩哔哩舞蹈区的所有视频
2021/05/31 Python