自适应轮播图

使用方法：

首先要在页面中引入必要的css和js文件。

    <link rel="stylesheet" type="text/css" href="css/swipeslider.css">
    <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="js/swipeslider.min.js"></script>

 

js:

    <script>
        $(window).load(function() {
            $('#sample_slider').swipeslider();
        });
    </script>

 

html：

    　　　　<div style="width:100%;">
                <figure id="sample_slider" class="swipslider m0">
                    <ul class="sw-slides">
                        <li class="sw-slide">
                              <img src="img/u181.jpg" alt="">
                        </li>
                        <li class="sw-slide">
                             <img src="img/u183.jpg" alt="">
                        </li>
                        <li class="sw-slide">
                            <img src="img/u185.jpg" alt="">
                        </li>
                    </ul>
                </figure>
            </div>

 

 

效果图：

width：1920px

 

width：600px

 

转载于:https://www.cnblogs.com/Harold-Hua/p/5542663.html