自学js一个月摸索出来的方法,第一次将我的代码上传到博客上面,方便以后查略总结。
html代码:
<ul id="box">
<li>
<ul id="pic">
<li class="tu"><img src="imgs/1.png" alt=""></li>
<li class="tu"><img src="imgs/2.jpg" alt=""></li>
<li class="tu"><img src="imgs/3.jpg" alt=""></li>
<li class="tu"><img src="imgs/4.jpg" alt=""></li>
</ul>
</li>
<li>
<ul id="btn">
<li class="anniu">1</li>
<li class="anniu">2</li>
<li class="anniu">3</li>
<li class="anniu">4</li>
</ul>
</li>
<p id="btnr">right</p>
<p id="btnl">left</p>
</ul>
当我写完这段html代码的时候,我发现我的代码里面有很多冗余的元素和缺陷:
1.比如上面两个无序列表我都设置的id属性,其实这是没必要的,我们完全可以将其删除,使用父子选择器选着我们的元素。
2.正常网页中的轮播图都图片都是嵌套在a标签内部,我这里并没有将图片嵌套在a标签内部,这会造成某些不支持javascript的用户的浏览器无法正常使用,也就是所谓的没有达到平稳退化的要求。
小结:正常的轮播图大致的结构是这样,当我们遇到实际的问题时,需要做一些变动,且我现在还没有接触到真实的项目,需要学习的也还很多。
css代码:
<style>
ul,li,img,p{
margin: 0;
padding: 0;
list-style: none;
}
img{
width: 400px;
}
#box{
width: 400px;
height: 300px;
position: relative;
margin: 10px auto;
box-shadow: 0 0 10px black;
}
#box li #pic{
width: 100%;
height: 100%;
}
#box li #pic li{
position: absolute;
}
#box li #btn{
width: 100px;
height: 20px;
position: absolute;
left: 150px;
bottom: 20px;
}
#box li #btn li{
float: left;
background: white;
width: 20px;
height: 20px;
border-radius: 50%;
margin-right: 6.67px;
text-align: center;
line-height: 20px;
cursor: pointer;
}
#box li #btn li:last-child{
margin-right: 0;
}
#box p{
width: 60px;
height: 30px;
background: rgba(0,0,0,.5);
position: absolute;
box-shadow: 0 0 10px black;
color: white;
text-align: center;
line-height: 30px;
cursor: pointer;
}
#box p:hover{
background: rgba(0,0,0,0.8);
}
#box p#btnr{
right: 0;
top: 130px;
}
#box p#btnl{
left: 0;
top: 130px;
}
</style>
javascript代码:
<script>
//定义一个中间数(我自己的说法)。
var _index=0;
//定义一个空值,用来中断自动轮播。
var timer=null;
//获取需要使用到的元素:
var anniu=document.getElementsByClassName('anniu');
var tu=document.getElementsByClassName('tu');
var len=tu.length;
var btnr=document.getElementById('btnr');
var btnl=document.getElementById('btnl');
//定义点击事件:当btnr按下时,图片的索引自加1,并且当其与存储图片的数组长度相等时变成0。
btnr.onclick=function(){
clearInterval(timer);
_index++;
if(_index==len){
_index=0;
}
for(var i=0;i<len;i++){
tu[i].style.display="none";
anniu[i].style.background="white";
}
tu[_index].style.display="block";
anniu[_index].style.background="red";
autoplay();
}
//与上一步同理,这一次只不过是自减,当_index==0的时候,_index=len-1.
//这一步与上一步的结构一样,每次点击之前都需要结束自动轮播,当点击时间完成后,调用自动轮播.
btnl.onclick=function(){
clearInterval(timer);
_index--;
if(_index<0){
_index=len-1;
}
for(var i=0;i<len;i++){
tu[i].style.display="none";
anniu[i].style.background="white";
}
console.log(_index);
tu[_index].style.display="block";
anniu[_index].style.background="red";
autoplay();
}
//使用setInterval()方法创建自动轮播效果:
function autoplay(){
//将函数赋值给timer。
timer=setInterval(function(){
//_index自加1。
_index++;
//当_index==len的时候,_index=0。
if(_index==len){
_index=0;
}
//使用for循环,将所有图片设置成none.
for(var i=0;i<len;i++){
tu[i].style.display="none";
anniu[i].style.background="white";
}
//设置当图片的索引值等于_index的时候显示.
tu[_index].style.display="block";
anniu[_index].style.background="red";
},2000);
}
</script>