js是如何實現京東輪播圖效果的？-js教程-PHP中文網

首頁

web前端

js教程

js是如何實現京東輪播圖效果的？

零下一度

Jul 02, 2017 am 10:22 AM

javascript 京東效果

這篇文章主要為大家詳細介紹了js實現京東輪播圖效果，具有一定的參考價值，有興趣的小伙伴們可以參考一下

本文實例為大家分享了js實現京東輪播圖效果的具體程式碼，供大家參考，具體內容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body,ul,li{padding:0;margin:0;}
    li{list-style-type:none;}
    .wrap{
      position:relative;
      width:480px;
      height:260px;
      margin:100px auto;
    }
    .wrap>ul>li{position:absolute;display:none;}
    /*隐藏所有的li*/
    .wrap img{width:480px;height:260px;}
    .wrap li:first-child{display:block;}/*显示第一个*/
    .arrow{
      width:480px;
      height:60px;
      position:absolute;
      top:50%;
      margin-top:-30px;
      display:none;
    }
    .arrow>span{
      font-size:24pt;
      line-height:60px;
      display:inline-block;
      width:36px;
      background-color:#CEE5E8;
      text-align:center;
      cursor:pointer;
      opacity:0.5;
      border-radius:5px;/*显示圆框*/
      -webkit-border-radius:5px;
      -moz-border-radius:5px;
      color:black;
    }
    .wrap:hover .arrow{
      display:block;
    }
    .arrow>span:last-child{
      float:right;
    }
  </style>
</head>
<body>
<p class="wrap">
  <!--图片部分-->
  <ul>
    <li>
      <a href="javascript:void(0)">
        <img src="images/1.jpg"/>
      </a>
    </li>
    <li>
      <a href="javascript:void(0)">
        <img src="images/2.jpg"/>
      </a>
    </li>
    <li>
      <a href="javascript:void(0)">
        <img src="images/3.jpg"/>
      </a>
    </li>
    <li>
      <a href="javascript:void(0)">
        <img src="images/4.jpg"/>
      </a>
    </li>
  </ul>
  <!--按钮部分-->
  <p class="arrow">
    <span><</span>
    <span>></span>
  </p>
</p>
</body>
<script src="jquery-1.12.0.min.js"></script>
<script>
  $(function(){
    var count = 0;
    function change() {
      count++;
      if( count == $(".wrap>ul>li").length){
        count = 0;
      }
      $(".wrap>ul>li").eq(count).fadeIn().siblings("li").fadeOut();
    }
    var myTimer = setInterval(change,4000);
    function reRun(){
      myTimer = setInterval(change,4000);
    }
    /*注意jquery中setInterval函数不要加引号和(),否则会报缺少对象*/
    $(".arrow>span").eq(0).click(function(){
      clearInterval(myTimer);
      /*清除计时器，目的在于不会因点击按钮时setInterval事件仍旧执行*/
      count--;
      if( count == -1){
        count = $(".wrap>ul>li").length - 1;
      }      $(".wrap>ul>li").eq(count).fadeIn().siblings("li").fadeOut();
      setTimeout(reRun,0);
      /*重新启动计时器，保证不点击按钮是能正常切换*/
    });
    $(".arrow>span").eq(1).click(function(){
      clearInterval(myTimer);
      count++;
      if( count == $(".wrap>ul>li").length){
        count = 0;
      }    $(".wrap>ul>li").eq(count).fadeIn().siblings("li").fadeOut();
      setTimeout(reRun,0);
    });
  });
</script>
</html>

登入後複製

以上是js是如何實現京東輪播圖效果的？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7859

Java教學

1649

CakePHP 教程

1403

Laravel 教程

1300

PHP教程

1242

Related knowledge

用戶遭遇罕見故障三星 Watch 智慧手錶突現白螢幕問題 Apr 03, 2024 am 08:13 AM

你可能遇到過智慧型手機螢幕出現綠色線條的問題，即使沒看過，也一定在網路上看過相關圖片。那麼，智慧手錶螢幕變白的情況你有遇見過嗎？ 4月2日，CNMO從外媒了解到，一名Reddit用戶在社群平台上分享了一張圖片，展示了三星Watch系列智慧手錶螢幕變白的情況。該用戶寫道："我離開時正在充電，回來時就這樣了，我嘗試重啟，但重啟過程中屏幕還是這樣。"三星Watch智能手錶屏幕變白這位Reddit用戶並未指明這款智能手錶的具體型號。不過，從圖片上看，應該是三星Watch5。此前，另一位Reddit用戶也報告

九州風神阿薩辛 4S 散熱器評測風冷「刺客大師」範兒 Mar 28, 2024 am 11:11 AM

說起阿薩辛ASSASSIN，相信玩家們一定會想到《刺客信條》中的各位刺客大師，不僅身手了得，而且"躬身於黑暗、服務於光明"的信條，與國內知名機箱/電源/散熱器品牌九州風神（DeepCool）旗下的阿薩辛ASSASSIN系列旗艦級風冷散熱器不謀而合。最近，該系列的最新產品阿薩辛ASSASSIN4S重磅上線，"西裝刺客，再進階"為高級玩家帶來全新的風冷散熱體驗。外觀一覽細節滿滿阿薩辛4S散熱器採用雙塔構造+單風扇內嵌設計，外麵包覆立方體造型的整流罩，整體感極強，並提供白、黑兩種配色可選，滿足不同色系

輕鬆拿捏 4K 高畫質影像理解！這個多模態大模型自動分析網頁海報內容，打工人簡直不要太方便 Apr 23, 2024 am 08:04 AM

一個可以自動分析PDF、網頁、海報、Excel圖表內容的大模型，對於打工人來說簡直不要太方便。上海AILab，香港中文大學等研究機構提出的InternLM-XComposer2-4KHD（簡寫為IXC2-4KHD）模型讓這一切成為了現實。相較於其他多模態大模型不超過1500x1500的分辨率限制，該工作將多模態大模型的最大輸入影像提升到超過4K（3840x1600）分辨率，並支援任意長寬比和336像素～4K動態解析度變化。發布三天，模型就登頂HuggingFace視覺問答模型熱度排行榜第一。輕鬆拿捏

航空嘉 MX750P 全模組電源評測：750W 的白金實力濃縮 Mar 28, 2024 pm 03:20 PM

ITX平台以小巧的身形吸引了許多追求極致和獨特美感的玩家，隨著製程的提升和技術的進步，英特爾第14代酷睿和RTX40系顯卡都可以在ITX平台中發揮實力，遊戲玩家也對SFX電源有了更高的要求。遊戲愛好者航空嘉推出新的MX系列電源，在滿足高效能需求的ITX平台中，MX750P全模組電源的定額功率高達750W，同時通過了80PLUS白金級認證。以下我們就帶來這款電源的評測。航嘉MX750P全模組電源採用了簡約時尚的設計理念，共有黑白兩款供玩家選擇，均採用磨砂表面處理，搭配銀灰色和紅色的字體有很好的質感，

春日裡的精緻光影藝術，哈趣 H2 性價比之選 Apr 17, 2024 pm 05:07 PM

隨著春天的到來，萬物復甦，一切都充滿了生命與活力。在這個美好的季節裡，如何為居家生活增添一抹別樣的色彩？哈趣H2投影儀，以其精緻的設計和超高的性價比，成為了這個春天裡不可或缺的一道亮麗風景。這款H2投影機小巧玲瓏卻不失時尚。無論是放在客廳的電視櫃上，或是臥室的床頭櫃旁，都能成為一道明亮的風景線。它的機身採用了奶白色的磨砂質地，這種設計不僅讓投影機的外觀更顯高級，同時也增加了觸感的舒適度。米色仿皮紋材質，更為整體外觀增添了一抹溫馨與雅緻。這種色彩與材質的搭配，既符合現代家居的美感趨勢，又能融入

七彩虹隱星 P15 24 評測：顏值性能兼具的硬蕊全能遊戲本 Mar 06, 2024 pm 04:40 PM

在當下科技快速發展的時代，筆記型電腦已成為人們日常生活和工作中不可或缺的重要工具。對於那些對性能有高要求的玩家而言，擁有配置強大、性能出色的筆記型電腦才能滿足其硬核需求。七彩虹隱星P15筆記型電腦憑藉其卓越性能和令人驚豔的設計，成為了未來的引領者，堪稱硬核筆記本的典範。七彩虹隱星P1524配備了13代英特爾酷睿i7處理器和RTX4060LaptopGPU，外觀採用更時尚的太空船設計風格，同時在細節表現上也有出色表現。讓我們先來了解這款筆記本的特點。至高搭載英特爾酷睿i7-13620H處理

京東進一步升級「免費上門退換」運費險服務，預計 8 月底全面上線 Aug 14, 2024 am 10:09 AM

本站8月13日消息，為提升消費者的購物體驗，為商家提供更便捷有效率地售後服務單管理工具，京東今年4月推出了「免費上門退換」服務。本站註：「免費到府退換」服務是指商家透過簽約投保「運費險（升級版）」開立「免費上門退換」服務後，對於在前台展示「免費上門退換」標識的商品，消費者發起退換貨請求時，保險公司對退換貨產生的單程運費提供保險服務。符合運費險時（含賣家運費險及買家運費險），配送員上門取件時不會向客戶收取運費，取件後也不會向商家收取運費，而是由保險公司直接賠付給京配，詳情頁會提示運費金額為0。現在

螢幕好打遊戲才夠爽 iQOO Neo9S Pro+ 螢幕簡析 Jul 19, 2024 pm 03:53 PM

在當今智慧型手機市場中，螢幕素質已成為衡量一款手機綜合性能的關鍵指標之一。 iQOO旗下的Neo系列一直致力於為用戶提供出色的遊戲體驗和視覺享受，最新款產品iQOONeo9SPro+更是採用一塊"三好護眼電競屏"，接下來我們就來一起看看這塊屏幕的素質有多出色。 iQOONeo9SPro+搭載了一塊1.5KOLED電競直屏，支援從1Hz到144Hz的旗艦級LTPO自適應刷新率，意味著在顯示靜態內容時能夠實現超低功耗的待機狀態，而在遊戲過程中也能智能切換至90Hz至144Hz的動態高

See all articles

js是如何實現京東輪播圖效果的？

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題