JS+HTML+CSS实现轮播效果
网络 2017-12-18 1287
本文实例为大家分享了Android九宫格图片展示的具体代码，供大家参考，具体内容如下
1.lunbo.html代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!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代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | 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代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 | 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(); }; |
