JS---案例：簡單輪播圖_ZenDei技術網路在線

JS---案例：簡單輪播圖

-Advertisement-

案例：簡單輪播圖 div叫盒子，裡面包了2個小盒子，一個是inner，一個是square inner的div是放ul，裡面有li，a，和圖片 square的div裡面放span，是輪播圖的小點 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

案例：簡單輪播圖

div叫盒子，裡面包了2個小盒子，一個是inner，一個是square

inner的div是放ul，裡面有li，a，和圖片

square的div裡面放span，是輪播圖的小點

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0
    }

    ul {
      list-style: none
    }

    img {
      vertical-align: top
    }

    .box {
      width: 730px;
      height: 454px;
      margin: 100px auto;
      padding: 5px;
      border: 1px solid #ccc;
    }

    .inner {
      width: 730px;
      height: 454px;
      background-color: pink;
      overflow: hidden;
      position: relative;
    }

    .inner ul {
      width: 1000%;
      position: absolute;
      top: 0;
      left: 0;
    }

    .inner li {
      float: left;
    }

    .square {
      position: absolute;
      right: 10px;
      bottom: 10px;
    }

    .square span {
      display: inline-block;
      width: 16px;
      height: 16px;
      background-color: #fff;
      text-align: center;
      line-height: 16px;
      cursor: pointer;
    }

    .square span.current {
      background-color: orangered;
      color: #fff;
    }
  </style>
</head>

<body>
  <div class="box" id="box">
    <div class="inner">
      <!--相框-->
      <ul>
        <li><a href="#"><img src="images/1.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/2.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/3.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/4.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/5.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/6.jpg" alt="" /></a></li>
      </ul>
      <div class="square">
        <span class="current">1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
      </div>
    </div>
  </div>
  <script src="common.js"></script>

  <script>

    //獲取最外的div
    var box = my$("box");
    //獲取相框
    var inner = box.children[0];
    //獲取相框的寬度
    var imgWidth = inner.offsetWidth;
    //獲取ul
    var ulObj = inner.children[0];
    //獲取所有span標簽
    var spanObjs = inner.children[1].children;
    //迴圈遍歷所有的span標簽，註冊滑鼠進入的事件
    for (var i = 0; i < spanObjs.length; i++) {
      //迴圈的時候把索引值保存在每個span的自定義屬性中
      spanObjs[i].setAttribute("index", i);
      //註冊滑鼠進入事件
      spanObjs[i].onmouseover = function () {
        //先幹掉所有span的背景顏色
        for (var j = 0; j < spanObjs.length; j++) {
          //移除每個span的類樣式
          spanObjs[j].removeAttribute("class");
        }
        //設置當前額span背景顏色
        this.className = "current";
        //移動ul,每個圖片的寬*滑鼠放在此的按鈕索引值
        //獲取當前滑鼠進入的索引
        var index = this.getAttribute("index");
        animate(ulObj, -index * imgWidth);
      };
    }


  </script>
</body>

</html>

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

Android沉浸式狀態欄實現

在安卓開發當中，頂部的狀態欄很多時候是和我們自己所設定的安卓背景顏色不相同的，看起來就十分彆扭，就如同下圖所示，狀態欄是深綠色，我們的背景卻是一個十分好看的漸變顏色：在使用沉浸式狀態欄之後的界面如下：如何將頂部的狀態欄設置成透明的呢，我們可以在主活動的 onCreate（）方法當中輸入以下代碼 ...
windows + flutter +android+ vscode 安裝配置運行流程（詳細版本）

flutter 是由谷歌發佈的一個全新的響應式、跨平臺、高性能的移動開發框架，可以快速在iOS和Android上構建高質量的原生用戶界面。框架特點快速開發：Flutter的熱重載可以快速地進行測試、構建UI、添加功能並更快地修複錯誤。富有表現力，漂亮的用戶界面：自帶的Material Desig ...
[Android逆向]APK反編譯與回編譯

一、先查殼，再反編譯看驗證首先打開.apk文件==>反編譯apk(dex/配置文件/資源文件（apk反編譯失敗）>修改關鍵文件實現自己的目的>重新打包簽名（無法重新打包）==>apk安裝後無法運行。反編譯工具：apktool dex=>.smalidex2jar .dex=>.jar=>.clas ...
Android實現圖片的三角形邊框

在每一個圖片的某一側都可以展示出一個三角形的邊框視圖，就是咱們的三角形標簽視圖。這個視圖在電商類APP當中比較常用，使用過ebay的同學應該都還記得有些商品的左上角或者右上角都會顯示一個三角形的邊框，用於給人一個直觀的商品正在促銷，或者剛剛上線的直觀感受。我們可以看看實現後的效果如下：在真實的AP ...
JS---案例：無縫的輪播圖

案例：無縫的輪播圖 w <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } ul { list-style: none; ...
JS---案例---左右焦點輪播圖(tb)

案例左右焦點輪播圖(tb) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> body, ul, ol, li, img { margin: 0; padding: 0; l ...
後臺管理tab欄滑動解決方案

後臺管理系統中比較常見的佈局是左邊菜單欄，右邊tab切換欄，但是一般的tab組件不包含tab頁過多的切換問題的，所以需要個性化實現，本文的實現方案是滑動滑鼠滾輪綁定tab達到切換的效果，先上一個動態圖看下效果 tab滑動欄佈局代碼如下 <div class="tabmain" id="tabmain ...
JS操作符、控制流程、迴圈、字元串/數組方法

操作符算術運算符：+ 、、、 / 、 %、++、賦值運算符：= 、+=、 =、 =、/=、%= 比較運算符：、 =、流程式控制制以下在進行判斷的時候為假 0 null undefined NaN "" 空字元串 false if else switch 迴圈 for迴圈 while迴圈 d ...