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 相关文章推荐
你的编程语言可以这样做吗?
Sep 07 Javascript
禁止JQuery中的load方法装载IE缓存中文件的方法
Sep 11 Javascript
让人印象深刻的10个jQuery手风琴效果应用
May 08 Javascript
jquery 滚动条事件简单实例
Jul 12 Javascript
Node.js中HTTP模块与事件模块详解
Nov 14 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 Javascript
使用AngularJS实现可伸缩的页面切换的方法
Jun 19 Javascript
JSONP和批量操作功能的实现方法
Aug 21 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
Sep 05 Javascript
微信小程序实现手势滑动效果
Aug 26 Javascript
vue video和vue-video-player实现视频铺满教程
Oct 30 Javascript
element-ui封装一个Table模板组件的示例
Jan 04 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
天使彦史上最神还原,性别曝光的那一刻,百万网友恋爱了
2020/03/02 国漫
php不用内置函数对数组排序的两个算法代码
2010/02/08 PHP
114啦源码(114la)不能生成地方房产和地方报刊问题4级页面0字节的解决方法
2012/01/12 PHP
php中一个有意思的日期逻辑处理
2012/03/25 PHP
php  单例模式详细介绍及实现源码
2016/11/05 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
Nigma vs Liquid BO3 第二场2.13
2021/03/10 DOTA
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
2012/02/03 Javascript
js nextSibling属性和previousSibling属性概述及使用注意
2013/02/16 Javascript
Extjs NumberField后面加单位实现思路
2013/07/30 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
2015/03/21 Javascript
javascript清空table表格的方法
2015/05/14 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
2016/01/30 Javascript
Ionic快速安装教程
2016/06/03 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
2016/06/03 Javascript
JS实现图片垂直居中显示小结
2016/12/13 Javascript
Bootstrap CSS组件之按钮组(btn-group)
2016/12/17 Javascript
jQuery实现限制文本框的输入长度
2017/01/11 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
2017/07/13 Javascript
vuejs使用FormData实现ajax上传图片文件
2017/08/08 Javascript
如何理解Vue的v-model指令的使用方法
2018/07/19 Javascript
vue webpack开发访问后台接口全局配置的方法
2018/09/18 Javascript
Vue CLI3中使用compass normalize的方法
2019/05/30 Javascript
javascript数组元素删除方法delete和splice解析
2019/12/09 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
2020/06/08 Javascript
JavaScript实现滑块验证解锁
2021/01/07 Javascript
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
Python closure闭包解释及其注意点详解
2019/08/28 Python
Python 调用 ES、Solr、Phoenix的示例代码
2020/11/23 Python
HTML5+CSS3实现机器猫
2016/10/17 HTML / CSS
JavaScript+Canvas实现自定义画板的示例代码
2019/05/13 HTML / CSS
Timberland法国官网:购买靴子、鞋子、衣服、夹克和配饰
2019/11/30 全球购物
诚信考试倡议书
2014/04/15 职场文书
程序员求职信
2014/04/16 职场文书
财产分割协议书范本
2014/11/03 职场文书
关于调整工作时间的通知
2015/04/24 职场文书