简易幻灯片效果

效果：图片自动切换；左右箭头控制切换；下方指示按钮切换；鼠标悬停暂停切换；三种切换方式：自动切换、箭头、指示按钮随机控制

html+css代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播</title>
    <style>
        *{margin: 0;padding: 0;}
        ul,ol{list-style: none;}
        .clearfix:after{content: ".";height: 0;overflow: hidden;display: block;clear: both;}
        *html .clearfix{height: 1%;}
        .banner{position: relative;max-width: 1920px;width: 100%;overflow: hidden;}
        .bannerContent{position: absolute;left: 50%;}
        .bannerContent li{display: none;}
        .bannerContent li img{}
        .bannerContent li.current{display: block;}
        .bannerBtn{position: absolute;left: 50%;bottom: 25px;display: inline-block;text-align: center;}
        .bannerBtn li{float: left;display: inline-block;width: 15px;height: 15px;border-radius: 100%;background: #ccc;margin-right: 8px;cursor: pointer;}
        .bannerBtn li.current{background: #6f6cc7;}
        .bannerBtn li:last-child{margin-right: 0;}
        .bannerToggle span{position: absolute;top: 50%;margin-top: -25px;width: 50px;height: 50px;background: rgba(0,0,0,.5);color: #ccc;text-align: center;line-height: 50px;font-size: 36px;cursor: pointer;}
        .bannerToggle .bannerPre{left: 50%;}
        .bannerToggle .bannerNext{right: 50%;}
    </style>
</head>
<body>
    <div class="banner" id="banner">
        <ul class="bannerContent clearfix">
            <li><img src="images/image1.jpg" alt=""></li>
            <li><img src="images/image2.jpg" alt=""></li>
            <li><img src="images/image3.jpg" alt=""></li>
            <li><img src="images/image4.jpg" alt=""></li>
            <li><img src="images/image5.jpg" alt=""></li>
<!--
            <li><img src="images/img1.jpg" alt=""></li>
            <li><img src="images/img2.jpg" alt=""></li>
            <li><img src="images/img3.jpg" alt=""></li>
-->
        </ul>
        <div class="bannerToggle">
            <span class="bannerPre">&lt;</span>
            <span class="bannerNext">&gt;</span>
        </div>
        <ul class="bannerBtn">
        </ul>
    </div>
    <script src="js/lunbo.js"></script>
</body>
</html>

js代码：

window.onload=function(){
var banner=document.getElementById("banner");
var bannerContent=banner.getElementsByClassName("bannerContent")[0];
var bannerBtn=banner.getElementsByClassName("bannerBtn")[0];
var bannerLis=bannerContent.getElementsByTagName("li");
var bannerlisNum=bannerLis.length;
var imgWidth=bannerLis[0].getElementsByTagName("img")[0].width;
var imgHeight=bannerLis[0].getElementsByTagName("img")[0].height;
var bannerToggle=banner.getElementsByClassName("bannerToggle")[0];
var bannerPre=banner.getElementsByClassName("bannerPre")[0];
var bannerNext=banner.getElementsByClassName("bannerNext")[0];
var lunboid=0;//记录setTimeout的返回值
for(var i=0;i<bannerlisNum;i++){
    var newbtnLis=document.createElement("li");
    bannerBtn.appendChild(newbtnLis);
}
var btnLis=bannerBtn.getElementsByTagName("li");
bannerLis[0].className="current";
btnLis[0].className="current";

//得到bannerContent盒子的宽度
var width=bannerlisNum*bannerLis[0].getElementsByTagName("img")[0].width;
banner.style.height=imgHeight+"px";
bannerContent.style.width=imgWidth+"px";
bannerContent.style.marginLeft=-Math.round(imgWidth/2)+"px";
var btnWidth=bannerBtn.width;
//alert(btnWidth);
bannerBtn.style.marginLeft=-Math.round(btnWidth/2)+"px";
bannerPre.style.marginLeft=-imgWidth*0.45+"px"
bannerNext.style.marginRight=-imgWidth*0.45+"px"
function lunbo(n){
    switch(n){
        case bannerlisNum-1:
            bannerLis[0].className="current"; 
            bannerLis[n].className="";
            btnLis[0].className="current"; 
            btnLis[n].className="";
            break;
        default:
            bannerLis[n].className="";
            btnLis[n].className="";
            var num=++n;
            bannerLis[num].className="current";            
            btnLis[num].className="current";
            break;
    }
}
//banner图自动轮播
function imgLunbo(){
    for(var i=0;i<bannerlisNum;i++){
        if(bannerLis[i].className.indexOf("current")!=-1){
            lunbo(i);
            break;
        }
    }
    lunboid=setTimeout(imgLunbo,1000);
}
imgLunbo();
//左右箭头切换
//上一张
function previous(){
    for(var i=0;i<bannerlisNum;i++){
        if(bannerLis[i].className.indexOf("current")!=-1){
            if(i==0){
                bannerLis[0].className=""; 
                btnLis[0].className="";
                bannerLis[bannerlisNum-1].className="current"; 
                btnLis[bannerlisNum-1].className="current";
            }else{
                bannerLis[i].className="";
                btnLis[i].className="";
                var num=--i;
                bannerLis[num].className="current";
                btnLis[num].className="current";
            }
            clearInterval(lunboid);
            lunboid=setTimeout(imgLunbo,1000);
            break;
        }
    }
}
//下一张
function next(){
    for(var i=0;i<bannerlisNum;i++){
        if(bannerLis[i].className.indexOf("current")!=-1){
            if(i==bannerlisNum-1){
                bannerLis[i].className=""; 
                btnLis[i].className="";
                bannerLis[0].className="current"; 
                btnLis[0].className="current";
            }else{
                bannerLis[i].className="";
                btnLis[i].className="";
                var num=++i;
                bannerLis[num].className="current";
                btnLis[num].className="current";
            }
            clearInterval(lunboid);
            lunboid=setTimeout(imgLunbo,1000);
            break;
        }
    }
}
bannerPre.onclick=previous;
bannerNext.onclick=next;
//下方指示图标切换
for(var i=0;i<bannerlisNum;i++){
    (function(j){
        btnLis[j].onmouseover=function(){
            for(var n=0;n<bannerlisNum;n++){
                if(n!=j){
                    bannerLis[n].className=""; 
                    btnLis[n].className="";
                }else{
                    bannerLis[j].className="current"; 
                    btnLis[j].className="current"; 
                }
            }
            clearInterval(lunboid);
            lunboid=setTimeout(imgLunbo,1000);
        };
    })(i)
}
bannerContent.onmouseover=function(){
    clearInterval(lunboid);    
}
bannerContent.onmouseout=function(){
    lunboid=setTimeout(imgLunbo,200);
}
}

总结：

1、代码中多次使用document.getElementById和document.getElementsByClassName；可以设置一个通用函数

2、className=""局限性比较大，可以通过+=和replace来控制class的切换

猜你喜欢