HTML+CSS+JQ实现轮播图

最新推荐文章于 2024-12-16 10:55:03 发布

不像话i

最新推荐文章于 2024-12-16 10:55:03 发布

阅读量463

点赞数 1

文章标签： css html html5 jquery

本文链接：https://blog.csdn.net/xiaoxiao2223/article/details/120620598

版权

运用HTML+CSS+JQ实现轮播图，这里的轮播图的轮播方式是自动每隔一段时间向左移动一张图，循环滚动（还有变换透明度来实现轮播的），左右箭头按钮也可以切换图片，并且也可以点击小圆点切换图片。

轮播图效果展示：

完整代码如下：

1.index.html

设置图片展示的div，还有小圆点div，设置默认第一个小圆点显示，小圆点的背景变色原理是给小圆点添加一个类名，当轮到这张图片时添加类名，其他的小圆点不添加类名。图片显示原理是：设置图片默认为隐藏或none，当轮到这个图片显示是则开放这个图片的显示，其他的图片为隐藏。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <link rel="stylesheet" href="css/banner.css">
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/banner.js"></script>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1903309_36ckhpth40m.css">
</head>
<body>
    <div class="banner">
        <ul class="ul_list">
            <li><img src="img/1.jpg" alt=""></li>
            <li><img src="img/2.jpg" alt=""></li>
            <li><img src="img/3.jpg" alt=""></li>
            <li><img src="img/4.jpg" alt=""></li>
            <li><img src="img/5.jpg" alt=""></li>
        </ul>
        <div class="num">
            <span class="on"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <a href="javascript:;" class="prev"><i class="iconfont icon-qiehuanqizuo"></i></a>
        <a href="javascript:;" class="next"><i class="iconfont icon-qiehuanqiyou"></i></a>
    </div>
</body>
</html>

2.banner.css

*{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
}
.banner{
    overflow: hidden;
    width: 790px;
    height: 340px;
    margin: 100px auto;
    position: relative;
}
.banner ul{
    width: 3950px;/*5张图片的宽度，也可以写成500%*/
    height: 340px;
    position: absolute;
}
.banner li{
    list-style-type: none;
    float: left;
    width: 790px;
    height: 340px;
}
/*如果图片大小有问题*/
/*.banner img{
    width: 100%;
    height: 100%;
}*/
.banner .num{
    width: 100%;
    height: 20px;
    font-size: 0px;
    position: absolute;
    left: 0;
    bottom: 10px;
    text-align: center;
}
.banner .num span{
    display: inline-block;
    width: 15px;
    height: 15px;
    margin: 0 8px;
    background-color: #fff;
    border-radius: 50%;
    cursor: pointer;
    transition: all .3s;
}
/*向左向右箭头*/
.banner .prev{
    display: block;
    width: 40px;
    height: 74px;
    background-color: rgba(0,0,0,0.2);
    color: rgba(255,255,255,0.4);
    position: absolute;
    top: 50%;
    margin-top: -37px;
    left: 0;
    text-align: center;
    transition: background-color .3s;
}
.banner .next{
    display: block;
    width: 40px;
    height: 74px;
    background-color: rgba(0,0,0,0.2);
    color: rgba(255,255,255,0.4);
    position: absolute;
    top: 50%;
    margin-top: -37px;
    right: 0;
    text-align: center;
    transition: background-color .3s;
}
.banner .prev i,
.banner .next i{
    font-size: 30px;
    line-height: 74px;
    transition: background-color .3s;
}
.banner .prev:hover,
.banner .next:hover{
    background-color: rgba(0,0,0,0.5);
    color: #fff;
}
.banner .num span:hover{
    background-color: #ccc;
}
.banner .num span.on{
    width: 30px;
    height: 15px;
}

3.banner.js

设置轮播图动画效果，封装play函数，利用定时器自动向左播放下一张，切换图片。

/*轮播图js*/
/*封装play函数，利用定时器自动向左播放下一张*/
$(function () {
    var timer = null;
    var liW = $(".banner ul li:first").innerWidth();//求一个li的宽度
    var n = 0;//用来管理给第几个span添加类.on
    timer = setInterval(function () {
        /*
            1.先将ul向左移动一个li的宽度，再将第一个li带出去
            2.在执行完1后(形成一个动画队列)，将ul的left回归到0，再将带出去的li追加回ul的最后
        */
        play();
    },2000)
    function play() {
        $(".banner ul").animate({left: -liW},function () {/*回调函数*/
            $(this).css("left",0).find("li:first").appendTo(this);
        })
        n++;
        if(n>4){/*if(n>$(".banner ul li").length)-1*/   /*$(".banner ul li").length)表示li的个数*/
            n = 0;
        }
        $(".banner .num span").eq(n).addClass("on").siblings().removeClass("on");
    }
    /*当鼠标移动到轮播图区域，轮播暂停*/
    $(".banner").hover(function () {
        clearInterval(timer);
    },function () {
        timer = setInterval(function () {
            play();
        },2000)
    })
    /*点击next向右箭头*/
    $(".next").click(function () {
        play();
    })
    /*点击prev向左箭头*/
    $(".prev").click(function () {
        /*
            看当前显示的图片前面的
            1.先把ul往左移出一个li的宽度，同时，将最后一个li追加到ul最前头
            2.执行动画：ul的left变为0，将最后一个li带回
        */
        /*$(".banner ul").css("left",-liW).find("li:last").prependTo(this);*//*此处不能用this,当前this指的是prev按钮*/
        $(".banner ul").css("left",-liW).find("li:last").prependTo(".banner ul");
        $(".banner ul").animate({left:0})
        /*解决点击prev时，span跟着一起变化*/
        n--;
        if(n<0){
            n = 4;/*n = $(".banner ul li").length)-1*/
        }
        $(".banner .num span").eq(n).addClass("on").siblings().removeClass("on");
    })
    /*点击span进行切换
       当前轮播到第几张，放在n中存储，当点击span时，会得到span的index值
       1.判断得到的index值是大于n还是小于n
       如果小于n：通过for循环执行n到index的次数(不包括index,++)的向左循环切换效果
       如果大于n：通过for循环执行n到index的次数(不包括index,--)的向右循环切换效果
       2.将index赋值给n，进行span的切换
    */
    $(".banner .num span").each(function (index) {/*用each遍历*/
        $(this).click(function () {
            if(n < index){
                for(var i = n;i<index;i++){
                    $(".banner ul").animate({left: -liW},100,function () {/*回调函数*/
                        $(this).css("left",0).find("li:first").appendTo(this);
                    })
                }
            }else if(n>index){
                for(var i = n;i>index;i--){
                    $(".banner ul").css("left",-liW).find("li:last").prependTo(".banner ul");
                    $(".banner ul").animate({left:0},100);
                }
            }
            n = index;
            $(".banner .num span").eq(n).addClass("on").siblings().removeClass("on");
        })

    })

})