轮播图

最新推荐文章于 2024-05-17 14:37:34 发布

guxuehua

最新推荐文章于 2024-05-17 14:37:34 发布

阅读量333

点赞数

分类专栏： js特效文章标签：轮播图

本文链接：https://blog.csdn.net/guxuehua/article/details/56486020

版权

js特效专栏收录该内容

2 篇文章 0 订阅

订阅专栏

html代码

<div class="carousel">
//图片部分
    <div class="imgList" id="imgList">
       <ul>
            <li class="current"><a href="#"><img src="images/sohu/aaa.jpg" alt=""></a>
                <div class="mask"></div>
                <h3>这是第一张图</h3>
            </li>
            <li><a href="#"><img src="images/sohu/bbb.jpg" alt=""></a><div class="mask"></div>
                <h3>这是第二张图</h3></li>
            <li><a href="#"><img src="images/sohu/ccc.jpg" alt=""></a><div class="mask"></div>
                <h3>这是第三张图</h3></li>
            <li><a href="#"><img src="images/sohu/ddd.jpg" alt=""></a><div class="mask"></div>
                <h3>这是第四张图</h3></li>
            <li><a href="#"><img src="images/sohu/eee.jpg" alt=""></a><div class="mask"></div>
                <h3>这是第五张图</h3></li>
        </ul>
    </div>
    //按钮部分
    <div class="btn">
        <span class="btnLeft" id ="left"></span>
        <span class="btnRight" id = "right"></span>
    </div>
    //最下面的小圆点
    <div class="circles" id="circles">
        <ol>
            <li class="current"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
</div>

CSS部分

 *{
            margin:0;
            padding:0;
        }
        ul,ol{
            list-style: none;
        }
        .carousel{
            width: 672px;
            height: 340px;
            margin:80px auto;
            border:1px solid red;
            position: relative;
        }
        .carousel .imgList li {
            height: 320px;
            width: 672px;
            display: none;
        }
        .carousel  .imgList .current{
            display: block;
        }
         .carousel .mask{
            height: 50px;
            width: 100%;
            position: absolute;
            bottom: 20px;
            background-color: #000;
            opacity: .6;
            filter: alpha(opacity = 60);
        }
        .carousel h3{
            position: absolute;
            bottom: 20px;
            height: 50px;
            line-height: 50px;
            font-size: 22px;
            color: #ffffff;
            margin-left: 10px;
            letter-spacing: 3px;
        }
        .btnLeft,.btnRight{

            width: 55px;
            height: 55px;
            position: absolute;
            top:50%;
            margin-top: -37px;
        }
        .btnLeft{
            left: 7px;
            background: url("images/sohu/slide-btnL.png") no-repeat;
        }
        .btnRight{
            right: 7px;
            background: url("images/sohu/slide-btnR.png") no-repeat;
        }
        .circles{
            height: 17px;
            width: 130px;
            position: absolute;
            bottom: 0px;
            left: 50%;
            margin-left: -60px;

        }
        .circles li{
            float: left;
            height: 10px;
            width: 10px;
            margin-right: 10px;
            background-color: #999;
            border-radius: 50%;
        }
        .circles .current{
            background: red;
        }

js部分

var imgLis = document.getElementById("imgList").getElementsByTagName("li");

    var left = document.getElementById("left");

    var right = document.getElementById("right");

    var circleLis =  document.getElementById("circles").getElementsByTagName("li");

    //信号量
    var num = 0;
    //点击左边按钮
    left.onclick = function () {
        reverse();
        changeImg();

    }
    //点击右边按钮
    right.onclick = function () {
        add();
        changeImg();
    }
    //点击最下面的按钮
    for(var i  = 0 ; i < circleLis.length;i++){
        (function (i) {
            circleLis[i].onclick = function () {
                num  = i;
                changeImg();
            }
        }) (i);

    }

    //向上增加函数
    function  add() {
        num++;
        num = num > imgLis.length - 1 ? num % imgLis.length :num ;
    }

    //向下减少函数

    function reverse() {
        num-- ;
        if (num < 0){
            num  = imgLis.length -1;
        }
    }

    //图片变换函数

    function  changeImg() {
        for(var i = 0 ; i < imgLis.length ; i++){
            imgLis[i].className = "";
            circleLis[i].className = "";
         /*   circleLis[i].style.backgroundColor = "#999";*/
        }

        imgLis[num].className = "current";
        circleLis[num].className = "current";
    }