JS+HTML+CSS實現輪播效果

來源：懂視網責編：小OO 時間：2020-11-27 22:24:41

JS+HTML+CSS實現輪播效果

本文實例為大家分享了Android九宮格圖片展示的具體代碼，供大家參考，具體內容如下：1.lunbo.html代碼。<；<。DOCTYPE html>；<；html lang="en">；<；head>；<；meta charset="UTF-8">；<；title>；大輪播<；/title>；<；link rel="stylesheet" type="text/css" href="CSS/lunbo.css"/>；<；script src="JS/lunbo.js" type="text/javascript">；<；/script>；<；/head>；<；body>；<；<。

推薦度：

點擊下載本文 文檔為doc格式

導讀本文實例為大家分享了Android九宮格圖片展示的具體代碼，供大家參考，具體內容如下：1.lunbo.html代碼。<；<。DOCTYPE html>；<；html lang="en">；<；head>；<；meta charset="UTF-8">；<；title>；大輪播<；/title>；<；link rel="stylesheet" type="text/css" href="CSS/lunbo.css"/>；<；script src="JS/lunbo.js" type="text/javascript">；<；/script>；<；/head>；<；body>；<；<。

本文實例為大家分享了Android九宮格圖片展示的具體代碼，供大家參考，具體內容如下

1.lunbo.html代碼：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>大輪播</title> 
 <link rel="stylesheet" type="text/css" href="CSS/lunbo.css"/> 
 <script src="JS/lunbo.js" type="text/javascript"></script> 
</head> 
 
<body> 
<div id="container"> 
 <div id="list" style="left: -1350px;"> 
 <img src="image/banner_3.jpg"/> 
 <img src="image/banner_1.jpg"/> 
 <img src="image/banner_2.jpg"/> 
 <img src="image/banner_3.jpg"> 
 <img src="image/banner_1.jpg"/></div> 
 <div id="buttons"> 
 <span index="1"></span> 
 <span index="2"></span> 
 <span index="3"></span> 
 </div> 
 <a href="javascript:;" id="prev" class="arrow" style="font-size:100px; text-align:center;"><</a> 
 <a href="javascript:;" id="next" class="arrow" style="font-size:100px; text-align:center;">></a></div> 
</body> 
 
</html>

2.CSS/lunbo.css代碼：

body { 
 margin: 0px; 
 padding: 0px; 
 width: 1350px; 
 height: 618px; 
} 
 
a { 
 text-decoration: none; 
} 
 
#container { 
 width: 1350px; 
 height: 618px; 
 overflow: hidden; 
 position: relative; 
 border-top: 1px solid #ac6a0a; 
} 
 
#list { 
 width: 6750px; 
 height: 618px; 
 position: absolute; 
 z-index: 1; 
} 
 
#list img { 
 float: left; 
 width: 1350px; 
 height: 618px; 
} 
 
#buttons { 
 position: absolute; 
 height: 20px; 
 width: 60px; 
 z-index: 2; 
 bottom: 20px; 
 left: 50%; 
} 
 
#buttons span { 
 cursor: pointer; 
 float: left; 
 border: 1px solid #ad6a0a; 
 width: 10px; 
 height: 10px; 
 -webkit-border-radius: 50%; 
 -moz-border-radius: 50%; 
 border-radius: 50%; 
 margin-right: 5px; 
} 
 
#buttons .on { 
 background: orangered; 
} 
 
.arrow { 
 cursor: pointer; 
 display: none; 
 line-height: 100px; 
 text-align: center; 
 width: 40px; 
 height: 40px; 
 position: absolute; 
 z-index: 2; 
 top: 180px; 
 background-color: RGBA(0, 0, 0, 0); 
 color: #fff; 
} 
 
.arrow:hover { 
 background-color: RGBA(0, 0, 0, 0); 
} 
 
#container:hover .arrow { 
 display: block; 
} 
 
#prev { 
 left: 10px; 
 color: #ffffff; 
} 
 
#next { 
 right: 10px; 
 color: #ffffff; 
}

3.JS/lunbo.js代碼：

window.onload = function () { 
 var container = document.getElementById('container'); 
 var list = document.getElementById('list'); 
 var buttons = document.getElementById('buttons').getElementsByTagName('span'); 
 var prev = document.getElementById('prev'); 
 var next = document.getElementById('next'); 
 var index = 1; 
 var len = 3; 
 var animated = false; 
 var interval = 3000; 
 var timer; 
 var size = 1350; 
 
 function animate(offset) { 
 if (offset == 0) { 
 return; 
 } 
 animated = true; 
 var time = 300; 
 var inteval = 10; 
 var speed = offset / (time / inteval); 
 console.log("speed:" + speed); 
 var left = parseInt(list.style.left) + offset; 
 
 var go = function () { 
 if ((speed > 0 && parseInt(list.style.left) < left) || (speed < 0 && parseInt(list.style.left) > left)) { 
 list.style.left = parseInt(list.style.left) + speed + 'px'; 
 console.log(list.style.left); 
 setTimeout(go, inteval); 
 } else { 
 list.style.left = left + 'px'; 
 if (left > -200) { 
 list.style.left = -size * len + 'px'; 
 } 
 if (left < ( -size * len)) { 
 list.style.left = '-' + size + 'px'; 
 } 
 animated = false; 
 console.log("left:" + list.style.left); 
 } 
 } 
 go(); 
 } 
 
 function showButton() { 
 for (var i = 0; i < buttons.length; i++) { 
 if (buttons[i].className == 'on') { 
 buttons[i].className = ''; 
 break; 
 } 
 } 
 buttons[index - 1].className = 'on'; 
 } 
 
 function play() { 
 timer = setTimeout(function () { 
 next.onclick(); 
 play(); 
 }, 
 interval); 
 } 
 
 function stop() { 
 clearTimeout(timer); 
 } 
 
 next.onclick = function () { 
 if (animated) { 
 return; 
 } 
 if (index == len) { 
 index = 1; 
 } else { 
 index += 1; 
 } 
 animate(-size); 
 showButton(); 
 } 
 prev.onclick = function () { 
 if (animated) { 
 return; 
 } 
 if (index == 1) { 
 index = len; 
 } else { 
 index -= 1; 
 } 
 animate(size); 
 showButton(); 
 } 
 for (var i = 0; i < buttons.length; i++) { 
 buttons[i].onclick = function () { 
 if (animated) { 
 return; 
 } 
 if (this.className == 'on') { 
 return; 
 } 
 var myIndex = parseInt(this.getAttribute('index')); 
 var offset = -size * (myIndex - index); 
 
 animate(offset); 
 index = myIndex; 
 showButton(); 
 } 
 } 
 container.onmouseover = stop; 
 container.onmouseout = play; 
 play(); 
};

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

JS+HTML+CSS實現輪播效果

推薦度：

點擊下載本文 文檔為doc格式

標簽：制作輪播實現

熱門焦點

JS+HTML+CSS實現輪播效果

JS+HTML+CSS實現輪播效果

JS+HTML+CSS實現輪播效果

最新推薦

猜你喜歡

熱門推薦