<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> ? ? ? ? <script type="text/javascript">? ? ? ? window.onload=function(){? ? ? ? var container=document.getElementById('container');? ? ? ? var list=document.getElementById('list');? ? ? ? var buttons=document.getElementById('buttons').getElementsByTagName('span');? ? ? ? var zuo=document.getElementById('zuo');? ? ? ? var you=document.getElementById('you');? ? ? ? ? ? ? ? zuo.onclick=function(){? ? ? ? list.style.left=parseInt(list.style.left)+730+'px';? ? ? ? if (list.style.left>-730) {? ? ? ? list.style.left=-2920+'px';? ? ? ? }? ? ? ? }? ? ? ? you.onclick=function(){? ? ? ? list.style.left=parseInt(list.style.left)-730+'px';? ? ? ? if (list.style.left<-2920) {? ? ? ? list.style.left=-730+'px';? ? ? ? }? ? ? ? }? ? ? ? }? ? ? ? </script> <style type="text/css"> *{ margin: 0; padding: 0; text-decoration: none;}? ? ? ? body { padding: 20px;}? ? ? ? #container{? ? ? ? width: 730px;? ? ? ? height: 454px;? ? ? ? border: 3px solid #333;? ? ? ? overflow: hidden;? ? ? ? position: relative;? ? ? ? }? ? ? ? #list{? ? ? ? width: 4380px;? ? ? ? height: 454px;? ? ? ? position: absolute;? ? ? ? z-index: 1;? ? ? ? }? ? ? ? #list img{? ? ? ? float: left;? ? ? ? }? ? ? ? #buttons{? ? ? ? position: absolute;? ? ? ? height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 300px;? ? ? ? }? ? ? ? #buttons span{? ? ? ? cursor: pointer;?? ? ? ? float: left;?? ? ? ? border: 1px solid #fff;?? ? ? ? width: 10px;?? ? ? ? height: 10px;?? ? ? ? border-radius: 50%;?? ? ? ? background: #333;?? ? ? ? margin-right: 5px;? ? ? ? }? ? ? ? #buttons .on { ?background: orangered;}? ? ? ? .arrow{? ? ? ? cursor: pointer;?? ? ? ? display: none;?? ? ? ? line-height: 39px;?? ? ? ? text-align: center;?? ? ? ? font-size: 36px;?? ? ? ? font-weight: bold;?? ? ? ? width: 40px;?? ? ? ? height: 40px; ?? ? ? ? position: absolute;?? ? ? ? z-index: 2;?? ? ? ? top: 180px;?? ? ? ? background-color: RGBA(0,0,0,.3);?? ? ? ? color: #fff;? ? ? ? }? ? ? ? .arrow:hover { background-color: RGBA(0,0,0,.7);}? ? ? ? #container:hover .arrow { display: block;}? ? ? ? #zuo { left: 20px;}? ? ? ? #you { right: 20px;} </style> </head> <body> <div id="container"> <div id="list" style="left:-730px;"> <img ?src="img/icon/banner4.jpg" alt="1"/> <img ?src="img/icon/banner1.jpg" alt="1"/> <img ?src="img/icon/banner2.jpg" alt="2"/> <img ?src="img/icon/banner3.jpg" alt="3"/> <img ?src="img/icon/banner4.jpg" alt="4"/> <img ?src="img/icon/banner1.jpg" alt="5"/> </div> <div id="buttons"> <span index="1" class="on"></span> <span index="2"></span> <span index="3"></span> <span index="4"></span> </div> <a href="javascript:;" id="zuo" class="arrow"><</a> <a href="javascript:;" id="you" class="arrow">></a> </div> </body></html>
關(guān)于圖片輪播為什么還是不能無限輪播。js寫的沒有錯啊
qq_你好哦_0
2016-08-01 17:50:16
