為什么加了if(){return}后，點(diǎn)按鈕還是會(huì)出現(xiàn)圖片混亂的問(wèn)題
<!DOCTYPE html>
<html>
<head>
<title>焦點(diǎn)輪播圖</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
? ? ? ? ? *{ margin: 0; padding: 0; text-decoration: none;}
? ? ? ? ? body{padding: 50px}
? ? ? ? ? #container{
? ? ? ? ? width: 600px;
? ? ? ? ? height: 400px;
? ? ? ? ? border: 1px solid black;
? ? ? ? ? overflow: hidden;/*將超出容器部分(超出圖片)隱藏*/
? ? ? ? ? position:relative;/*相對(duì)定位*/
? ? ? ? ? }
? ? ? ? ? #buttons{
? ? ? ? ? position: absolute;/*絕對(duì)定位*/
? ? ? ? ? height: 10px;
? ? ? ? ? width: 100px;
? ? ? ? ? z-index: 2;/*設(shè)置元素的堆疊順序*/
? ? ? ? ? bottom: 20px;
? ? ? ? ? left: 250px;
? ? ? ? ? }
? ? ? ? ? #buttons span{
? ? ? ? ? ?border-radius: 50%;
? ? ? ? ? ?width: 10px;
? ? ? ? ? ?height: 10px;?
? ? ? ? ? ?border: 1px solid #a1a1a1;
? ? ? ? ? ?background-color: #dddddd;
? ? ? ? ? ?cursor:pointer;/*設(shè)置鼠標(biāo)移動(dòng)到該元素上時(shí)變化為手指指示*/
? ? ? ? ? ?float: left;
? ? ? ? ? ?margin-right: 5px;
? ? ? ? ? }
? ? ? ? ? #buttons .on{
? ? ? ? ? ? background: orangered;
? ? ? ? ? }
? ? ? ? ? .arrow{
? ? ? ? ? ?background-color:rgba(0,0,1,.3);
? ? ? ? ? ?width: 40px;
? ? ? ? ? ?height: 40px;
? ? ? ? ? ?z-index: 2;
? ? ? ? ? ?position: absolute;
? ? ? ? ? ?text-align: center;
? ? ? ? ? ?font-weight: bold;
? ? ? ? ? ?font-size: 36px;
? ? ? ? ? ?cursor:pointer;
? ? ? ? ? ?top:180px;
? ? ? ? ? ?display: none;
? ? ? ? ? ?line-height: 39px;
? ? ? ? ? ?color: white;
? ? ? ? ? }
? ? ? ? ? .arrow:hover{
? ? ? ? ? background-color: rgba(0,0,0,.7);
? ? ? ? ? }
? ? ? ? ? #container:hover .arrow {?
? ? ? ? ? display: block;
? ? ? ? ? }
? ? ? ? ? #prev{
? ? ? ? ? left: 20px;
? ? ? ? ? }
? ? ? ? ? #next{
? ? ? ? ? right: 20px;
? ? ? ? ? }
? ? ? ? ? #list{
? ? ? ? ? width:4200px;?
? ? ? ? ? height:400px;
? ? ? ? ? position: absolute;
? ? ? ? ? z-index: 1;
? ? ? ? ? }
? ? ? ? ? #list img{
? ? ? ? ? float: left;
? ? ? ? ? } ? ? ? ? ?
</style>
<script type="text/javascript">
window.onload=function(){
? ? ? ? ? ?var list = document.getElementById('list'); ? ? ? ? ? ?
? ? ? ? ? ? var prev = document.getElementById('prev');
? ? ? ? ? ? var next = document.getElementById('next');
? ? ? ? ? ? var buttons=document.getElementById('buttons').getElementsByTagName('span');
? ? ? ? ? ? var index=1;
? ? ? ? ? function turO(){
? ? ? ? ? ? ?for (var i=0;i<buttons.length;i++) {
? ? ? ? ? ? ? if (buttons[i].className=="on") {
? ? ? ? ? ? ? buttons[i].className="";
? ? ? ? ? ? ? break;
? ? ? ? ? ? ?}
? ? ? ? ? ? ?}
? ? ? ? ? ? ?buttons[index-1].className="on"; ? ? ? ? ??
? ? ? ? ? }
? ? ? ? ? function Smove(a){
? ? ? ? ? list.style.left=list.offsetLeft+a+"px";
? ? ? ? ? var newL=list.offsetLeft+a;
? ? ? ? ? if (newL>600) {
? ? ? ? ? list.style.left=-2400+'px';
? ? ? ? ? }
? ? ? ? ? else if(newL<-3600){
? ? ? ? ? list.style.left=-600+'px';
? ? ? ? ? }
? ? ? ? ? }
? ? ? ? ? prev.onclick=function(){
? ? ? ? ? if (index==1) {
? ? ? ? ? ? ? index=5;
? ? ? ? ? }
? ? ? ? ? else{index-=1;
? ? ? ? ? }
? ? ? ? ? turO();
? ? ? ? ? Smove(600);
? ? ? ? ? }
? ? ? ? ? next.onclick=function(){
? ? ? ? ? if (index==5) {
? ? ? ? ? ? ? index=1;
? ? ? ? ? }
? ? ? ? ? else{index+=1;
? ? ? ? ? }
? ? ? ? ? turO();
? ? ? ? ? Smove(-600);
? ? ? ? ? }
? ? ? ? ? for (var i = 0;i<buttons.length;i++) {
? ? ? ? ? buttons[i].onclick=function(){
? ? ? ? ? if(this.className == 'on') {
? ? ? ? ? ? ? ? ? ? ? ? return;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? var newindex=parseInt(this.getAttribute('index'));
? ? ? ? ? var mo=-600*(newindex-index);
? ? ? ? ? Smove(mo);
? ? ? ? ? index=newindex;
? ? ? ? ? turO();
? ? ? ? ? }
? ? ? ? ?}
}
</script>
</head>
<body>
<div id="container">
<div id="list" style="left: -600px;">
<img src="img/5.jpg" alt="1">
<img src="img/1.jpg" alt="1">
<img src="img/2.jpg" alt="2">
<img src="img/3.jpg" alt="3">
<img src="img/4.jpg" alt="4">
<img src="img/5.jpg" alt="5">
<img src="img/1.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>
<span index="5"></span>
</div>
? ? <div>
? ? <a href="javascript:;" id="prev" class="arrow"><</a>
? ? <a href="javascript:;" id="next" class="arrow">></a>
? ? </div>
</div>
</body>
</html>
2016-12-09
這里改一下就好了
function Smove(a){
? ? ? ? ?var newL=list.offsetLeft+a;
? ? ? ? ?list.style.left=newL+'px'
? ? ? ? ?if (newL<-3000) {
? ? ? ? ? list.style.left=-600+'px';
? ? ? ? ?}
? ? ? ? ?else if(newL>-600){
? ? ? ? ? list.style.left=-3000+'px';
? ? ? ? ?}
? ? ? ? ? }
2016-12-09
哦，錯(cuò)了！
2016-12-09
你圖片順序排錯(cuò)了，應(yīng)該是這樣
<img src="img/5.jpg" alt="" title="">
<img src="img/1.jpg" alt="" title="">
<img src="img/2.jpg" alt="" title="">
<img src="img/3.jpg" alt="" title="">
<img src="img/4.jpg" alt="" title="">
<img src="img/5.jpg" alt="" title="">
<img src="img/1.jpg" alt="" title="">