欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2023-01-01 14:31:09
1、效果如下图： 2、源码如下： 完毕！ good job! good luck! ......

1、效果如下图：

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

2、源码如下：

<!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">
        <span num="0" class="tabbtn hover"></span>
        <span num="1" class="tabbtn"></span>
        <span num="2" class="tabbtn"></span>
        <span num="3" class="tabbtn"></span>
    </div>    
    <!-- 左右切换按钮 -->
    <div class="arrow prve">
        <span class="slider_left"></span>
    </div>
    <div class="arrow next">
        <span class="slider_right"></span>
    </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[i].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[i].style.display = 'inline';//显示            
            }else{
                images[i].style.display = 'none';//隐藏
            }
        }
        var tabbtn = document.getelementsbyclassname('tabbtn');
        for(var j=0;j<tabbtn.length;j++){//遍历每个按钮
            if( j == index ){
                tabbtn[j].classlist.add("hover");    //添加轮播按钮hover样式
                curindex=j;
            }else{
                tabbtn[j].classlist.remove("hover");//去除轮播按钮hover样式
            }
        }
        
    }
    
</script>
</body>
</html>

 

完毕！

good job! good luck!

 

上一篇： 设计模式之工厂模式（factory pattern）

下一篇： 8个月打磨，一份送给程序员的「分布式系统」合集

推荐阅读