JS+HTML+CSS怎么实现轮播效果-创新互联
小编给大家分享一下JS+HTML+CSS怎么实现轮播效果,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
成都创新互联主要从事成都网站设计、成都做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务绵竹,10余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792具体内容如下
1.lunbo.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怎么实现轮播效果”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联成都网站设计公司行业资讯频道,感谢各位的阅读!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
文章标题:JS+HTML+CSS怎么实现轮播效果-创新互联
网站URL:http://pwwzsj.com/article/dhhpip.html