轮播图(左右滑动型)

最新推荐文章于 2022-08-28 14:16:57 发布

酸霉汤

最新推荐文章于 2022-08-28 14:16:57 发布

阅读量419

点赞数

分类专栏： # JS 文章标签： html css javascript

本文链接：https://blog.csdn.net/iTaylorfan/article/details/104380623

版权

JS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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);
    } 
}

酸霉汤

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
轮播图(左右滑动型)

HTML部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>轮播图测试</title> <link rel="stylesheet" href="css/main.css"> <scr...
复制链接

扫一扫