【JavaScript】純js-小案例:帶縮略圖的圖片輪換

来源:http://www.cnblogs.com/qiuyueding/archive/2017/11/10/7815435.html
-Advertisement-
Play Games

今天整理文件時找到了之前做的一些js練習,裡面的帶縮略圖的圖片輪換正好跟我之前做的banner輪播有點像。就又看了一遍,添加了一些註釋。 效果如下: 代碼: 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8" ...


今天整理文件時找到了之前做的一些js練習,裡面的帶縮略圖的圖片輪換正好跟我之前做的banner輪播有點像。就又看了一遍,添加了一些註釋。

效果如下:

 

代碼:

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5       <meta charset="utf-8">
  6       <title>帶縮略圖的圖片輪換</title>
  7 
  8       <style type="text/css">
  9             body,p,ul{padding: 0;margin: 0;}
 10             img{border: 0; vertical-align: middle;}
 11 
 12             body {
 13                   width: 500px;
 14                   margin: 50px auto;
 15                   background: #000;
 16             }
 17 
 18             #p1 {
 19                   color: white;
 20                   font-size: 24px;
 21                   line-height: 24px;
 22                   text-align: center;
 23             }
 24 
 25             #box {
 26                   position: relative;
 27                   width: 500px;
 28                   height: 400px;
 29                   margin-top: 30px;
 30                   background: #5d5151;
 31                   text-align: center;
 32             }
 33 
 34             a {
 35                   width: 40px;
 36                   height: 40px;
 37                   position: absolute;
 38                   top: 175px;
 39                   font-size: 20px;
 40                   text-decoration: none;
 41                   line-height: 40px;
 42                   text-align: center;
 43                   color: #fff;
 44                   background: #ffc107;
 45                   border-radius: 50%;
 46                   opacity: 0.6;
 47             }
 48 
 49             a:hover {
 50                   opacity: 1;
 51                   transform: scale(1.2);
 52             }
 53 
 54             #prev {
 55                   left: 60px;
 56             }
 57 
 58             #next {
 59                   right: 60px;
 60             }
 61 
 62             #img {
 63                   width: 400px;
 64                   height: 300px;
 65                   margin-top: 30px;
 66             }
 67 
 68             #btn {
 69                   width: 120px;
 70                   list-style: none;
 71                   margin: 10px auto;
 72             }
 73 
 74             #btn li {
 75                   width: 20px;
 76                   height: 20px;
 77                   border-radius: 50%;
 78                   background: #928c8c;
 79                   float: left;
 80                   margin-left: 10px;
 81                   position: relative;
 82             }
 83 
 84             #btn .active {
 85                   background: #ffc107;
 86             }
 87 
 88             #btn img {
 89                   width: 100px;
 90                   height: 100px;
 91                   border: 5px solid #fff;
 92                   position: absolute;
 93                   bottom: 30px;
 94                   display: none;
 95                   left: -40px;
 96             }
 97       </style>
 98 
 99       <script type="text/javascript">
100             window.onload = function () {
101                   //大圖路徑
102                   var arrUrl = ['img/bassist.jpg', 'img/concert.jpg', 'img/crowd.jpg', 'img/guitarist.jpg'];
103                   //縮略圖路徑
104                   var arrlitUrl = ['img/thumbnail_bassist.jpg', 'img/thumbnail_concert.jpg', 'img/thumbnail_crowd.jpg', 'img/thumbnail_guitarist.jpg'];
105                   
106                   var num = 0;
107 
108                   var Oimg = document.getElementById('img');
109                   var Oul = document.getElementById('btn');
110                   var Oli = Oul.getElementsByTagName('li');
111                   //前一張,後一張
112                   var Oprev = document.getElementById('prev');
113                   var Onext = document.getElementById('next');
114 
115 
116                   // Oimg[num].src = arrUrl[num];
117                   // Olitimg[num].src = arrlitUrl[num];
118 
119                   //小圓圈即li標簽顏色樣式
120                   function turnactive(nu) {
121                         for (var i = 0; i < arrUrl.length; i++) {
122                               Oli[i].className = '';
123                         }
124                         Oli[nu].className = 'active';
125                   }
126                   //前一張點擊事件
127                   Oprev.onclick = function () {
128                         num--;
129                         if (num == -1) {
130                               num = arrUrl.length - 1;
131                         }
132                         Oimg.src = arrUrl[num];
133                         turnactive(num);
134                   }
135                   //後一張點擊事件
136                   Onext.onclick = function () {
137                         num++;
138                         if (num == arrUrl.length) {
139                               num = 0;
140                         }
141                         Oimg.src = arrUrl[num];
142                         turnactive(num);
143                   }
144                   //給每個小圓圈li添加事件
145                   for (var i = 0; i < arrlitUrl.length; i++) {
146                         //給每個小圓圈li添加索引
147                         Oli[i].index = i;
148                         //每當滑鼠移入li標簽時,顯示對應的縮略圖
149                         Oli[i].onmouseover = function () {
150                               this.getElementsByTagName('img')[0].style.display = 'block';
151                               this.getElementsByTagName('img')[0].src = arrlitUrl[this.index];
152                         }
153                         //每當滑鼠移出li標簽時,隱藏縮略圖
154                         Oli[i].onmouseout = function () {
155                               this.getElementsByTagName('img')[0].style.display = 'none';
156                         }
157                         //滑鼠點擊時更換圖片為對應的圖片
158                         Oli[i].onclick = function () {
159                               Oimg.src = arrUrl[this.index];
160                               turnactive(this.index);
161                         }
162                   }
163 
164             }
165       </script>
166 </head>
167 
168 <body>
169       <p id="p1">帶縮略圖的圖片輪換</p>
170       <div id="box">
171             <a href="javascript:;" id="prev">&lt</a>
172             <a href="javascript:;" id="next">&gt</a>
173             <img src="img/bassist.jpg" id="img" />
174             <ul id="btn">
175                   <li class="active">
176                         <img src="img/loader_ico.gif" />
177                   </li>
178                   <li>
179                         <img src="img/loader_ico.gif" />
180                   </li>
181                   <li>
182                         <img src="img/loader_ico.gif" />
183                   </li>
184                   <li>
185                         <img src="img/loader_ico.gif" />
186                   </li>
187             </ul>
188       </div>
189 </body>
190 
191 </html>
View Code

 原理:

  • html結構:
    • 標題p1
    • 圖片框 box
      • 大圖img
      • 小圓圈 li  》縮略圖
      • 前後切換prev 和 next
  • css 佈局:
    • 標題和圖片框正常放;
    • 前後切換的btn需要用相對定位absolute放到圖片框的左右兩側,添加hover顏色變換
    • 小圓圈組ul放在圖片框正中下方,li均勻排列;添加calss:active樣式設置選中li;
    • 縮略圖相對定位absolute到對應的小圓圈li上方。
    • 預設縮略圖不顯示display:none;
  • javascript:
    • 首先用兩個數組放對應圖片路徑,大圖和縮略圖;也可以只用一組圖片,只是在css中設置一下縮略圖的大小就好。
    • 然後獲取大圖標簽Oimg,小圓圈數組Oli,前一張Oprev,後一張Onext;
    • 給Oprev和Onext添加點擊事件,用num來記錄當前為第幾張作為判斷條件,超出數值做相應處理,然後改變Oimg的圖片路徑即可。
    • 最後給每個小圓圈Oli添加事件,因為js先執行for迴圈為每個Oli註冊事件,而事件執行是等用戶操作觸發的,所以需要添加索引index來記錄是第幾個,在事件函數中使用。
      • 滑鼠移入:顯示Oli下對應的縮略圖display:block;設置圖片路徑;
      • 滑鼠移出:隱藏Oli下對應的縮略圖display:none;
      • 滑鼠點擊:修改Oimg的圖片路徑顯示對應的圖片。
    • 註意:Oimg顯示為第幾張圖片,對應的第幾個小圓圈Oli需要顯示,我們定義一個函數turnactive(i),只需傳入序號即可將其他小圓圈OIi的active樣式去除,設置第i個Oli為active(這就是定義樣式active的原因)。

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

-Advertisement-
Play Games
更多相關文章
  • DUBBO與ZOOKEEPER、SPRINGMVC整合和使用 互聯網的發展,網站應用的規模不斷擴大,常規的垂直應用架構已無法應對,分散式服務架構以及流動計算架構勢在必行,Dubbo是一個分散式服務框架,在這種情況下誕生的。現在核心業務抽取出來,作為獨立的服務,使前端應用能更快速和穩定的響應。 第一: ...
  • 前言 相信逛過淘寶的人肯定都見過,網站上經常有那種圖片輪播的形式。而今天,要介紹的相關知識就是為了實現圖片輪播的效果。筆者整理了一些相關的知識儲備,並且實現了一個小的案例,用以複習相關知識點。 一、案例分析 實現替換圖片: 第一步:確定事件(頁面載入事件onload)併為其綁定一個函數 第二步:書寫 ...
  • 如何通過使用Q來併發執行多個promises呢? 上面的代碼輸出結果為1。很顯然,你不能簡單地將各個promises都放到一個Q()函數里來執行,這樣只有第一個promise會被正確地執行,剩餘的都會被忽略掉。 你可以使用Q.all來代替上面的方法,它們之間的主要區別是前者將每個promise單獨作 ...
  • 下麵以現實場景作為情境。 基礎知識,理解git中的幾個區域 本地代碼已經add,未commit 修改本地工作目錄中的readme.md,添加文字"第一次修改" 然後查看下狀態 進行Add操作,並查看狀態 這時候,變動進入了緩存區(Index) 但是我們突然發現我們改動錯了,其實我是想改動 文件。 方 ...
  • ...
  • 瞭解瞭解 jQuery是一個快速,小巧,功能豐富的JavaScript庫。它使諸如HTML文檔遍歷和操縱,事件處理,動畫和Ajax等事情變得簡單得多,而且易於使用的API可以在多種瀏覽器中使用。 一、 什麼是JQuery? jQuery是一個JavaScript函數庫。 jQuery是一個輕量級的" ...
  • 在一些項目需求中需要父組件向子組件動態傳值,比如我這裡的需求是,父組件動態通過axios獲取返回的圖片url數組然後傳給子組件,上傳圖片的子組件拿到該數組後進行遍歷並展示圖片 方法有兩種, 方法一: props傳值,這裡註意一個問題,傳過來的值需要用watch監聽並賦值,否則這裡獲取到的是空數組 父 ...
  • 1.v-if&v-else&v-show v-if用來判斷是否載入html的DOM,v-if和v-else一般是一起用的。 v-show相當於display,DOM已經載入出來了,這個是判斷它要不要顯現出來 2.v-for,這個主要是迴圈輸出的問題,js里不是有for..in...迴圈麽?這個跟那個 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...