如何使用JS+HTML+CSS来实现轮播效果

2020-11-27 来源：欧得旅游网

这篇文章主要为大家详细介绍了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> 
<p id="container"> 
 <p 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"/></p> 
 <p id="buttons"> 
 <span index="1"></span> 
 <span index="2"></span> 
 <span index="3"></span> 
 </p> 
 <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></p> 
</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(); 
};

上面是我整理给大家的，希望今后会对大家有帮助。

在jQuery中如何使用EasyUI window窗口

在JS中如何实现十字坐标跟随鼠标效果

使用Angular4有关图片路径不安全的问题

在Webpack中如何构建Electron应用

显示全文

全部栏目

如何使用JS+HTML+CSS来实现轮播效果