JS---案例---左右焦點輪播圖(tb)

-Advertisement-

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

案例---左右焦點輪播圖(tb)

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

<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    body,
    ul,
    ol,
    li,
    img {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    #box {
      width: 520px;
      height: 280px;
      padding: 5px;
      position: relative;
      border: 1px solid #ccc;
      margin: 100px auto 0;
    }

    .ad {
      width: 520px;
      height: 280px;
      /*overflow: hidden;*/
      position: relative;
    }

    #box img {
      width: 520px;
    }

    .ad ol {
      position: absolute;
      right: 10px;
      bottom: 10px;
    }

    .ad ol li {
      width: 20px;
      height: 20px;
      line-height: 20px;
      border: 1px solid #ccc;
      text-align: center;
      background: #fff;
      float: left;
      margin-right: 10px;
      cursor: pointer;
      _display: inline;
    }

    .ad ol li.current {
      background: yellow;
    }

    .ad ul li {
      float: left;
    }

    .ad ul {
      position: absolute;
      top: 0;
      width: 2940px;
    }

    .ad ul li.current {
      display: block;
    }

    #focusD {
      display: none;
    }

    #focusD span {
      width: 40px;
      height: 40px;
      position: absolute;
      left: 5px;
      top: 50%;
      margin-top: -20px;
      background: #000;
      cursor: pointer;
      line-height: 40px;
      text-align: center;
      font-weight: bold;
      font-family: '黑體';
      font-size: 30px;
      color: #fff;
      opacity: 0.3;
      border: 1px solid #fff;
    }

    #focusD #right {
      right: 5px;
      left: auto;
    }
  </style>
</head>

<body>
  <div id="box" class="all">
    <div class="ad">
      <ul id="imgs">
        <li><img src="images/01.jpg" /></li>
        <li><img src="images/02.jpg" /></li>
        <li><img src="images/03.jpg" /></li>
        <li><img src="images/04.jpg" /></li>
        <li><img src="images/05.jpg" /></li>
      </ul>
    </div>
    <!--相框-->
    <div id="focusD"><span id="left">&lt;</span><span id="right">&gt;</span>
    </div>
  </div>
  <script src="common.js"></script>
  <script>

    //獲取最外面的div
    var box = my$("box");
    //獲取相框
    var ad = box.children[0];
    //獲取相框的寬度
    var imgWidth = ad.offsetWidth;
    //獲取ul
    var ulObj = ad.children[0];
    //獲取裝span左右焦點的div
    var focusD = my$("focusD");

    //顯示和隱藏左右焦點的div----為box註冊事件
    box.onmouseover = function () {
      focusD.style.display = "block";
    };
    box.onmouseout = function () {
      focusD.style.display = "none";
    };

    //點擊右邊的按鈕
    var index = 0;
    my$("right").onclick = function () {
      if (index < ulObj.children.length - 1) {
        index++;
        animate(ulObj, -index * imgWidth);
      }
    };
    //點擊左邊的按鈕
    my$("left").onclick = function () {
      if (index > 0) {
        index--;
        animate(ulObj, -index * imgWidth);
      }
    };

  </script>

</body>

</html>

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

-Advertisement-

更多相關文章

oracle實例狀態

oracle資料庫實例啟動過程分三個步驟，分別是啟動實例，載入資料庫，打開數據。 1.NOMOUNT模式：這種模式只會創建實例，不會打開任何的數據文件，用戶要以sysdba的身份登錄，才具有關閉和啟動資料庫實例的許可權，根據參數文件啟動實例 2.MOUNT模式：啟動實例，裝載資料庫但是保持資料庫關閉的 ...
Redis中幾個簡單的概念：緩存穿透/擊穿/雪崩，別再被嚇唬了

Redis中幾個“看似”高大上的概念，經常有人提到，某些好事者喜歡死扣概念，實戰沒多少，嘴巴裡冒出來的全是高大上的名詞，個人一向鄙視概念黨，呵呵，尼瑪！其實這幾個概念：緩存穿透/緩存擊穿/緩存雪崩，有一個共通的相似之處，就是高併發下，某些原因導致緩存層失去了保護，導致後端的持久化層（資料庫）承擔較 ...
SQL語句中將形式（12/10/19 4:13:21 PM）轉化為（2019-12-10）

convert(char(10),convert(datetime, H.TOEX_FIN_REJECT_TIMR)+1,20), ...
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; ...