重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

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

小编给大家分享一下如何使用JavaScript实现带有子菜单和控件的slider轮播图效果,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

创新互联公司是一家专业提供新北企业网站建设,专注与网站建设、成都网站设计H5场景定制、小程序制作等业务。10年已为新北众多企业、政府机构等服务。创新互联专业网站建设公司优惠进行中。

具体实现代码如下所示:

实现效果:

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

实现原理:

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

实现代码:




  轮播图
  
  
    *{
      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;
    }
  



  
    
      
  •       
  •       
  •       
  •       
  •               
          
                    <       >     
      
      // 赋值第一张图片放到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 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 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)   }

    看完了这篇文章,相信你对“如何使用JavaScript实现带有子菜单和控件的slider轮播图效果”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


    网页名称:如何使用JavaScript实现带有子菜单和控件的slider轮播图效果
    当前链接:http://cqcxhl.cn/article/ghpici.html