JavaScript banner轮播左右切换圆点点击切换

庞文共 發表於 2019-6-28 19:04:00

JavaScript banner轮播左右切换圆点点击切换

1、效果如下图：
<img src="https://img2018.cnblogs.com/blog/1513806/201906/1513806-20190628190238183-1165209108.jpg" alt="">
2、源码如下：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript banner轮播左右切换圆点点击切换</title>

<style type="text/css">
div,ul,li,a,span,img{margin:0;padding:0;}
#banner {
overflow:hidden;
width:100%;
height:400px;
position:relative;
float:left;
padding-bottom: 10px;
}
#tab>img:not(:first-child){
display:none;
}
.lunbo_btn {
height: 15px;
width: 100%;
margin: 0px auto;
margin-top: -40px;
position: absolute;
z-index: 3;
text-align: center;
}
.lunbo_btn span {
width:14px;
height:14px;
display:inline-block;
background-color:#b4b5b7;
border-radius:50%;
margin:0px 2px;
cursor:pointer;
}
.lunbo_btn span.hover {
background-color:#ffb23c;
}
.arrow {
display: none;
width: 30px;
height: 60px;
background-color: rgba(0,0,0,0.4);
position: absolute;
top: 50%;
margin-top: -30px;
z-index:999;
}
.arrow span {
display: block;
width: 10px;
height: 10px;
border-bottom: 2px solid #fff;
border-left: 2px solid #fff;
}
.slider_left {
margin: 25px 0 0 10px;
transform: rotate(45deg);
}
.prve {
left: 0;
}
.next {
right: 0;
}
.slider_right {
margin: 25px 0 0 5px;
transform: rotate(-135deg);
}
.arrow:hover{background:#444;}
#banner:hover .arrow{display:block;}
</style>

</head>
<body>

<div id="banner">

<div id="tab">
 <img class="tabImg" src="images/banner1.jpg" height="400"/>
 <img class="tabImg" src="images/banner2.jpg" height="400"/>
 <img class="tabImg" src="images/banner3.jpg" height="400"/>
 <img class="tabImg" src="images/banner4.jpg" height="400"/>
</div>

<div class="lunbo_btn">
 
 
 
 
</div>

<div class="arrow prve">
 
</div>
<div class="arrow next">
 
</div>
</div>

<script type="text/javascript">

//轮播图
var curIndex=0;//初始化
var img_number = document.getElementsByClassName('tabImg').length;
var _timer = setInterval(runFn,2000);//2秒
function runFn(){ //运行定时器 
 curIndex = ++curIndex == img_number ? 0 : curIndex;//算法 4为banner图片数量
 slideTo(curIndex);
}

//圆点点击切换轮播图
window.onload = function() { //为按钮初始化onclick事件
 var tbs = document.getElementsByClassName("tabBtn");
 for(var i=0;i<tbs.length;i++){
 tbs.onclick = function() {
 clearInterval(_timer);//细节处理，关闭定时，防止点切图和定时器函数冲突
 slideTo(this.attributes['num'].value);
 curIndex = this.attributes['num'].value
 _timer = setInterval(runFn,2000);//点击事件处理完成，继续开启定时轮播
 }
 }
}

var prve = document.getElementsByClassName("prve");
prve[0].onclick = function () {//上一张
 clearInterval(_timer);//细节处理，关闭定时，防止点切图和定时器函数冲突
 curIndex--;
 if(curIndex == -1){
 curIndex = img_number-1;
 }
 slideTo(curIndex);
 _timer = setInterval(runFn,2000);//点击事件处理完成，继续开启定时轮播
 }

var next = document.getElementsByClassName("next");
next[0].onclick = function () {//下一张
 clearInterval(_timer);//细节处理，关闭定时，防止点切图和定时器函数冲突
 curIndex++;
 if(curIndex == img_number){
 curIndex =0;
 }
 slideTo(curIndex);
 _timer = setInterval(runFn,2000);//点击事件处理完成，继续开启定时轮播
 }

//切换banner图片和按钮样式
function slideTo(index){
 console.log(index)
 var index = parseInt(index);//转int类型
 var images = document.getElementsByClassName('tabImg');
 for(var i=0;i<images.length;i++){//遍历每个图片
 if( i == index ){
 images.style.display = 'inline';//显示 
 }else{
 images.style.display = 'none';//隐藏
 }
 }
 var tabBtn = document.getElementsByClassName('tabBtn');
 for(var j=0;j<tabBtn.length;j++){//遍历每个按钮
 if( j == index ){
 tabBtn.classList.add("hover"); //添加轮播按钮hover样式
 curIndex=j;
 }else{
 tabBtn.classList.remove("hover");//去除轮播按钮hover样式
 }
 }

}

</script>
</body>
</html></pre>
</div>
 
完毕！
good job! good luck!
  
来源：https://www.cnblogs.com/hxun/p/11104367.html

頁: [1]

琼殿技术论坛's Archiver

JavaScript banner轮播 左右切换 圆点点击切换

JavaScript banner轮播左右切换圆点点击切换