JS、HTML、CSS实现轮播效果
程序员文章站
2024-01-05 12:56:16
...
在前端开发中JS、HTML、CSS这三门语言离开谁都无法实现非常好的开发,本文主要为大家详细介绍了JS+HTML+CSS实现轮播效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
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(); };
相关推荐:
以上就是JS、HTML、CSS实现轮播效果的详细内容,更多请关注其它相关文章!
推荐阅读
-
三行css代码实现垂直居中_html/css_WEB-ITnose
-
js实现收缩菜单效果实例代码_javascript技巧
-
JS、HTML、CSS实现轮播效果
-
玩转CSS3(一)CSS3实现页面布局_html/css_WEB-ITnose
-
js实现横向百叶窗效果网页切换动画效果的方法_javascript技巧
-
Nginx实现404页面跳转到任意随机页面_html/css_WEB-ITnose
-
css实现全屏背景_html/css_WEB-ITnose
-
js实现自定义进度条效果
-
精通CSS+DIV网页样式与布局CSS文字效果_html/css_WEB-ITnose
-
如何实现文字下划线长度比文字实际长度长?_html/css_WEB-ITnose