HTML5輪播圖全代碼
我要評論輪播圖原理大概是這樣的，假定三張圖片需要做輪播效果，首先需要將這三張圖片并列放置，然后將這個整體并列向左移動，每當一張圖片完整的從顯示框走出，則將這張圖片放置到最后面，循環(huán)往復就可以實現(xiàn)圖片向左（或一個方向）移動。然后，需要有兩個定時器，一個定時器A控制三張圖片整體左移速度，另一個定時器B控制每當一張完整的圖片走進這個顯示框就等待一到兩秒得到更好的用戶體驗。
我這里用三個div框當作輪播圖來演示。
在html的body中添加一個div作為顯示框，然后在這個div內部添加三個子div作為圖片顯示。代碼如下：
<div id="box"> <div id="red" class="slide"></div> <div id="green" class="slide"></div> <div id="blue" class="slide"></div> </div>
頭部添加css樣式：
此時網頁中應該是有一個黑色顯示框div，內部有紅、綠、藍三個div框,三個框從上到下排列。
第一步，需要將三張圖片都并列顯示。
要實現(xiàn)將div挪動，且div比較方便控制每時每刻的位置(移動)，只能使用相對定位，且為方便，三個子div位置移動應該是相對box，所以box應該作為相對的參照點。分別為box和slide代碼添加position屬性：
#box{
width:100px;
height:100px;
border:1px solid black;
position:relative;
}
.slide{
width:100px;
height:100px;
position:absolute;
}
為整個頁面添加onload加載完成事件，當瀏覽器打開并加載完并自動執(zhí)行事件中的代碼塊。這部分js代碼寫在剛才css下面即可，保持同級結構。
<script type="text/javascript">
onload=function(){
var arr = document.getElementsByClassName("slide");
for(var i=0;i<arr.length;i++){
arr[i].style.left = i*100+"px";
}
}
</script>
當頁面加載完全，三個div應該并列在一起。
接下來，需要實現(xiàn)將這三個div整體向左移動，使用定時器，即前面的定時器A。*onload同級下面添加如下代碼：
function LeftMove(){
var arr = document.getElementsByClassName("slide");//獲取三個子div
for(var i=0;i<arr.length;i++){
var left = parseFloat(arr[i].style.left);
left-=2;
var width = 100;//圖片的寬度
if(left<=-width){
left=(arr.length-1)*width;//當圖片完全走出顯示框，拼接到末尾
}
arr[i].style.left = left+"px";
}
}
moveId=setInterval(LeftMove,10);//設置一個10毫秒定時器，并給自己取名
**此時，三個div已經能夠緩慢向左移動。現(xiàn)在需要再開啟一個定時器B，并將A定時器裝入到B定時器中，A的定時器時間間隔應該長于一個div完全走進顯示框的時間，我這里設置為3秒。然后，將A定時器裝入到方法divInterval中，B定時器調用這個方法。且為了用戶體驗效果更好，當一個div完全走入顯示框后，應該等待一段時間，再開是移動。所以在LeftMove方法中，*if判斷中還需關閉moveId這個定時器*，停止此時移動的div定時器。當3秒不到的時間后，定時器B又會開啟一個新的定時器A。**
if處添加一句代碼為：
if(left<=-width){
left=(arr.length-1)*width;//當圖片完全走出顯示框，拼接到末尾
clearInterval(moveId);
}
function divInterval(){
moveId=setInterval(LeftMove,10);//設置一個10毫秒定時器
}
timeId=setInterval(divInterval,3000);//設置一個3秒的定時器。
到這里，輪播圖基本已經實現(xiàn)了。然后，還需要在css樣式中為box添加overflow,將超出顯示框的div隱藏。
#box{
width:100px;
height:100px;
border:1px solid black;
position:relative;
overflow:hidden;}
然后為了解決當鼠標懸停在輪播圖，輪播圖停止輪播效果，需要在box上添加鼠標移入和移出事件。開始標簽：
<div id="box" onmouseover="stop()" onmouseout="start()">
添加js代碼：
function stop(){
clearInterval(timeId);//鼠標停留關閉B定時器
}
function start(){
clearInterval(timeId);//重新打開一個定時前，先關閉之前定時器。
timeId=setInterval(divInterval,2000);//重啟一個定時器
}
當瀏覽器窗口切出或頁面切換到其他頁面一段時間再回來時，輪播效果會有短暫加速（隨切出時間加長而加長）。主要是因為雖然窗口切出去了，定時器依然在執(zhí)行，但頁面卻沒有將效果顯示，所以切回來后會將之前的效果顯示出來而加速輪播圖。所以添加頁面焦點事件：
//頁面失去焦點定時器停止
onblur = function(){
stop();
}
//頁面獲取焦點時重啟定時器
onfocus = function(){
start();
}
全部代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>輪播圖</title>
<style type="text/css">
#box{
width:100px;
height:100px;
border:1px solid black;
position:relative;
overflow:hidden;
}
#red{
background-color:red;
width:100px;
}
#green{
background-color:green;
width:100px;
}
#blue{
background-color:blue;
width:100px;
}
.slide{
width:100px;
height:100px;
position:absolute;
}
</style>
<script type="text/javascript">
onload=function(){
var arr = document.getElementsByClassName("slide");
for(var i=0;i<arr.length;i++){
arr[i].style.left = i*100+"px";
}
}
function LeftMove(){
var arr = document.getElementsByClassName("slide");//獲取三個子div
for(var i=0;i<arr.length;i++){
var left = parseFloat(arr[i].style.left);
left-=2;
var width = 100;//圖片的寬度
if(left<=-width){
left=(arr.length-1)*width;//當圖片完全走出顯示框，拼接到末尾
clearInterval(moveId);
}
arr[i].style.left = left+"px";
}
}
function divInterval(){
moveId=setInterval(LeftMove,10);//設置一個10毫秒定時器
}
timeId=setInterval(divInterval,2000);//設置一個3秒的定時器。
function stop(){
clearInterval(timeId);
}
function start(){
clearInterval(timeId);
timeId=setInterval(divInterval,2000);
}
//頁面失去焦點停止
onblur = function(){
stop();
}
//頁面獲取焦點時開始
onfocus = function(){
start();
}
</script>
</head>
<body>
<div id="box" onmouseover="stop()" onmouseout="start()">
<div id="red" class="slide"></div>
<div id="green" class="slide"></div>
<div id="blue" class="slide"></div>
</div>
</body>
</html>
到此這篇關于HTML5輪播圖全代碼的文章就介紹到這了,更多相關HTML5輪播圖內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
- 這篇文章主要介紹了HTML5+css3：3D旋轉木馬效果相冊，主要運用了perspective和tranlateY這兩個知識點，有需要的可以了解一下。2017-01-03
這篇文章主要介紹了純HTML和CSS實現(xiàn)JD輪播圖效果,需要的朋友可以參考下2018-06-01
html5+css如何實現(xiàn)中間大兩頭小的輪播效果
這篇文章主要介紹了html5+css如何實現(xiàn)中間大兩頭小的輪播效果的相關資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-06
HTML+CSS+JS實現(xiàn)堆疊輪播效果的示例代碼
這篇文章主要介紹了HTML+CSS+JS實現(xiàn)堆疊輪播效果，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-08
本文主要介紹了HTML+CSS實現(xiàn)全景輪播的示例代碼，實現(xiàn)了一個簡單的網頁布局，其中包含了五個不同的盒子，每個盒子都有一個不同的背景圖片，并且它們之間有一些間距，下面就2024-02-02
