//步骤 style="font-size: 15px; font-family: Microsoft YaHei"> // 获取事件源以及相关元素 style="font-size: 15px; font-family: Microsoft YaHei"" />

【前端】javascript实现带有子菜单和控件的轮播图

实现效果:

图片 1

实现原理:

style="font-size: 15px; font-family: "Microsoft YaHei"">// 步骤
style="font-size: 15px; font-family: "Microsoft YaHei""> //

  1. 获取事件源以及相关元素
    style="font-size: 15px; font-family: "Microsoft YaHei""> //
  2. 复制第一张图片所在的li,添加到ul的最后面
    style="font-size: 15px; font-family: "Microsoft YaHei""> //
  3. 给ol添加li,ul中的个数-1个,并点亮第一个按钮
    style="font-size: 15px; font-family: "Microsoft YaHei""> //
  4. 鼠标放到ol的li上切换图片
    style="font-size: 15px; font-family: "Microsoft YaHei""> //
  5. 添加定时器
    style="font-size: 15px; font-family: "Microsoft YaHei""> //
  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">
   <
   >
  </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>

  

本文由金沙官网线上发布于Web前端,转载请注明出处:【前端】javascript实现带有子菜单和控件的轮播图

您可能还会对下面的文章感兴趣: