轮播图(左右滑动型)

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图测试</title>
    <link rel="stylesheet" href="css/main.css">
    <script src="js/main.js"></script>
</head>
<body>
<div class="container">  <!--最大的容器-->
                        <!--让舞台默认显示第一张图片 （第一张左边还有一张 最后一张）-->
    <div class="wrap" style="left:-600px">  <!--存放图片的容器-->
        <img src="image/5.jpg">      <!--多加的图片用于无缝连接-->
        <img src="image/1.jpg">
        <img src="image/2.jpg">
        <img src="image/3.jpg">
        <img src="image/4.jpg">
        <img src="image/5.jpg">
        <img src="image/1.jpg">
    </div>
    <div class="buttons"><!--按钮容器-->
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
    <a href="javascript:;" class="arrow arrow_left">&lt;</a>   <!--左箭头-->
    <a href="javascript:;" class="arrow arrow_right">&gt;</a>    <!--右箭头-->
</div>
</body>
</html>

CSS部分

*{
    margin: 0;
    padding: 0;
}
.container{     /*最大的容器*/
    width: 600px;
    height: 400px;
    position: relative;
    margin: 100px auto 0 auto;      /*上 右 下 左*/
    overflow: hidden;        /*超出隐藏*/
    box-shadow: 0 0 5px black;
}
.container .wrap{      /*存放图片的盒子*/
    width: 4200px;
    height: 400px;
    position: absolute;
    transition: 1s;   /*加过渡效果 但看起来有点怪*/

}
.container .wrap img{
    float: left;
    width: 600px;
    height: 400px;
}
.buttons{          /*按钮容器*/
    /*background-color: #ff7a06;*/
    z-index: 1;
    position: relative;
    bottom: -370px;
    margin: auto;
    width: 160px;
    height: 20px;
}
.buttons ul {
    list-style: none;
}
.buttons ul li{
    float: left;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-left: 10px;
    background-color: #ffffff;
    text-align: center;
}
.buttons ul li:hover{
    cursor: pointer;
}
.buttons ul li.on{  /*组合选择器*/
    background-color: darkgray;
}
/*下面是左右箭头*/
.container .arrow{
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 50%;
   /* background-color: crimson;*/
    font-size: 60px;
    line-height: 60px;
    text-align: center;
    top: 150px;
    color: white;
    display: none;
}
.container:hover .arrow{
    display: block;
}
.container a{
    text-decoration: none;
}
.container .arrow:hover{
    background-color:rgba(169,169,169,0.5);
}
.arrow_left{
    left: 10px;
}
.arrow_right{
    right: 10px;
}

JS部分

window.onload=function () {

    /*左右箭头点击事件*/
    var wrap=document.querySelector(".wrap");
    var arrow_left=document.querySelector(".arrow_left");
    var arrow_right=document.querySelector(".arrow_right");
    var DotsPos=0;        /*点的位置的全局变量*/
    arrow_left.onclick=function () {
        pre_Pic();
    }
    arrow_right.onclick=function () {
        next_Pic();
    }

    function next_Pic(){
        var newLeft;
        if(wrap.style.left==="-3600px"){
            newLeft= -1200;
        }else {
            newLeft=parseInt(wrap.style.left)-600;
        }
        wrap.style.left=newLeft+"px";
        /*判断点的位置*/
        DotsPos++;
        if (DotsPos>4){
            DotsPos=0;
        }
        ShowCurrentDotsPos();
    }
    function pre_Pic(){
        var newLeft;
        if(wrap.style.left==="0px"){
            newLeft= -2400;
        }else {
            newLeft=parseInt(wrap.style.left)+600;
        }
        wrap.style.left=newLeft+"px";
        /*判断点的位置*/
        DotsPos--;
        if (DotsPos<0){
            DotsPos=4;
        }
        ShowCurrentDotsPos();
    }

    
    /*下面五个圆点 选中相应的图片时点变色*/
    var Dots=document.getElementsByTagName("li");
    function ShowCurrentDotsPos() {       /*当前点的位置 变色*/
        for(var i=0;i<Dots.length;i++){
            Dots[i].className="";   /*先清除li的class*/
        }
        Dots[DotsPos].className="on";
    }
    ShowCurrentDotsPos(); /*第一次打开时也需要显示*/

    /*实现自动播放效果*/
    var timer=null;   /*用于存放返回的值*/
    function autoplay() {
        timer=setInterval(next_Pic,5000);
    }
    autoplay();

    /*实现鼠标移入时 暂停自动播放 移出时继续*/
    var container=document.querySelector(".container");
    container.onmouseover=function () {   /*使用onmouseenter不会冒泡*/
        clearInterval(timer);
    }
    container.onmouseout=function () { /*使用onmouseleave不会冒泡*/
        autoplay();
    }
    
    /*实现点击小圆点切换图片*/
    for (var i=0;i<Dots.length;i++){
        (function (i) {             /*即时调用函数写法*/
            Dots[i].onclick=function () {
                if (DotsPos!=i){      /*点击相同的点不执行*/
                    var changePos;
                    changePos=DotsPos-i;       /*假设当前为第四个点  点击第一个点 changePos=3-0 左移3 left加3*600*/

                    /*当前图片为第一张左边一张和第五张右边一张时 点击切换会出bug下面 解决这个bug*/
                    if(DotsPos==0&&wrap.style.left==="-3600px"){    /*当前为第五张右边一张 小圆点为第一个*/
                        /*假设当前为第一个点  点击第二个点 changePos=0-1 -1 其实右移一个就行但是当前为第五张右边一张 所以要左移四个*/
                        changePos=changePos+5;
                    }
                    if(DotsPos==4&&wrap.style.left==="0px"){ /*当前为第一张左边一个 小圆点为第五个*/
                        /*假设当前为第一张图片左边的 小圆点为第五个 点击第四个 changePos=4-3 1 左移一个就行 但是要右移四个 left减600*4*/
                        changePos=changePos-5;
                    }
                    wrap.style.left=(parseInt(wrap.style.left)+changePos*600)+"px";
                    DotsPos=i;
                    ShowCurrentDotsPos();
                }
            }
        })(i);
    } 
}

酸霉汤

发布了18 篇原创文章 · 获赞 0 · 访问量 267

私信关注

轮播图(左右滑动型)

HTML部分

CSS部分

JS部分

猜你喜欢