完美的js圖片輪換效果

更新時間：2017年02月05日 11:16:11 作者：秋天1014童話

這篇文章主要為大家詳細介紹了完美的js圖片輪換效果，包括左右移動和緩動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js輪播圖焦點的具體代碼，供大家參考，具體內(nèi)容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>輪播圖焦點</title>
  <meta content="還是有地點小瑕疵，1左轉(zhuǎn)變4,4右轉(zhuǎn)變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);
      }
      //轉(zhuǎn)換樣式
      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>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

原生JS實現(xiàn)拖拽位置預覽
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)拖拽位置預覽，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-10-10
JavaScript面向?qū)ο笾w會[總結(jié)]
看過很多JavaScript書，對JavaScript的面向?qū)ο笾v的都比較深入，但是并沒有做到深入淺出，總結(jié)了我做的一些JavaScript程序的經(jīng)驗，以簡潔明了的文字使大家明白JavaScript面向?qū)ο蟮膶崿F(xiàn)。
2008-11-11
bootstrap 通過加減按鈕實現(xiàn)輸入框組功能
這篇文章主要介紹了bootstrap 輸入框組通過加減按鈕來增加刪除內(nèi)嵌輸入框組,當我點擊 + 按鈕時，會添加一行輸入框組；當點擊 - 按鈕時，會刪除這一行輸入框組。具體實現(xiàn)代碼大家參考下本文
2017-11-11
如何編寫高質(zhì)量JS代碼(續(xù))
本文是如何編寫高質(zhì)量JS代碼系列文章的第二篇，前篇文章反響還不錯，應小伙伴們的要求，今天繼續(xù)此系列的文章，有需要的小伙伴參考下。
2015-02-02
如何實現(xiàn)textarea里的不同文本顯示不同顏色
如何實現(xiàn)textarea里的不同文本顯示不同顏色呢？控制textarea的style設置Textarea以及把文本放到標記里都不會起作用，下面有個不錯的解決方法，感興趣的朋友可以了解下
2014-01-01
javascript在事件監(jiān)聽方面的兼容性小結(jié)
javascript 在事件監(jiān)聽方面的兼容性總結(jié)，注意是由于多個瀏覽器的不一致，導致大家在js書寫時需要考慮多個瀏覽器的兼容性。
2010-04-04
js如何判斷不同系統(tǒng)的瀏覽器類型
正如標題所言使用js如何判斷不同系統(tǒng)的瀏覽器類型，下面有個不錯的示例，感興趣的朋友可以參考下
2013-10-10
JavaScript常用數(shù)組操作方法,包含ES6方法
這篇文章主要介紹了JavaScript常用數(shù)組操作方法，包含ES6方法,本文分步驟給大家介紹的非常詳細，具有一定的參考借鑒借鑒價值，需要的朋友可以參考下
2018-09-09
JavaScript中六種面試常考繼承方式總結(jié)
js的幾種繼承方式在我們面試的時候經(jīng)常會被問到，所以深入理解js幾種繼承方式以及它們的優(yōu)缺點是非常有必要的。本文為大家整理了JavaScript中面試?？嫉牧N繼承方式，需要的可以參考一下
2023-02-02
禁用頁面部分JavaScript不是全部而是部分
全部限制那是很簡單的事，直接把<script>腳本塊過濾掉就行了，但是部分限制又是如何做到的呢，下面我們一起來看看
2014-09-09