自适应的轮播图
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