欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS實現(xiàn)圖片輪播效果實例詳解【可自動和手動】

 更新時間：2019年04月04日 11:12:32   作者：呵呵到天亮  
這篇文章主要介紹了JS實現(xiàn)圖片輪播效果,結(jié)合完整實例形式分析了javascript可自動和手動輪播圖的原理、布局與輪播功能相關(guān)實現(xiàn)技巧,需要的朋友可以參考下

本文實例講述了JS實現(xiàn)圖片輪播效果。分享給大家供大家參考，具體如下：

本次輪播效果圖如下：

具有以下功能：1.自動播放（鼠標(biāo)進(jìn)入顯示區(qū)域時停止播放） 2.左右焦點切換  3.底下小按鈕切換

以下為實現(xiàn)代碼：

首先是html代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>最簡單的輪播效果</title>
</head>
<body>
<div class="box" id="box">
  <div class="inner">
    <!--輪播圖-->
    <ul>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/1.jpg" alt=""></a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/2.jpg" alt=""></a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/3.jpg" alt=""></a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/4.jpg" alt=""></a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/5.jpg" alt=""></a></li>
    </ul>
    <ol class="bar">
      小按鈕數(shù)量無法確定，由js動態(tài)生成
    </ol>
    <!--左右焦點-->
    <div id="arr">
       <span id="left"> <</span>
       <span id="right">></span>
    </div>

  </div>
</div>

</body>
</html>

接下來是css樣式：

<style>
    * {
      margin: 0;
      padding: 0
    }
    .box {
      width: 500px;
      height: 300px;
      border: 1px solid #ccc;
      margin: 100px auto;
      padding: 5px;

    }
    .inner{
      width: 500px;
      height: 300px;
      position: relative;
      overflow: hidden;
    }
    .inner img{
      width: 500px;
      height: 300px;
      vertical-align: top
    }
    ul {
      width: 1000%;
      position: absolute;
      list-style: none;
      left:0;
      top: 0;
    }
    .inner li{
      float: left;

    }

    ol {
      position: absolute;
      height: 20px;
      right: 20px;
      bottom: 20px;
      text-align: center;
      padding: 5px;
    }
    ol li{
      display: inline-block;
      width: 20px;
      height: 20px;
      line-height: 20px;
      background-color: #fff;
      margin: 5px;
      cursor: pointer;

    }
    ol .current{
      background-color: red;
    }
    #arr{
      display: none;
    }
    #arr span{
      width: 40px;
      height: 40px;
      position: absolute;
      left: 5px;
      top: 50%;
      margin-top: -20px;
      background: #fff;
      cursor: pointer;
      line-height: 40px;
      text-align: center;
      font-weight: bold;
      font-family: '黑體';
      font-size: 30px;
      color: #000;
      opacity: 0.5;
      border: 1px solid #fff;
    }
    #arr #right {
      right: 5px;
      left: auto;
    }

第三部分是最主要的js代碼：

<script>
  /**
   *
   * @param id 傳入元素的id
   * @returns {HTMLElement | null} 返回標(biāo)簽對象，方便獲取元素
   */
  function my$(id) {
    return document.getElementById(id);
  }

  //獲取各元素，方便操作
  var box=my$("box");
  var inner=box.children[0];
  var ulObj=inner.children[0];
  var list=ulObj.children;
  var olObj=inner.children[1];
  var arr=my$("arr");
  var imgWidth=inner.offsetWidth;
  var right=my$("right");
  var pic=0;
  //根據(jù)li個數(shù)，創(chuàng)建小按鈕
  for(var i=0;i<list.length;i++){
    var liObj=document.createElement("li");

    olObj.appendChild(liObj);
    liObj.innerText=(i+1);
    liObj.setAttribute("index",i);

    //為按鈕注冊mouseover事件
    liObj.onmouseover=function () {
      //先清除所有按鈕的樣式

      for (var j=0;j<olObj.children.length;j++){
        olObj.children[j].removeAttribute("class");
      }
      this.className="current";
      pic=this.getAttribute("index");
      animate(ulObj,-pic*imgWidth);
    }

  }


  //設(shè)置ol中第一個li有背景顏色
  olObj.children[0].className = "current";
  //克隆一個ul中第一個li,加入到ul中的最后=====克隆
  ulObj.appendChild(ulObj.children[0].cloneNode(true));

  var timeId=setInterval(onmouseclickHandle,1000);
  //左右焦點實現(xiàn)點擊切換圖片功能
  box.onmouseover=function () {
    arr.style.display="block";
    clearInterval(timeId);
  };
  box.onmouseout=function () {
    arr.style.display="none";
    timeId=setInterval(onmouseclickHandle,1000);
  };

  right.onclick=onmouseclickHandle;
  function onmouseclickHandle() {
    //如果pic的值是5,恰巧是ul中l(wèi)i的個數(shù)-1的值,此時頁面顯示第六個圖片,而用戶會認(rèn)為這是第一個圖,
    //所以,如果用戶再次點擊按鈕,用戶應(yīng)該看到第二個圖片
    if (pic == list.length - 1) {
      //如何從第6個圖,跳轉(zhuǎn)到第一個圖
      pic = 0;//先設(shè)置pic=0
      ulObj.style.left = 0 + "px";//把ul的位置還原成開始的默認(rèn)位置
    }
    pic++;//立刻設(shè)置pic加1,那么此時用戶就會看到第二個圖片了
    animate(ulObj, -pic * imgWidth);//pic從0的值加1之后,pic的值是1,然后ul移動出去一個圖片
    //如果pic==5說明,此時顯示第6個圖(內(nèi)容是第一張圖片),第一個小按鈕有顏色,
    if (pic == list.length - 1) {
      //第五個按鈕顏色干掉
      olObj.children[olObj.children.length - 1].className = "";
      //第一個按鈕顏色設(shè)置上
      olObj.children[0].className = "current";
    } else {
      //干掉所有的小按鈕的背景顏色
      for (var i = 0; i < olObj.children.length; i++) {
        olObj.children[i].removeAttribute("class");
      }
      olObj.children[pic].className = "current";
    }
  }
  left.onclick=function () {
    if (pic==0){
      pic=list.length-1;
      ulObj.style.left=-pic*imgWidth+"px";
    }
    pic--;
    animate(ulObj,-pic*imgWidth);
    for (var i = 0; i < olObj.children.length; i++) {
      olObj.children[i].removeAttribute("class");
    }
    //當(dāng)前的pic索引對應(yīng)的按鈕設(shè)置顏色
    olObj.children[pic].className = "current";
  };

  //設(shè)置任意的一個元素,移動到指定的目標(biāo)位置
  function animate(element, target) {
    clearInterval(element.timeId);
    //定時器的id值存儲到對象的一個屬性中
    element.timeId = setInterval(function () {
      //獲取元素的當(dāng)前的位置,數(shù)字類型
      var current = element.offsetLeft;
      //每次移動的距離
      var step = 10;
      step = current < target ? step : -step;
      //當(dāng)前移動到位置
      current += step;
      if (Math.abs(current - target) > Math.abs(step)) {
        element.style.left = current + "px";
      } else {
        //清理定時器
        clearInterval(element.timeId);
        //直接到達(dá)目標(biāo)
        element.style.left = target + "px";
      }
    }, 10);
  }
</script>

所有用圖片如下：

1.jpg


2.jpg


3.jpg


4.jpg


5.jpg


下面是完整的代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>最簡單的輪播效果</title>
  <style>
    * {
      margin: 0;
      padding: 0
    }
    .box {
      width: 500px;
      height: 300px;
      border: 1px solid #ccc;
      margin: 100px auto;
      padding: 5px;

    }
    .inner{
      width: 500px;
      height: 300px;
      position: relative;
      overflow: hidden;
    }
    .inner img{
      width: 500px;
      height: 300px;
      vertical-align: top
    }
    ul {
      width: 1000%;
      position: absolute;
      list-style: none;
      left:0;
      top: 0;
    }
    .inner li{
      float: left;

    }

    ol {
      position: absolute;
      height: 20px;
      right: 20px;
      bottom: 20px;
      text-align: center;
      padding: 5px;
    }
    ol li{
      display: inline-block;
      width: 20px;
      height: 20px;
      line-height: 20px;
      background-color: #fff;
      margin: 5px;
      cursor: pointer;

    }
    ol .current{
      background-color: red;
    }
    #arr{
      display: none;
    }
    #arr span{
      width: 40px;
      height: 40px;
      position: absolute;
      left: 5px;
      top: 50%;
      margin-top: -20px;
      background: #fff;
      cursor: pointer;
      line-height: 40px;
      text-align: center;
      font-weight: bold;
      font-family: '黑體';
      font-size: 30px;
      color: #000;
      opacity: 0.5;
      border: 1px solid #fff;
    }
    #arr #right {
      right: 5px;
      left: auto;
    }
  </style>
</head>
<body>
<div class="box" id="box">
  <div class="inner">
    <!--輪播圖-->
    <ul>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/1.jpg" alt=""></a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/2.jpg" alt=""></a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/3.jpg" alt=""></a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/4.jpg" alt=""></a></li>
      <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="images/5.jpg" alt=""></a></li>

    </ul>

    <ol class="bar">

    </ol>
    <!--左右焦點-->
    <div id="arr">
          <span id="left">
            <
          </span>
      <span id="right">
            >
          </span>
    </div>

  </div>
</div>
<script>
  /**
   *
   * @param id 傳入元素的id
   * @returns {HTMLElement | null} 返回標(biāo)簽對象，方便獲取元素
   */
  function my$(id) {
    return document.getElementById(id);
  }

  //獲取各元素，方便操作
  var box=my$("box");
  var inner=box.children[0];
  var ulObj=inner.children[0];
  var list=ulObj.children;
  var olObj=inner.children[1];
  var arr=my$("arr");
  var imgWidth=inner.offsetWidth;
  var right=my$("right");
  var pic=0;
  //根據(jù)li個數(shù)，創(chuàng)建小按鈕
  for(var i=0;i<list.length;i++){
    var liObj=document.createElement("li");

    olObj.appendChild(liObj);
    liObj.innerText=(i+1);
    liObj.setAttribute("index",i);

    //為按鈕注冊mouseover事件
    liObj.onmouseover=function () {
      //先清除所有按鈕的樣式

      for (var j=0;j<olObj.children.length;j++){
        olObj.children[j].removeAttribute("class");
      }
      this.className="current";
      pic=this.getAttribute("index");
      animate(ulObj,-pic*imgWidth);
    }

  }


  //設(shè)置ol中第一個li有背景顏色
  olObj.children[0].className = "current";
  //克隆一個ul中第一個li,加入到ul中的最后=====克隆
  ulObj.appendChild(ulObj.children[0].cloneNode(true));

  var timeId=setInterval(onmouseclickHandle,1000);
  //左右焦點實現(xiàn)點擊切換圖片功能
  box.onmouseover=function () {
    arr.style.display="block";
    clearInterval(timeId);
  };
  box.onmouseout=function () {
    arr.style.display="none";
    timeId=setInterval(onmouseclickHandle,1000);
  };

  right.onclick=onmouseclickHandle;
  function onmouseclickHandle() {
    //如果pic的值是5,恰巧是ul中l(wèi)i的個數(shù)-1的值,此時頁面顯示第六個圖片,而用戶會認(rèn)為這是第一個圖,
    //所以,如果用戶再次點擊按鈕,用戶應(yīng)該看到第二個圖片
    if (pic == list.length - 1) {
      //如何從第6個圖,跳轉(zhuǎn)到第一個圖
      pic = 0;//先設(shè)置pic=0
      ulObj.style.left = 0 + "px";//把ul的位置還原成開始的默認(rèn)位置
    }
    pic++;//立刻設(shè)置pic加1,那么此時用戶就會看到第二個圖片了
    animate(ulObj, -pic * imgWidth);//pic從0的值加1之后,pic的值是1,然后ul移動出去一個圖片
    //如果pic==5說明,此時顯示第6個圖(內(nèi)容是第一張圖片),第一個小按鈕有顏色,
    if (pic == list.length - 1) {
      //第五個按鈕顏色干掉
      olObj.children[olObj.children.length - 1].className = "";
      //第一個按鈕顏色設(shè)置上
      olObj.children[0].className = "current";
    } else {
      //干掉所有的小按鈕的背景顏色
      for (var i = 0; i < olObj.children.length; i++) {
        olObj.children[i].removeAttribute("class");
      }
      olObj.children[pic].className = "current";
    }
  }
  left.onclick=function () {
    if (pic==0){
      pic=list.length-1;
      ulObj.style.left=-pic*imgWidth+"px";
    }
    pic--;
    animate(ulObj,-pic*imgWidth);
    for (var i = 0; i < olObj.children.length; i++) {
      olObj.children[i].removeAttribute("class");
    }
    //當(dāng)前的pic索引對應(yīng)的按鈕設(shè)置顏色
    olObj.children[pic].className = "current";
  };

  //設(shè)置任意的一個元素,移動到指定的目標(biāo)位置
  function animate(element, target) {
    clearInterval(element.timeId);
    //定時器的id值存儲到對象的一個屬性中
    element.timeId = setInterval(function () {
      //獲取元素的當(dāng)前的位置,數(shù)字類型
      var current = element.offsetLeft;
      //每次移動的距離
      var step = 10;
      step = current < target ? step : -step;
      //當(dāng)前移動到位置
      current += step;
      if (Math.abs(current - target) > Math.abs(step)) {
        element.style.left = current + "px";
      } else {
        //清理定時器
        clearInterval(element.timeId);
        //直接到達(dá)目標(biāo)
        element.style.left = target + "px";
      }
    }, 10);
  }
</script>
</body>
</html>

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript圖片操作技巧大全》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript運動效果與技巧匯總》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

相關(guān)文章

  • js如何讀取csv內(nèi)容拼接成json

    js如何讀取csv內(nèi)容拼接成json

    這篇文章主要介紹了js如何讀取csv內(nèi)容拼接成json，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-09-09
  • JS實現(xiàn)的顏色實時漸變效果完整實例

    JS實現(xiàn)的顏色實時漸變效果完整實例

    這篇文章主要介紹了JS實現(xiàn)的顏色實時漸變效果,結(jié)合實例形式分析了JavaScript結(jié)合時間函數(shù)定時觸發(fā)動態(tài)改變頁面元素屬性的相關(guān)技巧,需要的朋友可以參考下
    2016-03-03
  • JavaScript中alert的使用方法超詳細(xì)介紹

    JavaScript中alert的使用方法超詳細(xì)介紹

    JS中的alert作用是在瀏覽器中彈出一個警告框,而使用alert有三種方式,不同的方式所呈現(xiàn)的效果也不相同,這篇文章主要給大家介紹了關(guān)于JavaScript中alert使用方法的相關(guān)資料,需要的朋友可以參考下
    2024-01-01
  • 詳解ant-design-pro使用qiankun微服務(wù)

    詳解ant-design-pro使用qiankun微服務(wù)

    這篇文章主要介紹了ant-design-pro使用qiankun微服務(wù)詳解,其實微服務(wù)需要有主應(yīng)用和子應(yīng)用，?一個子應(yīng)用可以配置多個相關(guān)聯(lián)的主應(yīng)用,配置方法都是一樣的，對ant-design-pro微服務(wù)配置相關(guān)知識，感興趣的朋友一起看看吧
    2022-03-03
  • 常見的JavaScript內(nèi)存錯誤及解決方法

    常見的JavaScript內(nèi)存錯誤及解決方法

    這篇文章主要介紹了常見的JavaScript內(nèi)存錯誤,JavaScript?不提供任何內(nèi)存管理操作。相反，內(nèi)存由?JavaScript?VM?通過內(nèi)存回收過程管理，該過程稱為垃圾收集。下面我們就來看看下面文章對JavaScript內(nèi)存錯誤的各種舉例說明吧
    2021-12-12
  • BootStrap表單寬度設(shè)置方法

    BootStrap表單寬度設(shè)置方法

    這篇文章主要介紹了BootStrap表單寬度設(shè)置方法,僅僅是小編日常遇到問題記錄，寫的不好還請見諒，需要的朋友可以參考下
    2017-03-03
  • 原生JS面向?qū)ο髮崿F(xiàn)打磚塊小游戲

    原生JS面向?qū)ο髮崿F(xiàn)打磚塊小游戲

    這篇文章主要為大家詳細(xì)介紹了原生JS面向?qū)ο髮崿F(xiàn)打磚塊小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-09-09
  • Js實現(xiàn)網(wǎng)頁鍵盤控制翻頁的方法

    Js實現(xiàn)網(wǎng)頁鍵盤控制翻頁的方法

    這篇文章主要介紹了Js實現(xiàn)網(wǎng)頁鍵盤控制翻頁的方法,較為詳細(xì)的分析了Js實現(xiàn)網(wǎng)頁鍵盤控制翻頁的原理與具體實現(xiàn)方法,非常具有實用價值,需要的朋友可以參考下
    2014-10-10
  • javascript數(shù)組includes、reduce的基本使用

    javascript數(shù)組includes、reduce的基本使用

    這篇文章主要給大家介紹了關(guān)于javascript數(shù)組includes、reduce的基本使用方法,includes方法是用于檢查特定元素是包含在數(shù)組還是字符串中的方法,而reduce用法則有很多,需要的朋友可以參考下
    2021-07-07
  • 使用bootstrap3開發(fā)響應(yīng)式網(wǎng)站

    使用bootstrap3開發(fā)響應(yīng)式網(wǎng)站

    這篇文章主要為大家詳細(xì)介紹了使用bootstrap3開發(fā)響應(yīng)式網(wǎng)站的具體代碼，感興趣的小伙伴們可以參考一下
    2016-05-05

最新評論