轮播图的制作——前端（竖着的形式）

最新推荐文章于 2024-04-13 14:35:33 发布

qq_28917403

最新推荐文章于 2024-04-13 14:35:33 发布

阅读量1.8k

点赞数 1

分类专栏：前端素材网站文章标签：前端轮播图竖着轮播图

本文链接：https://blog.csdn.net/qq_28917403/article/details/90230103

版权

前端素材网站专栏收录该内容

3 篇文章 0 订阅

订阅专栏

效果图请访问：http://220.178.0.62:8092/xuexi/demo3.html

第一步：下载 http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js

图片下载方法：打开谷歌调试工具，F12。找到图片右键看到 open in new tab 点击打开另存为即可。

轮播图源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul ,li {
            list-style: none;
        }
        /* 首页轮播图 banner-box*/
        .banner-box{width:100%;display:inline-block;padding:10px;}
        .bannerbox{
            width:1050px;height:440px; margin:  0 auto;
        }
        .banner{width:1050px;height:440px;float:left;position:relative;}
        .banner .a-img-ban{position:absolute;top:0;left:0;display:block;z-index:9;width:730px;height:440px;opacity:0;-webkit-transition:opacity .5s linear 0s;-moz-transition:opacity .5s linear 0s;-ms-transition:opacity .5s linear 0s;-o-transition:opacity .5s linear 0s;transition:opacity .5s linear 0s}
        .banner .a-img-ban .img-ban{width: 730px;height: 440px;position:absolute;z-index:9;}
        .banner .img-ban-curr{opacity:1;z-index:10}
        .banner ul{width:300px;float:right;}
        .banner ul li{width:90%;padding:8px;background:#eee;margin-bottom:5px;height:90px ;cursor:pointer;-webkit-transition:background-color .3s linear 0s;-moz-transition:background-color .3s linear 0s;-ms-transition:background-color .3s linear 0s;-o-transition:background-color .3s linear 0s;transition:background-color .3s linear 0s;}
        .banner ul li.curr{background:#f0d0a9;}
        .banner ul li img{width:100%;display:block;height:100%;}

    </style>
</head>
<body>
<div class="banner-box">
    <div class="bannerbox">
        <div class="banner">
            <a class="a-img-ban"> <img class="img-ban" src="images/7.jpg" alt="终于等到你还好我没放弃" title="终于等到你还好我没放弃"> </a>
            <a class="a-img-ban"> <img class="img-ban" src="images/8.jpg" alt="关注我们"> </a>
            <a class="a-img-ban"> <img class="img-ban" src="images/9.jpg" alt="在最好的年纪遇到你,才算没有辜负自己"> </a>
            <a class="a-img-ban"> <img class="img-ban" src="images/10.jpg" alt="终于等到你吧"> </a>
            <ul>
                <li class="li-img"><img src="images/7.jpg" alt="终于等到你还好我没放弃"></li>
                <li class="li-img"><img src="images/8.jpg" alt="关注我们"></li>
                <li class="li-img"><img src="images/9.jpg" alt="在最好的年纪遇到你,才算没有辜负自己"></li>
                <li class="li-img"><img src="images/10.jpg" alt="终于等到你吧"></li>
            </ul>
        </div>
    </div>
</div>
<script>
    $(function () {
        $(".a-img-ban").eq(0).addClass('img-ban-curr');
        $(".li-img").eq(0).addClass('curr');
        var n = 0;
        setInterval(function(){
            if(n >= $('.li-img').length){
                n = 0;
            }
            $(".a-img-ban").eq(n).addClass('img-ban-curr').siblings('.a-img-ban').removeClass('img-ban-curr');
            $(".li-img").eq(n).addClass('curr').siblings('.li-img').removeClass('curr');
            n++;
        },4000)
        $('.li-img').click(function(){
            var num = $(".li-img").index(this);
            $(".a-img-ban").eq(num).addClass('img-ban-curr').siblings('.a-img-ban').removeClass('img-ban-curr');
            $(this).addClass('curr').siblings(".li-img").removeClass('curr');
            n = num;
        });
    });
</script>
</body>
</html>

qq_28917403

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
轮播图的制作——前端（竖着的形式）

效果图请访问：http://220.178.0.62:8092/xuexi/demo3.html第一步：下载http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js图片下载方法：打开谷歌调试工具，F12。找到图片右键看到 open in new tab 点击打开另存为即可。轮播图源码<!DOCTYPE html&...
复制链接

扫一扫