300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > 轮播图切换圆点html 图片轮播器 点击小圆点按钮实现图片切换。别的都对。哪里错了呀!...

轮播图切换圆点html 图片轮播器 点击小圆点按钮实现图片切换。别的都对。哪里错了呀!...

时间:2024-04-29 21:34:05

相关推荐

轮播图切换圆点html 图片轮播器 点击小圆点按钮实现图片切换。别的都对。哪里错了呀!...

按照阿安老师的《焦点图轮播特效》这部教程,5-1课。一步一步做的。检查了好几遍都没有错呀?为什么就是不执行呢?别的都好了,就是点击小圆点切换到相应的图片不行,代码见69-76行,哪里错了呢?

74行中的animate(offset);是起到什么作用的?html>

焦点轮播图

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

body{padding:20px;}

#container{width:600px;height:400px;border:3pxsolid#333;overflow:hidden;position:relative;}

#list{width:4200px;height:400px;position:absolute;z-index:1;}

#listimg{float:left;}

#buttons{position:absolute;height:10px;width:100px;z-index:2;bottom:20px;left:250px;}

#buttonsspan{cursor:pointer;float:left;border:1pxsolid#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;}

#prev{left:20px;}

#next{right:20px;}

window.οnlοad=function(){

varcontainer=document.getElementById('container');//获取容器

varlist=document.getElementById('list');//获取图片列表的div

varbuttons=document.getElementById('buttons').getElementsByTagName('span');//获取5个小按钮

varprev=document.getElementById('prev');//获取左箭头

varnext=document.getElementById('next');//获取右箭头

varindex=1;//用以确认亮起第几个小圆点或第几张图片

next.οnclick=function(){//鼠标点击右箭头,执行函数

list.style.left=list.offsetLeft-600+'px';//left值等于当前left值减600

if(list.offsetLeft

if(index==5){index=1}//如果随着点击,index值变为5,则回到1,也就是当图片到最后一个时,继续点击则回到第一个小圆点亮起

else{index=index+1;}//index值每次增加1

showbutton();//小圆点亮起函数,详见43行

}

prev.οnclick=function(){//鼠标点击左箭头,执行函数

list.style.left=list.offsetLeft+600+'px';//left值等于当前left值加600

if(list.offsetLeft>-600){list.style.left=-3000+'px'}//如果当前高度大于-600,left值变为-3000,这样实现无尽滚动

if(index==1){index=5}//如果随着点击,index值变为了1,则回到5,也就是当图片到第一个时,继续点击左按钮则回到最后一个小圆点亮起

else{index=index-1;}//index值每次增加1

showbutton();//小圆点亮起函数,详见43行

}

functionshowbutton(){//该函数为实现下方小圆点功能所立,用于34行

for(vari=0;i

if(buttons[i].className=='on'){//如果有小圆点css为on,则其他小圆点都为空

buttons[i].className='';

break;//退出(貌似没意义?)

}

}

buttons[index-1].className='on';//随着每次点击,小圆点亮起

}

for(vari=0;i

buttons[i].οnclick=function(){

varmyindex=parseInt(this.getAttribute('index'));//获取中的index属性,并转换为纯数字,这里不能用this.index,因为index是自定义属性。而getAttribute()即可以获取自带属性和自定义属性

varoffset=-600*(myindex-index);//算出每次点击小圆点的偏移量,(目标值-原始值)*-600

animate(offset);

index=myindex;//切换完了更新当前index值

}

}

}

<

>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。