完美的js图片轮换效果

商佑运

2023-03-14

本文向大家介绍完美的js图片轮换效果，包括了完美的js图片轮换效果的使用技巧和注意事项，需要的朋友参考一下

本文实例为大家分享了js轮播图焦点的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>轮播图焦点</title>
  <meta content="还是有地点小瑕疵，1左转变4,4右转变1的时候，图片切换有空白，换下动画模式应该可以？">
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    ul{
      list-style: none;
    }
    .scroll{
      width: 300px;
      height: 200px;
      border: 1px solid red;
      margin: 100px auto;
      position: relative;
      overflow: hidden;
    }
    .scroll ul.imgUl{
      width: 400%;
      position: absolute;
      top: 0;
      left: 0;
    }
    .scroll ul.imgUl li{
      float: left;
    }
    .scroll .imgUl img{
      vertical-align: middle; /* 消除图片间3px的间距 */
    }
    .scroll ul.focus{
      position: absolute;
      left: 50%;
      bottom: 10px;
      margin-left: -80px;
    }
    .scroll ul.focus li{
      width: 20px;
      height: 20px;
      padding: 5px;
      text-align: center;
      margin-right: 10px;
      border: 2px solid yellow;
      float: left;
      color: red;
      font-weight: 700;
      background-color: #333;
      color: white;
    }
    .scroll ul.focus li.current{
      background-color: deeppink;
    }
    .scroll .arrow{
      width: 100%;
      position: absolute;
      top: 50%;
      left: 0;
      margin-top: -20px;
      display: none;
    }
    .scroll .arrow div{
      width: 40px;
      height: 40px;
      font: 700 18px/40px "宋体";
      text-align: center;
      background: rgba(0,0,0,.3);
      color: #fff;
      cursor: pointer;
    }
    .scroll .arrow div.left{
      float: left;
    }
    .scroll .arrow div.right{
      float: right;
    }
  </style>
  <script>
    window.onload = function(){
      function $(id){ return document.getElementById(id);}
      var scrollDiv = $('scrollDiv');
      var imgul = $('images');
      var focusUl = $('focuses');
      var imgLis = imgul.children;
      var leader = 0, target = 0;
      var curIndex = 0;//记录当前图片的序号
      var leftArrow = $('leftArrow');
      var rightArrow = $('rightArrow');
      //可自动生成和图片对应的序号
      /*for(var i=0; i< imgLis.length; i++){
        var newLi = document.createElement('li');
        newLi.innerHTML=i+1;
        focusUl.appendChild(newLi);
      }*/
      var focusLis = focusUl.children;
      for(var i=0; i<focusLis.length; i++){
        focusLis[i].index = i;
        focusLis[i].onmouseover = function(){
          curIndex = this.index;
          switchFocus(curIndex);
          target = -this.index * 300;
        }
      }
      scrollDiv.onmouseover = function(){
        $('arrowDiv').style.display="block";
        clearInterval(timer);
      }
      scrollDiv.onmouseout = function(){
        $('arrowDiv').style.display="none";
        timer = setInterval(autoPlay,3000);
      }
      leftArrow.onclick = function(){
        target +=300;
        curIndex = curIndex==0 ? focusLis.length-1 : curIndex-1;
        switchFocus(curIndex);
      }
      rightArrow.onclick = function(){
        target -=300;
        curIndex = (curIndex+1) % focusLis.length;
        switchFocus(curIndex);
      }
      //缓动效果
      setInterval(function(){
        if(target > 0){
          target = -900;
          leader = -1000;
        }else if(target < -900){
          target = 0;
          leader = 100;
        }

        leader = leader + (target - leader) / 10;
        imgul.style.left = leader +"px";

      } ,10);

      switchFocus(0);
      //每隔3s左移图片
      var timer = null;
      timer = setInterval(autoPlay,3000);
      function autoPlay(){
        target -= 300;
        curIndex = (curIndex+1) % focusLis.length;
        switchFocus(curIndex);
      }
      //转换样式
      function switchFocus(curIndex){
        for(var j=0; j<focusLis.length;j++){
            focusLis[j].className="";
          }
        focusLis[curIndex].className="current";
      }

    }
  </script>
</head>
<body>
  <div class="scroll" id="scrollDiv">
    <ul class="imgUl" id="images">
      <li><img src="images/01.jpg" alt=""></li>
      <li><img src="images/02.jpg" alt=""></li>
      <li><img src="images/03.jpg" alt=""></li>
      <li><img src="images/04.jpg" alt=""></li>
    </ul>
    <ul class="focus" id="focuses">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
    <div class="arrow" id="arrowDiv">
      <div class="left" id="leftArrow"><</div>
      <div class="right" id="rightArrow">></div>
    </div>
  </div>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。

完美的js图片轮换效果

相关阅读

相关文章

相关问答

相关工具

相关文档