JS輕鬆實現輪播圖-js教程-PHP中文網

首頁

web前端

js教程

JS輕鬆實現輪播圖

php中世界最好的语言

Apr 18, 2018 pm 05:10 PM

javascript實現輕鬆

這次帶給大家JS輕鬆實現輪播圖，JS輕鬆實現輪播圖的注意事項有哪些，下面就是實戰案例，一起來看一下。

想法：

# 1.首先要有個盛放圖片的容器，設定為單幅圖片的寬高，且overflow：hidden，這樣保證每次可以只顯示一個圖片
2、Container內有個放圖片的list進行position的定位，其中的圖片採用float的方式，同時當圖片進行輪播時，改變list的Left值使得其顯示的圖片發生變化。
3、圖片的輪播使用定時器，透過定時器改變list的Left值是的圖片循環展示
4、當滑鼠滑動到圖片上時，清除定時器，圖片停止輪播，當滑鼠移出時繼續進行輪播
5、圖片上有一組小圓點用於與當前顯示的圖片相對應，同時可以透過點擊的方式查看對應的圖片
6、圖片可以透過點擊進行左右滑動顯示

程式碼：

<!DOCTYPE html>
<htmllang="en">
<head>
 <metacharset="UTF-8">
 <title>轮播图</title>
 <styletype="text/css">
  .container{
   margin:0 auto;
   width:600px;
   height:400px;
   position: relative;
   overflow: hidden;
   border:4px solid gray;
   box-shadow: 3px 3px 5px gray;
   border-radius:10px;
  }
  .list{
   width:4200px;
   height:400px;
   position: absolute;
   top:0px;
  }
  img{
   float:left;
   width:600px;
   height:400px;
  }
  .dots{
   position: absolute;
   left:40%;
   bottom:30px;
   list-style: none;
  }
  .dots li{
   float:left;
   width:8px;
   height:8px;
   border-radius: 50%;
   background: gray;
   margin-left:5px
  }
  .dots .active{
   background: white;
  }
  .pre,.next{
   position: absolute;
   top:40%;
   font-size:40px;
   color:white;
   text-align:center;
   background: rgba(128,128,128,0.5);
   /* display:none;*/
  }
  .pre{
   left:30px;
  }
  .next{
   right:30px;
  }
 </style>
</head>
<body>
 <pclass="container">
  <pclass="list"style=" left:-600px;">
   <img  src="/static/imghwm/default1.png"  data-src="img/5.jpg"  class="lazy" alt="JS輕鬆實現輪播圖" >
   <img  src="/static/imghwm/default1.png"  data-src="img/1.jpg"  class="lazy" alt="JS輕鬆實現輪播圖" >
   <img  src="/static/imghwm/default1.png"  data-src="img/2.jpg"  class="lazy" alt="JS輕鬆實現輪播圖" >
   <img  src="/static/imghwm/default1.png"  data-src="img/3.jpg"  class="lazy" alt="JS輕鬆實現輪播圖" >
   <img  src="/static/imghwm/default1.png"  data-src="img/4.jpg"  class="lazy" alt="JS輕鬆實現輪播圖" >
   <img  src="/static/imghwm/default1.png"  data-src="img/5.jpg"  class="lazy" alt="JS輕鬆實現輪播圖" >
   <img  src="/static/imghwm/default1.png"  data-src="img/1.jpg"  class="lazy" alt="JS輕鬆實現輪播圖" >
  </p>
  <ulclass="dots">
   <liindex=1class="active dot"></li>
   <liindex=2class="dot"></li>
   <liindex=3class="dot"></li>
   <liindex=4class="dot"></li>
   <liindex=5class="dot"></li>
  </ul>
  <pclass="pre"><</p>
  <pclass="next">></p>
 </p>
<scripttype="text/javascript">
 var index=1,timer;
 function init(){
  eventBind();
  autoPlay();
 }
 init();
 function autoPlay(){
   timer =setInterval(function () {
   animation(-600);
   dotIndex(true);
  },1000)
 }
 function stopAutoPlay() {
  clearInterval(timer);
 }
 function dotIndex(add){
  if(add){
   index++;
  }
  else{
   index--;
  }
  if(index>5){
   index = 1;
  }
  if(index<1){
   index=5;
  }
  dotActive();
 }
 function dotActive() {
  vardots=document.getElementsByClassName("dot");
  varlen=dots.length;
  for(vari=0;i<len ;i++){
   dots[i].className="dot";
  }
 
  for(vari=0;i<len;i++){
   /*此处可以不用parseInt，当不用全等时*/
   if(index === parseInt(dots[i].getAttribute("index"))){
    dots[i].className="dot active";
   }
  }
 }
 function eventBind(){
  /*点的点击事件*/
  vardots=document.getElementsByClassName("dot");
  varlen=dots.length;
  for(vari=0;i<len;i++){
   (function(j){
    dots[j].onclick=function(e){
     varind=parseInt(dots[j].getAttribute("index"));
     animation((index - ind)*(-600));/*显示点击的图片*/
     index= ind;
     dotActive();
    }
   })(i)
  }
  /*容器的hover事件*/
  varcon=document.getElementsByClassName("container")[0];
  /*鼠标移动到容器上时，停止制动滑动，离开时继续滚动*/
  con.onmouseover=function(e) {
   stopAutoPlay();
  }
  con.onmouseout=function(e){
   autoPlay();
  }
  /*箭头事件的绑定*/
   varpre=document.getElementsByClassName("pre")[0];
   varnext=document.getElementsByClassName("next")[0];
   pre.onclick=function(e) {
    dotIndex(false);
    animation(600);
   }
  next.onclick=function(e) {
   dotIndex(true);
   animation(-600);
  }
 }
 function animation(offset){
  varlists=document.getElementsByClassName("list")[0];
  varleft=parseInt(lists.style.left.slice(0,lists.style.left.indexOf("p"))) + offset;
  if(left<-3000){
   lists.style.left="-600px";
  }
  else if(left>-600){
   lists.style.left = "-3000px";
  }
  else{
   lists.style.left = left+"px";
  }
 }
</script>
</body>
</html>

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

js正規快速記憶方法

#Vue0.1程式碼怎麼加入Vue2.0使用

JS實作棋盤覆蓋

以上是JS輕鬆實現輪播圖的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

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

Python vs. JavaScript：開發人員的比較分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要區別在於類型系統和應用場景。 1.Python使用動態類型，適合科學計算和數據分析。 2.JavaScript採用弱類型，廣泛用於前端和全棧開發。兩者在異步編程和性能優化上各有優勢，選擇時應根據項目需求決定。

Python vs. JavaScript：選擇合適的工具May 08, 2025 am 12:10 AM

選擇Python還是JavaScript取決於項目類型：1)數據科學和自動化任務選擇Python；2)前端和全棧開發選擇JavaScript。 Python因其在數據處理和自動化方面的強大庫而備受青睞，而JavaScript則因其在網頁交互和全棧開發中的優勢而不可或缺。

Python和JavaScript：了解每個的優勢May 06, 2025 am 12:15 AM

Python和JavaScript各有優勢，選擇取決於項目需求和個人偏好。 1.Python易學，語法簡潔，適用於數據科學和後端開發，但執行速度較慢。 2.JavaScript在前端開發中無處不在，異步編程能力強，Node.js使其適用於全棧開發，但語法可能複雜且易出錯。

JavaScript的核心：它是在C還是C上構建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; sanInterpretedlanguagethatrunsonenginesoftenwritteninc.1）JavascriptwasdesignedAsignedAsalightWeight，drackendedlanguageforwebbrowsers.2）Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers，典型地，替代品。

JavaScript應用程序：從前端到後端May 04, 2025 am 12:12 AM

JavaScript可用於前端和後端開發。前端通過DOM操作增強用戶體驗，後端通過Node.js處理服務器任務。 1.前端示例：改變網頁文本內容。 2.後端示例：創建Node.js服務器。

Python vs. JavaScript：您應該學到哪種語言？May 03, 2025 am 12:10 AM

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統：1)職業發展：Python適合數據科學和後端開發，JavaScript適合前端和全棧開發。 2)學習曲線：Python語法簡潔，適合初學者；JavaScript語法靈活。 3)生態系統：Python有豐富的科學計算庫，JavaScript有強大的前端框架。

JavaScript框架：為現代網絡開發提供動力May 02, 2025 am 12:04 AM

JavaScript框架的強大之處在於簡化開發、提升用戶體驗和應用性能。選擇框架時應考慮：1.項目規模和復雜度，2.團隊經驗，3.生態系統和社區支持。

JavaScript，C和瀏覽器之間的關係May 01, 2025 am 12:06 AM

引言我知道你可能會覺得奇怪，JavaScript、C 和瀏覽器之間到底有什麼關係？它們之間看似毫無關聯，但實際上，它們在現代網絡開發中扮演著非常重要的角色。今天我們就來深入探討一下這三者之間的緊密聯繫。通過這篇文章，你將了解到JavaScript如何在瀏覽器中運行，C 在瀏覽器引擎中的作用，以及它們如何共同推動網頁的渲染和交互。 JavaScript與瀏覽器的關係我們都知道，JavaScript是前端開發的核心語言，它直接在瀏覽器中運行，讓網頁變得生動有趣。你是否曾經想過，為什麼JavaScr

See all articles