有左右按钮的轮播图

2019年04月01日| 作者:策策| 浏览:266次


今天用纯JS代码做了一个有左右按钮的轮播图,用都是基础知识,非常简单,主要是理清思路


QQ图片20190401200219.png


正如上图一样,有左右按钮切换图片,并且有过渡效果,可以尝试一下


HTML:


<div id="change">
<ul id="imgbox">
<li><a href="#"><img src="1.png" alt=""/></a></li>
<li><a href="#"><img src="2.png" alt=""/></a></li>
<li><a href="#"><img src="3.png" alt=""/></a></li>
<li><a href="#"><img src="4.png" alt=""/></a></li>
<li><a href="#"><img src="5.png" alt=""/></a></li>
</ul>
<a href="javascript:imgleft();" class="imgleft">&lt;</a><a href="javascript:imgright();" class="imgright">&gt;</a>
</div>


这是轮播图的结构,通过position来利用left切换图片位置


CSS:


        *{margin:0;padding:0;}
        #change{
            width:200px;
            height:140px;
            overflow:hidden;
            position:relative;
            box-shadow: 0 0 10px #000;
        }
        #imgbox{
            width:1000px;/* 宽设置为所有图片横排之后的总宽度 */
            height:140px;
            list-style-type:none;
            position:absolute;
            left:0;/* 初始位置为0 */
            transition:.5s;
        }
        #imgbox li{
            float:left;
        }
        #change>a{
            width:25px;
            height:25px;
            line-height:25px;
            position:absolute;
            top:56px;
            font-size:20px;
            color:#fff;
            text-decoration:none;
            text-align:center;
            background-color:rgba(0,0,0,.8);
        }
        .imgleft{
            left:0;
        }
        .imgright{
            right:0;
        }


最外层的盒子利用了overflow来隐藏超出去的部分,在学习中可以尝试先将overflow属性去掉,这样思路更加清晰一些

最后呢,便是纯JS代码了。


JS:


var imgbox=document.getElementById("imgbox");
var index=0;//设置图片的初始位置
function qh(){
if(index == -800){//判断,图片没有时的位置
index=0;//位置返回到0
}
else{
index-=200;//不然-200px的位置
}
imgbox.style.left=index+"px";//可视图片的位置
}
setInterval("qh()",4000);//让图片动起来,每4秒
function imgleft(){//向左切换函数
if(index==0){//判断当图片位置是否超出最大值
index=-800;
imgbox.style.left=index+"px";
}
else{
imgbox.style.left=(index=index+200)+"px";
}
}
function imgright(){//向右切换函数
if(index==-800){//判断当图片位置是否超出最小值
index=0;
imgbox.style.left=index+"px";}
else{
imgbox.style.left=(index=index-200)+"px";
}
}


好了,基本就是这样,方法有很多种,可以借鉴这种方法开拓更多的方法。


_(´ཀ`」∠)_加班

~~~~~


文章标签:javascript

本文选自策策的原创文章,转载请注明内容来源:CeceBlog(https://cecebk.cn/post/16.html)

评论:




作者动态
制作主题,网站,设计,收徒 联系站长
标签列表