为了账号安全,请及时绑定邮箱和手机立即绑定

到底哪里错了,总是轮播不了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>轮播图效果</title>

<style type="text/css">

*{ margin:0px; padding:0px;text-decoration: none;}

body{ padding:20px;}

#boss{ width:700px; height:400px; position:relative; left:300px; border:3px solid #CF3; overflow:hidden;}

#tupian{ width:4200px; height:400px; position:absolute; z-index:2;}

#tupian img{ float:left;}

#anniu{ cursor:pointer; width:100px; height:10px; z-index: 2; bottom: 20px; left: 350px; margin-left:-50px; position:absolute; }

#anniu span { cursor: pointer; float: left; border: 1px solid #fff; width: 15px; height: 15px; border-radius: 50%; background: #333; margin-right: 5px;}

#anniu .on{ background:rgba(153,102,204,.5)}

.daanniu{ cursor: pointer; display: none; line-height: 60px; text-align: center; font-size: 60px; font-weight: bold; width: 60px; height: 60px;  position: absolute; z-index: 2; top: 180px; background-color: RGBA(0,0,0,.3); color: #fff;}

.daanniu:hover { background-color: RGBA(0,0,0,.7);}

#boss:hover .daanniu{ display: block;}

#zuo{left:20px}

#you{right:20px;}

</style>

<script type="text/javascript">

  window.onload = function () {

            var boss = document.getElementById('boss');

            var tupian = document.getElementById('tupian');

            var anniu = document.getElementById('anniu').getElementsByTagName('span');

            var zuo = document.getElementById('zuo');

            var you = document.getElementById('you');

var index=1;

var donghua=false;

var zidong;

function yuandian(){

for(var q=0;q<=anniu.length;q++){

if(anniu[q].className=='on'){

anniu[q].className='';

break;

};

}

anniu[index-1].className='on';

}

function hanshu(haha){

var newleft=parseInt(tupian.style.left)+ haha;

var time=300; //总时间

var weiyi=10; //位移时间

var weiyiliang=haha/(time/weiyi);//每次位移多少

donghua=true;

function go(){

//weiyiliang<0向左移动,且当前left值大于目标left值时

if(weiyiliang<0&&parseInt(tupian.style.left)>newleft||weiyiliang>0&&parseInt(tupian.style.left)<newleft){

tupian.style.left=parseInt(tupian.style.left)+ weiyiliang+'px';

setTimeout( go , weiyi );

}

else{

donghua=false;

tupian.style.left= newleft + 'px';

if(newleft>-700){

tupian.style.left=-2800+'px';

}

if(newleft<-2800){

tupian.style.left=-700+'px';

}

}

}

go();

}

function play(){

zidong = setInterval(function(){

you.onclick();},3000)

}

function stop(){

clearInterval(zidong);

}

you.onclick = function(){

if(index==4){

index=1;

}

else{

index+=1;

}

yuandian();

if(!donghua){

hanshu(700);

}

}

zuo.onclick = function(){

if(index==1){

index=4;

}

else{

index-=1;

}

yuandian();

if(!donghua){

hanshu(-700);

}

}

for(var w=0;w<=anniu.length;w++){

if(this.className=='on'){

return;

}

anniu[w].onclick=function(){

var indexzhi=parseInt(this.getAttribute('index'));

var jieguo=-700*(indexzhi-index);

if(!donghua){

hanshu(jieguo);

}

index=indexzhi;

yuandian();

}

}

boss.onmouseover=stop;

boss.onmouseout=play;

play();

  }

</script>

</head>


<body>

<div id="boss">

<div id="tupian" style="left:-700px;">

   <img src="网页练习/img/9.jpg" / >

    <img src="网页练习/img/6.jpg" / >

        <img src="网页练习/img/7.jpg" / >

        <img src="网页练习/img/8.jpg" / >

        <img src="网页练习/img/9.jpg" / >

        <img src="网页练习/img/6.jpg" / >

    </div>

    <div id="anniu"> 

    <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="daanniu" >&lt;</a>

<a href="javascript:;" id="you" class="daanniu">&gt;</a>

</div>


</body>

</html>


正在回答

0 回答

for(var q=0;q<=anniu.length;q++)

for(var w=0;w<=anniu.length;w++)

for循环为啥要多那个等于,去掉就好了


0 回复 有任何疑惑可以回复我~
#1

qq_YNG_1 提问者

非常感谢!
2016-04-28 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
焦点图轮播特效
  • 参与学习       65286    人
  • 解答问题       611    个

通过本教程学习您将能掌握非常实用的焦点图轮播特效的制作过程

进入课程

到底哪里错了,总是轮播不了。

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信