自适应的轮播图

最新推荐文章于 2023-03-02 15:21:20 发布

weixin_30872789

最新推荐文章于 2023-03-02 15:21:20 发布

阅读量173

点赞数

原文链接：http://www.cnblogs.com/yangqi1209bokeyuan/p/7016351.html

版权

HTML:

    <body>
        <div class="container">
            <div class="slide_box">
                <!-- 轮播图start -->
                <div class="slide" id="slide3">
                    <ul>
                        <li>
                            <a href="###">
                                <img src="../../images/banner_01.png" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="###">
                                <img src="../../images/banner_01.png" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="###">
                                <img src="http://d10.yihaodianimg.com/N07/M09/26/8B/CgQI0FQFd8-ACrb7AADBtSan3a084000.jpg" alt="">
                            </a>
                        </li>
                    </ul>
                    <div class="dot">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
                <!-- 轮播图end -->
            </div>
        </div>
    </body>

CSS:

.container {position: absolute;top: 0;left: 0;right: 0;bottom: 1.0rem;overflow: auto;-webkit-overflow-scrolling: touch;}
.slide_box {position: relative;}
.slide {width:100%;overflow:hidden;position: relative;}
.slide ul { position: absolute;width:400%;}
.slide li {width:100%;float: left;}
.slide {position: relative;max-width: 100%;overflow: hidden;margin: 0 auto;/*height: 4.50rem;*//**/}
.slide:after {content: '';display: block;width: 100%;padding-top: 50%; }
.slide ul {position: absolute;left: 0;top: 0;width: 100%;height: 100%; }
.slide li {list-style: none;position: absolute;left: 0;top: 0;width: 100%;height: 100%; }
.slide li:first-child {z-index: 1; }
.slide li img { position: absolute;left: 0;top: 0;width: 100%;height: 100%;border: none; }
.slide .dot {position: absolute;width: 100%;text-align: center;bottom: 1.0rem;z-index: 5;font-size: 0; }
.slide .dot span {display: inline-block;width: 6px;height: 6px;margin-left: 5px;border: 1px solid #fff;border-radius: 50%; }
.slide .dot .cur {background-color: #c9caca; }

JS:

<script type="text/javascript" src="../../js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="../../js/swipeSlide.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        // 轮播图
         $('#slide3').swipeSlide({
            continuousScroll:true,
            speed : 3000,
            transitionType : 'cubic-bezier(0.22, 0.69, 0.72, 0.88)',
            firstCallback : function(i,sum,me){
                me.find('.dot').children().first().addClass('cur');
            },
            callback : function(i,sum,me){
                me.find('.dot').children().eq(i).addClass('cur').siblings().removeClass('cur');
            }
        });
    });</script>

引入的JS：

jquery-2.1.4.min.js         swipeSlide.min.js

转载于:https://www.cnblogs.com/yangqi1209bokeyuan/p/7016351.html

weixin_30872789

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
自适应的轮播图

HTML: <body> <div class="container"> <div class="slide_box">  <div class="slide" id="slide3...
复制链接

扫一扫