微客导航 » 文章资讯 » 原JS实现banner图的常用功能

原JS实现banner图的常用功能

2024-02-20 10:56:03 275

虽然，用jQuery实现banner图的各种效果十分简单快捷，但是我今天用css+js代码实现了几个banner图的常用功能，效果还不错。

此次，主要想实现以下功能：

1.banner图循环不间断切换

2.通过自制按钮实现指定性banner图的切换

3.通过方向按钮实现banner图左/右定向依次切换

4.当banner图存在onmouseover事件时，停止banner切换，当存在onmouseout时继续切换







#banner{
width:716.8px;
height:537.6px;
background-color:aquamarine;
margin:100pxauto;
position:relative;
font-size:0px;/*清除img图片间的回车符产生的间隔*/
overflow:hidden;
}
#banner#bannerImg{
width:100%;
position:absolute;
top:0px;
left:0px;
white-space:nowrap;/*使这个图片能一行显示*/
transition:all1slinear;
}
#banner#bannerImg.img{
width:100%;
}
#banner#bannerButton{
font-size:16px;
color:white;
position:absolute;
bottom:10px;
left:20px;
}
#banner#bannerButton.Button{
border-radius:9px;
border:none;
outline:none;
cursor:pointer;
background-color:#7FFFD4;
}
#banner#bannerButtonAside.div1{
position:absolute;
right:10px;
top:50%;
margin-top:-32px;
cursor:pointer;
}

#banner#bannerButtonAside.div2{
position:absolute;
left:10px;
top:50%;
margin-top:-32px;
cursor:pointer;
}

1 2 3 4 5 6

varbannerImg=document.getElementById("bannerImg");/*取出img容器的节点*/ varButton=document.getElementsByClassName("Button");/*取出所有的button按钮*/ varnum=0;/*定义全局变量num,控制banner的切换次序*/ varaaa=0;/*定义一个全局变量,用来取定时器函数,并在没有鼠标事件的时候清除定时器*/ /*通过定时器实现banner图的每3000毫秒切换一次的效果的changeStart()函数*/ functionchangeStart(){ aaa=setInterval(function(){ if(num<=6){ bannerImg.style.transition="all1slinear"; bannerImg.style.left=(-716.8)*(num)+"px"; num++; }else{ bannerImg.style.transition="all0slinear";/*消除num=0时,bannerImg移动的过渡效果*/ num=0; bannerImg.style.left=(-716.8)*(num)+"px"; } console.log("哈哈哈继续"); },3000) } changeStart(); /*以下是当鼠标悬浮在banner图上时,图片停止自动切换的changeStop()函数*/ functionchangeStop(){ clearInterval(aaa); console.log("停止他"); } /*以下是点击按钮实现对应banner图切换的change()函数*/ functionbuttonChange(Num){ num=Num+1; bannerImg.style.transition="all0slinear"; bannerImg.style.left=(-716.8)*(Num)+"px"; } /*以下是点击左右两个按钮实现banner图切换的buttonChange()函数*/ functionasideChange(x){/*通过传递形参x,判断往左/往右切换banner图*/ if(num!=6&&x==1){ num++; }elseif(num==6&&x==1){ num=0; }elseif(num!=0&&x==0){ num--; } elseif(num==0&&x==0){ num=5; } bannerImg.style.transition="all0slinear"; bannerImg.style.left=(-716.8)*(num)+"px"; }

但是经过博主的测试，发现程序存在一定的瑕疵，第一张图片的保留时间比其他图片长，而且每次重新开启定时器均存在这个问题。暂时博主还没有比较简单

省事的方法改良他，所以仅供参考思路，以后要用，当然还是jQuery省事啦！

如果存在错误，欢迎朋友们指出，我们一起探讨，改良代码！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

原JS实现banner图的常用功能

热门推荐

随机推荐