JS实现⾃动轮播图效果（js案例）
现在很多⽹站都有轮播图，这篇⽂章主要为⼤家详细介绍了js实现轮播图的完整代码及原理，需要的⼩伙伴可以参考⼀下。
1、轮播图主要功能：
1、图⽚⾃动轮播（主图切换同时下⾯导航图⽚也会跟着变化）
2、⿏标悬停的时候，图⽚轮播停⽌，⿏标离开后继续
3、单击左右按钮切换图⽚
4、⿏标移⼊后左右按钮出现，移出消失
具体效果如下：
⿏标移⼊：
轮播图⽚数量、css样式等，⼩伙伴也可根据⾃⼰的需求做相应调整。
2、具体实现部分
特别重要的是，在我们写任何动态效果之前，我们应该先把静态页⾯写出来，在考虑动态效果的实现。
HTML代码：
<ul class="big_pic">
<div class="prev">
<a class="mark_left" href="#"></a>
</div>
<div class="next">
<a class="mark_right" href="#"></a>
</div>
<div class="text">图⽚1详情</div>
<div class="length">1/6</div>
<li ><img src="images/flash_1.jpg" /></li> <li><img src="images/flash_2.jpg" /></li>
<li><img src="images/flash_3.jpg" /></li>
<li><img src="images/flash_4.jpg" /></li>
<li><img src="images/flash_5.jpg" /></li>
<li><img src="images/flash_6.jpg" /></li>
</ul>
<ul class="small_pic" >
<li><img src="images/flash_1.jpg" /></li>
<li><img src="images/flash_2.jpg" /></li>
<li><img src="images/flash_3.jpg" /></li>
<li><img src="images/flash_4.jpg" /></li>
<li><img src="images/flash_5.jpg" /></li>
<li><img src="images/flash_6.jpg" /></li>
</ul>
</div>
Css样式：
@charset "utf-8";
* {
margin: 0;
padding: 0;
list-style: none;
}
#div1 {
width: 500px;
height: 420px;
margin: 100px auto;
position: relative;
cursor: pointer;
overflow: hidden;
}
#div1 ul.big_pic {
position: relative;
height: 320px;
}
#div1 ul.big_pic div.prev {
opacity: 0;
-webkit-transition: all .3s linear;
transition: all .3s linear;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 50%;
z-index: 100;
}
#div1 ul.big_pic div.prev a.mark_left {
position: absolute;
width: 60px;
height: 60px;
top: 50%;
left: 10px;
background: url("../images/btn.gif");
}
#div1 ul.big_ {
opacity: 0;
-
webkit-transition: all .5s linear;
transition: all .5s linear;
position: absolute;
left: 50%;
top: 0;
bottom: 0;
right: 0;
z-index: 100;
}
#div1 ul.big_ a.mark_right {
position: absolute;
height: 60px;
top: 50%;
right: 10px;
background: url("../images/btn.gif") left -60px;
}
#div1 ul.big_ {
position: absolute;
bottom: 0;
left: 0;
line-height: 26px;
color: white;
background-color: rgba(0, 0, 0, 0.51);
width: 70%;
height: 26px;
z-index: 200;
font-size: 14px;
padding-left: 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#div1 ul.big_pic div.length {
position: absolute;
bottom: 0;
right: 0;
line-height: 26px;
color: white;
background-color: rgba(0, 0, 0, 0.51);
width: 30%;
height: 26px;
z-index: 200;
font-size: 14px;
text-align: center;
}
#div1 ul.big_pic li {
position: absolute;
top: 0;
left: 0;
width: 500px;
height: 320px;
overflow: hidden;
}
#div1 ul.big_pic li img {
width: 100%;
height: 320px;
}
#div1 ul.small_pic {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background-color: #b0b0b0;
height: 100px;
padding: 6px 5px 6px 8px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
}
#div1 ul.small_pic li {
width: calc(500px / 3);
}
#div1 ul.small_pic li img {
width: calc(488px / 3);
height: 100%;
}
#div1 ul.small_pic li:not(:last-child) img {
padding-right: 4px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
接下来是最重要的js代码：
var ElementById('div1');
var oPrv=oDiv.querySelector('div.prev');
var oNext=oDiv.querySelector('');
var oBtnPrev=oPrv.querySelector('a.mark_left'); var oBtnNext=oNext.querySelector('a.mark_right'); var oText=oDiv.querySelector('');
var oLength=oDiv.querySelector('div.length');
var aUl=oDiv.querySelectorAll('ul');
var aBigLi=aUl[0].querySelectorAll('li');
var aSmallLi=aUl[1].querySelectorAll('li'); //获取标签
var zIndex=1,now=0;//zIndex：主图Z轴层级，now：下⾯导航图⽚的下标（从0开始）
now++;
if(now===aSmallLi.length) now=0;//当now等于⼩导航图⽚的长度时，把主图⽚换成第⼀张
opublic();
};
now--;
if(now===-1) now=aSmallLi.length-1;//当now等于-1，把主图⽚换成最后
opublic();
};
for (var i=0;i<aSmallLi.length;i++){
aSmallLi[i].style.opacity=.6;//统⼀设置下⾯导航图⽚透明度为0.6
aSmallLi[0].style.opacity=1;//初始化第⼀个导航图⽚透明度为1
aSmallLi[i].index=i;//为每⼀个导航图加⼀个index的⾃定义属性
aSmallLi[i].onclick=function () {//添加单击事件
now=this.index;//当单击图⽚后，主图切换为对应图⽚
opublic();
};
}
function opublic(){//公共部分
aBigLi[now].style.zIndex=zIndex++;//图⽚切换改变Z轴层级
aBigLi[now].style.height=0;
startMove(aBigLi[now],'height',320);//图⽚⾼度从0->360，实现图⽚动态叠加效果
oText.innerHTML='图⽚'+(now+1)+'详情';
oLength.innerHTML=(now+1)+'/'+aBigLi.length;
for(var i=0;i<aSmallLi.length;i++)
{
startMove(aSmallLi[i], 'opacity', 60);
}
startMove(aSmallLi[now], 'opacity', 100);
if(now===0){
startMove(aUl[1], 'left', 0);
}
else if(now===aSmallLi.length-1){//当当前导航图⽚为最后⼀张时，固定最后⼀张图⽚位置
startMove(aUl[1], 'left', -(now-2)*aSmallLi[0].offsetWidth);
}
else{//下⾯导航图⽚的轮播效果
startMove(aUl[1], 'left', -(now-1)*aSmallLi[0].offsetWidth);
}
}
this.style.opacity=1;
};
this.style.opacity=0;
};
var timer=lick, 3000);//设置⼀个定时器，每3秒钟模拟⼀次右边按钮的单击事件 useenter=function () {//⿏标移⼊后，定时器取消
clearInterval(timer);
};
timer=lick, 3000);
}
function startMove(obj, attr, iTarget)//运动框架，
// obj：运动的对象，attr：运动的属性，iTarget：⽬标值
{
clearInterval(obj.timer);
obj.timer=setInterval(function (){
var cur=0;
if(attr==='opacity')
{
und(parseFloat(getStyle(obj, attr))*100);
}
else
{
cur=parseInt(getStyle(obj, attr));
box sizing
}
var speed=(iTarget-cur)/10;
speed=speed>il(speed):Math.floor(speed);
if(cur==iTarget)
{
clearInterval(obj.timer);
}
else
{
if(attr=='opacity')
{
obj.style.filter='alpha(opacity:'+(cur+speed)+')'; obj.style.opacity=(cur+speed)/100;
}
else
{
obj.style[attr]=cur+speed+'px';
}
}
}, 30);
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论