移動端輪播圖

来源:https://www.cnblogs.com/tuziling/archive/2018/12/07/10086024.html
-Advertisement-
Play Games

這是結構 這是CSS dase js ...


這是結構

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/jd_phnoe.css">
    <link rel="stylesheet" href="./css/base.css">
    <title>Document</title>
  
    <script src="./js/jd_phnoe.js"></script>
</head>
<body>
        <div class="jd_layout">
        <div class="jd_banner">
                <ul class="jd_bannerimg clearfix">
                  <li>
                    <a href="javascript:;"> <img src="./uploads/l1.jpg" alt="" /> </a>
                  </li>
                  <li>
                    <a href="javascript:;"> <img src="./uploads/l2.jpg" alt="" /> </a>
                  </li>
                  <li>
                    <a href="javascript:;"> <img src="./uploads/l3.jpg" alt="" /> </a>
                  </li>
                  <li>
                    <a href="javascript:;"> <img src="./uploads/l4.jpg" alt="" /> </a>
                  </li>
                  <li>
                    <a href="javascript:;"> <img src="./uploads/l5.jpg" alt="" /> </a>
                  </li>
                  <li>
                    <a href="javascript:;"> <img src="./uploads/l6.jpg" alt="" /> </a>
                  </li>
                  <li>
                    <a href="javascript:;"> <img src="./uploads/l7.jpg" alt="" /> </a>
                  </li>
                  <li>
                    <a href="javascript:;"> <img src="./uploads/l8.jpg" alt="" /> </a>
                  </li>
                </ul>
                <!-- 點標記 -->
                <ul class="jd_bannerIndicator clearfix">
                  <li></li>
                  <li class="active"></li>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                </ul>
              </div>
        </div>
</body>
</html>

這是CSS

/* 搜索部分 */
.jd_layout{
    width: 100%;
    max-width: 640px;
    min-width: 320px;
    height: auto;
    margin: 0px auto;
    background-color: #ccc;
}

/* 輪播圖部分 */
.jd_banner{
    width: 100%;
    overflow: hidden;
    position: relative;
}
.jd_bannerimg{
    width: 1000%;
    position: relative;
}
.jd_bannerimg > li{
   width: 10%;
   float: left; 
}
.jd_bannerimg>li img{
    width: 100%;
    /*1.設置為塊元素
    2.可以將文本的字體大小設置為0
    3.vertical-align:bottom*/
    display: block;
}
/* 點標記 */
.jd_bannerIndicator{
    position: absolute;
    left: 50%;
    bottom: 5px;
    transform: translateX(-50%);
}
.jd_bannerIndicator li{
    width: 6px;
    height: 6px;
    float: left;
    border: 1px solid #fff;
    border-radius: 50%;
    /* opacity: 0.7; */
    margin: 0 3px;
    /* cursor: pointer; */
}
.jd_bannerIndicator li:first-of-type{
    margin-left: 0px;
}
.jd_bannerIndicator >li.active{
    background-color: #fff;
}

dase

/*公共樣式*/

/*1.樣式重置*/
html,body,ul,li,img,a,p,div,form,input,h3{
    padding: 0;
    margin: 0;
    /*設置盒模型*/
    box-sizing: border-box;
    /*去除移動端特有的點擊高亮效果*/
    -webkit-tap-highlight-color: transparent;
}
body{
    font-family: "微軟雅黑",sans-serif;
    font-size: 13px;
}
a,
a:hover{
    color: #666;
    text-decoration: none;
}
ul{
    list-style: none;
}
input{
    /*1.清除文本框獲取焦點時預設的邊框陰影*/
    outline: none;
    /*2.去除邊框*/
    border: none;
    /*3.添加邊框*/
    border: 1px solid #ccc;
}

/*2.添加新的樣式*/
.f_left{
    float: left;
}
.f_right{
    float: right;
}
.m_left10{
    margin-left: 10px;
}
.m_right10{
    margin-right: 10px;
}
.m_top10{
    margin-top: 10px;
}
.clearfix::before,
.clearfix::after{
    content: "";
    display: block;
    height: 0;
    line-height: 0px;
    clear: both;
    visibility: hidden;
}

js

window.onload = function () {
    banner();
}

//輪播圖
function banner(){
     /*1.設置修改輪播圖的頁面結構
    * a.在開始位置添加原始的最後一張圖片
    * b.在結束位置添加原始的第一張圖片*/
    /*1.1.獲取輪播圖結構*/
    var banner=document.querySelector(".jd_banner");
    /*1.2.獲取圖片容器*/
    var imgBox=banner.querySelector("ul:first-of-type");
    //1.3 獲取第一張圖片
    var first=imgBox.querySelector("li:first-of-type");
    //1.4獲取最後一張圖
    var last=imgBox.querySelector("li:last-of-type");
   // console.log(first);
   // console.log(last);
    //克隆添加圖片
     /*1.5.在首尾插入兩張圖片   cloneNode:複製一個dom元素*/
    imgBox.appendChild(first.cloneNode(true));
    /*1.6insertBefore(需要插入的dom元素,位置)*/
    imgBox.insertBefore(last.cloneNode(true),imgBox.firstChild);
    //獲取對應的樣式
    //2.1獲取li的位置
    var lis=imgBox.querySelectorAll("li");
    /*2.2 獲取li元素的數量*/
    var count=lis.length;
    /*2.3.獲取banner的寬度*/
    var bannerWidth=banner.offsetWidth;
    /*2.4 設置圖片盒子的寬度*/
    imgBox.style.width=count*bannerWidth+"px";
    /*2.5 設置每一個li(圖片)元素的寬度*/
    for(var i=0; i < lis.length;i++){
        lis[i].style.width=bannerWidth+"px";
    }
    /*定義圖片索引:圖片已經有一個寬度的預設偏移*/
    var index=1;
    /*3.設置預設的偏移*/
    imgBox.style.left=-bannerWidth+"px";
     /*4.當屏幕變化的時候,重新計算寬度*/
     window.onresize=function(){
         bannerWidth=banner.offsetWidth+"px";
         imgBox.style.width=count*bannerWidth+"px";
         for(var i = 0; i < lis.length;i++){
             lis[i].style.width=bannerWidth+"px";
         }
         imgBox.style.left=-index*bannerWidth+"px";
     }
     //自動輪播
     var timerId;
     var strtime=function(){
         timerId=setInterval(function(){
            index++;
            //添加過度效果
            imgBox.style.transition="left 0.5s ease-in-out"
            //設置偏移量
            imgBox.style.left=(-index*bannerWidth)+"px";
            setTimeout(function(){
                //當走到最後一張時候,我就讓他等於最後一張
                if(index==count-1){
                    index=1;
                   // 清除過度效果
                    imgBox.style.transition="none";
                    /*偏移到指定的位置*/
                     imgBox.style.left=(-index*bannerWidth)+"px";
                }
            },500)
         },1500)
     }
     //自動播放調用
     strtime();
     //實現手動輪播
     var startX,moveX,distanceX;
     /*為圖片添加觸摸事件--觸摸開始*/ 
     var isEnd = true; 
     imgBox.addEventListener("touchstart",function(e){
         //停止定時器
        clearInterval(timerId);
        //console.log(e);
        startX=e.targetTouches[0].clientX;   
     });
     //為圖片添加觸摸過程,滑動圖片
     imgBox.addEventListener("touchmove",function(e){
      if(isEnd==true){
             //console.log(123);
         
          /*記錄手指在滑動過程中的位置*/
        moveX=e.targetTouches[0].clientX;
        /*計算坐標的差異*/
        distanceX=moveX-startX;
        //清除過度效果
        imgBox.style.transition="none";
        //基於之前輪播圖偏移的位置
        imgBox.style.left=(-index*bannerWidth + distanceX)+"px";
      }
     })
     /*添加觸摸結束事件*/
     imgBox.addEventListener("touchend",function(e){
         //獲取滑動距離,判斷是否超過100px
         isEnd=false;
         if(Math.abs(distanceX) > 50){
             //判斷滑動方向
             if(distanceX > 0){//上一張
                index--;
             }else{//下一張
                 index++;
             }
             //過度效果
             imgBox.style.transition="left 0.5s ease-in-out";
             //偏移位置
             imgBox.style.left=-index*bannerWidth+"px";
         }else if(Math.abs(distanceX) > 0){//回彈效果
              //過度效果
              imgBox.style.transition="left 0.5s ease-in-out";
              //偏移位置
              imgBox.style.left=-index*bannerWidth+"px";
         }
           /*將上一次move所產生的數據重置為0*/
        startX=0;
        moveX=0;
        distanceX=0;
        
     });
     /*webkitTransitionEnd:可以監聽當前元素的過渡效果執行完畢,當一個元素的過渡效果執行完畢的時候,會觸發這個事件*/
     imgBox.addEventListener("webkitTransitionEnd",function(){
         console.log(index,33333);
         
        /*如果到了最後一張(count-1),回到索引1*/
        /*如果到了第一張(0),回到索引count-2*/
        if(index==count-1){
            index=1;
            imgBox.style.transition="none";
            imgBox.style.left=-index*bannerWidth+"px";
        }else if(index==0){
            index=count-2;
            imgBox.style.transition="none";
            imgBox.style.left=-index*bannerWidth+"px";
        }
        yuandian(index);
        setTimeout(function () {
            isEnd=true;
            clearInterval(timerId);
            strtime();
          },100)
     });

    //  //圓點排他
    var yuandian=function (index) {
        //先找到所有的li  進行遍歷移除所有樣式,為自己加上樣式
        var lis=banner.querySelector("ul:last-of-type").querySelectorAll("li");
        for(var i = 0; i < lis.length; i++){
            lis[i].classList.remove("active");
        }
        lis[index-1].classList.add("active");
      }
     

}

 


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

-Advertisement-
Play Games
更多相關文章
  • 需求:外部人員需要對公司伺服器上某個文件夾內容進行讀寫操作 文件目錄信息:/opt/abc drwxr-xr-x 9 www www 4096 12月 4 13:02 abc #註意最初abc的www用戶組沒有寫許可權 為了後面的ftp用戶能夠對此文件具備寫操作,需要添加www用戶組的寫許可權: chm ...
  • MapReduce是什麼 MapReduce是一種分散式計算編程框架,是Hadoop主要組成部分之一,可以讓用戶專註於編寫核心邏輯代碼,最後以高可靠、高容錯的方式在大型集群上並行處理大量數據。 MapReduce的存儲 MapReduce的數據是存儲在HDFS上的,HDFS也是Hadoop的主要組成 ...
  • 二. serverCron函數 2.3 更新伺服器每秒執行命令次數 serverCron函數中的trackOperationsPerSecond函數會以每100毫秒一次的頻率執行,這個函數以抽樣計算的方式,估算並記錄伺服器在最近一秒鐘處理的命令請求數量,這個值可以通過info status命令的in ...
  • 1、Linux下mysql安裝完後是預設:區分表名的大小寫,不區分列名的大小寫;2、用root帳號登錄後,在/etc/my.cnf中的[mysqld]後添加添加lower_case_table_names=1,重啟MYSQL服務,這時已設置成功:不區分表名的大小寫;lower_case_table_ ...
  • 今日任務 完成對MYSQL資料庫的多表查詢及建表的操作 教學目標 掌握MYSQL中多表的創建及多表的查詢 掌握MYSQL中的表關係分析並能正確建表 昨天內容回顧: ​ 資料庫的創建 : create database 資料庫的名 character set 字元集 collate 校對規則 ​ 數據 ...
  • 參照MOS 官方文檔Complete Checklist for Manual Upgrade to Oracle Database 11gR2 (11.2) (Doc ID 837570.1)一、升級前的準備1、複製utlu112i.sql腳本從11G資料庫複製$ORACLE_HOME/rdbms ...
  • 1、Hadoop生態概況 Hadoop是一個由Apache基金會所開發的分散式系統集成架構,用戶可以在不瞭解分散式底層細節情況下,開發分散式程式,充分利用集群的威力來進行高速運算與存儲,具有可靠、高效、可伸縮的特點 Hadoop的核心是YARN,HDFS,Mapreduce,常用模塊架構如下 ​ 我 ...
  • 通知:由於本周六場地申請沒通過,所以本周的培訓臨時取消。 今天給大家帶來的是Android入門的第一課,由於教室申請的不確定性,因此,每次培訓的內容都會在博客先提前釋放出來。首先Android的APP是基於Java開發的,雖然Android是基於Linux內核的,但是虛擬層還是跑的是Java,由於在 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...