本文實例為大家分享了html5輪播圖的具體代碼，供大家參考，具體內容如下
1.輪播圖的布局：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*去除默認樣式*/ *{ margin: 0; padding: 0; } /*設置div*/ #outer{ width: 520px; height: 333px; /*設置居中*/ margin: 50px auto; /* * 設置背景顏色 */ background-color: greenyellow; /*設置上下內邊距*/ padding: 10px 0; /*為父元素開啟相對定位*/ position: relative; /*隱藏溢出的內容*/ overflow: hidden; } /*設置ul*/ #imgList{ /*去除項目符號*/ list-style: none; /*設置ul的寬度*/ width: 2600px; /*開啟絕對定位*/ position: absolute; /* * 通過修改ul的left值，可以切換圖片 * 1 0px * 2 -520px * 3 -1040px * 4 -1560px * .... */ left: 0px; } /*設置li*/ li{ /*設置元素浮動*/ float: left; /*設置外邊距*/ margin: 0 10px; } /*設置導航按鈕*/ #nav{ /*開啟絕對定位*/ position: absolute; /*定位*/ bottom: 20px; /* * #outer 寬度 520px * * #nav 寬度 125px * * 520 - 125 = 395/2 = 197.5 */ left: 197px; } #nav a{ /*設置a浮動*/ float: left; /*設置寬和高*/ width: 15px; height: 15px; /*設置背景顏色*/ background-color: red; /*設置外邊距*/ margin: 0 5px; /*設置透明*/ opacity: 0.5; filter: alpha(opacity=50); } </style> </head> <body> <!-- 創建一個div作為容器 --> <div id="outer"> <!--創建一個ul，用來保存圖片--> <ul id="imgList"> <li><img src="img/1.jpg" /></li> <li><img src="img/2.jpg" /></li> <li><img src="img/3.jpg" /></li> <li><img src="img/4.jpg" /></li> <li><img src="img/5.jpg" /></li> </ul> <!--創建一個div來放導航按鈕--> <div id="nav"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> </div> </div> </body> </html> 2.輪播圖的邏輯：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*去除默認樣式*/ *{ margin: 0; padding: 0; } /*設置div*/ #outer{ width: 520px; height: 333px; /*設置居中*/ margin: 50px auto; /* * 設置背景顏色 */ background-color: greenyellow; /*設置上下內邊距*/ padding: 10px 0; /*為父元素開啟相對定位*/ position: relative; /*隱藏溢出的內容*/ overflow: hidden; } /*設置ul*/ #imgList{ /*去除項目符號*/ list-style: none; /*設置ul的寬度*/ width: 2600px; /*開啟絕對定位*/ position: absolute; /* * 通過修改ul的left值，可以切換圖片 * 1 0px * 2 -520px * 3 -1040px * 4 -1560px * .... */ left: 0px; } /*設置li*/ li{ /*設置元素浮動*/ float: left; /*設置外邊距*/ margin: 0 10px; } /*設置導航按鈕*/ #nav{ /*開啟絕對定位*/ position: absolute; /*定位*/ bottom: 20px; /* * #outer 寬度 520px * * #nav 寬度 125px * * 520 - 125 = 395/2 = 197.5 */ left: 197px; } #nav a{ /*設置a浮動*/ float: left; /*設置寬和高*/ width: 15px; height: 15px; /*設置背景顏色*/ background-color: red; /*設置外邊距*/ margin: 0 5px; /*設置透明*/ opacity: 0.5; filter: alpha(opacity=50); } #nav a:hover{ background-color: black; } </style> <script type="text/javascript" src="js/tools.js"></script> <script type="text/javascript"> window.onload = function(){ //獲取id為imgList的ul var imgList = document.getElementById("imgList"); //獲取所有的圖片標簽 var imgs = document.getElementsByTagName("img"); //設置ul的寬度 imgList.style.width = 520 * imgs.length + "px"; //設置導航按鈕居中 //獲取id為outer的div var outer = document.getElementById("outer"); //獲取id為nav的div var nav = document.getElementById("nav"); nav.style.left = (outer.offsetWidth - nav.offsetWidth)/2 + "px"; //創建一個變量，來保存當前顯示圖片的索引 var index = 0; //獲取所有的超鏈接 var links = document.getElementsByTagName("a"); //設置對應的超鏈接變成選中狀態 links[index].style.backgroundColor = "black"; //開啟自動切換圖片 autoChange(); /* * 點擊超鏈接切換到對應的圖片 * 點擊第一個超鏈接，切換到第一個圖片 * 點擊第二個超鏈接，切換到第二個圖片 */ //為所有的超鏈接綁定單擊響應函數 for(var i=0 ; i<links.length ; i++){ //在超鏈接中添加一個屬性 links[i].num = i; links[i].onclick = function(){ //當切換圖片時，為了不受自動切換的影響需要將其關閉 clearInterval(autoTimer); //獲取到當前點擊的超鏈接的索引 //更新當前圖片的索引 index = this.num; //切換到對應的圖片 /* * 切換圖片，就是修改imgList的left屬性值 * 0 0*-520 * 1 1*-520 * 4 4*-520 */ //imgList.style.left = -520*index + "px"; //設置過渡效果 move(imgList , "left" , -520*index , 20 , function(){ //圖片切換完畢，打開自動切換 autoChange(); }); setA(); }; } //定義一個變量，保存自動切換圖片的定時器 var autoTimer; /* * 定義一個函數，專門用來自動切換圖片 */ function autoChange(){ //開啟一個定時器，來負責圖片的切換 autoTimer = setInterval(function(){ //索引自增 index++; //判斷index值是否合法 index = index % imgs.length; //切換圖片 move(imgList , "left" , -520*index , 20 , function(){ //動畫執行完畢，切換導航點 setA(); }); },3000); } /* * 函數專門用來設置超鏈接的選中狀態的 */ function setA(){ /* * 因為最后一張圖片和第一張是一樣的，所以當顯示的圖片是最后一張時，應該是第一個的超鏈接變顏色 */ if(index >= imgs.length - 1){ index = 0; //已經切換到最后一張，瞬間將其切換到第一張 imgList.style.left = 0; } /*遍歷超鏈接*/ for(var i=0 ; i<links.length ; i++){ //將所有的超鏈接的背景顏色都設置為紅色 links[i].style.backgroundColor = ""; } //將當前選中的超鏈接設置為黑色 links[index].style.backgroundColor = "black"; } }; </script> </head> <body> <!-- 創建一個div作為容器 --> <div id="outer"> <!--創建一個ul，用來保存圖片--> <ul id="imgList"> <li><img src="img/1.jpg" /></li> <li><img src="img/2.jpg" /></li> <li><img src="img/3.jpg" /></li> <li><img src="img/4.jpg" /></li> <li><img src="img/5.jpg" /></li> <li><img src="img/1.jpg" /></li> </ul> <!--創建一個div來放導航按鈕--> <div id="nav"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> </div> </div> </body> </html>外部js代碼：
/* * 定義一個move()函數來執行一些簡單的動畫效果 * 參數： * obj 要執行動畫的對象 * attr 執行動畫時要修改的屬性 * target 執行動畫的目標位置 * speed 動畫執行的速度 * callback 回調函數，當動畫執行完畢以后，該回調函數會執行 */ function move(obj, attr, target, speed, callback) { //關閉之前的定時器 /* * 一般都會將定時器的標識作為執行動畫對象的屬性保存，這樣可以確保只有當前對象能訪問到定時器 */ clearInterval(obj.timer); //判斷向左移還是向右移 //0 --> 800 向右移 //起始位置 < 目標位置 則向右移動，速度為正 //800 --> 0 向左移 //起始位置 > 目標位置 則向左移動，速度為負 //獲取元素的起始位置 var current = parseInt(getStyle(obj, attr)); if(current > target) { //起始位置 > 目標位置 則向左移動，速度為負 speed = -speed; } //開啟一個定時器，控制box1移動 obj.timer = setInterval(function() { //獲取box1的當前的left值 var oldValue = parseInt(getStyle(obj, attr)); //通過舊值來計算新值 var newValue = oldValue + speed; //判斷newValue是否大于800 /* * 如果從0 向 800，執行動畫，則值越來越大 * 如果從800向0執行動畫，則值越來小 */ if((speed > 0 && newValue > target) || (speed < 0 && newValue < target)) { newValue = target; } //將box1的left值修改為新值 obj.style[attr] = newValue + "px"; //當box1移動到800px的位置時，停止移動 if(newValue == target) { clearInterval(obj.timer); //調用回調函數 callback && callback(); } }, 30); } /* * 用來獲取任意元素的當前樣式 * 參數： * obj 要獲取樣式的元素 * name 要獲取的樣式的名字 * * 在讀取元素的樣式時，如果元素沒有設置樣式， * 則火狐、Chrome等瀏覽器會自動計算元素的樣式值 * 而IE瀏覽器，有時用不會自動計算，而是返回默認值，比如寬度會返回auto * */ function getStyle(obj, name) { //判斷瀏覽器中是否含有getComputedStyle這個方法 if(window.getComputedStyle) { //支持正常的瀏覽器 return getComputedStyle(obj, null)[name]; } else { //只支持IE return obj.currentStyle[name]; } } /* * 定義一個專門用來向元素中添加class的函數 * 參數： * obj 要添加class屬性的對象 * cn 要添加的class的屬性值 */ function addClass(obj, cn) { //如果元素中有該class則不添加，沒有才添加 if(!hasClass(obj, cn)) { obj.className += " " + cn; } } /* * 創建一個函數檢查一個元素中是否含有指定的class * 如果有，則返回true。否則返回false */ function hasClass(obj, cn) { //創建正則表達式 var reg = new RegExp("http://b" + cn + "http://b"); //返回檢查結果 return reg.test(obj.className); } /* * 用來從指定元素中刪除class值的方法 */ function removeClass(obj, cn) { //要刪除一個class，就是將這個class替換為一個空串 //創建正則表達式 var reg = new RegExp("http://b" + cn + "http://b", "g"); //判斷obj中是否含有這個class if(reg.test(obj.className)) { //將內容替換為空串 obj.className = obj.className.replace(reg, ""); } } /* * 用來切換元素的class的方法 * 如果元素中含有該class，則刪除 * 如果元素中沒有該class，則添加 * */ function toggleClass(obj, cn) { //檢查obj中是否含有cn if(hasClass(obj, cn)) { //有該class，則刪除 removeClass(obj, cn); } else { //沒有該class，則添加 addClass(obj, cn); } } 注：圖片自己找
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
