Home > Article > Web Front-end > How to use JS+HTML+CSS to achieve carousel effect
This article mainly introduces JS HTML CSS to realize the carousel effect in detail. It has a certain reference value. Interested friends can refer to it.
The example of this article shares with you the Android nine-square grid picture. The specific code displayed is for your reference. The specific content is as follows
1.lunbo.html code:
<!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 code:
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 code:
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(); };
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
How to use the EasyUI window in jQuery
How to implement the cross coordinates following mouse effect in JS
Problems with unsafe image paths when using Angular4
How to build Electron applications in Webpack
The above is the detailed content of How to use JS+HTML+CSS to achieve carousel effect. For more information, please follow other related articles on the PHP Chinese website!