Elastislide是一款响应式图像滑动浏览 jQuery 插件。

以下所需要的资源有js文件和css文件，图片：

javascript:

①jquery.elastislide.js

②jquerypp.custom.js

③modernizr.custom.17475.js

④jquery-1.7.min.js【版本可自选】

css：

①custom2.css

②demo2.css

③elastislide2.css

 

网络案列下载地址很多，我在这里下载：https://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/

下载完的demo中图片文件都是直接在html文中固定写好的，但是我想通过自己的选择来显示不同的图片轮播浏览，

网上找了好多都没找到，本人通过下列方式来实现该效果了：

html：

<head>

　　　<link rel="stylesheet" type="text/css" href="css/demo2.css" />
        <link rel="stylesheet" type="text/css" href="css/elastislide2.css" />
        <link rel="stylesheet" type="text/css" href="css/custom2.css" />
        <script type="text/javascript" src="js/jquery-1.7.min.js"></script>
        <script type="text/javascript" src="js/modernizr.custom.17475.js"></script>
        <script type="text/javascript" src="js/jquerypp.custom.js"></script>
        <script type="text/javascript" src="js/jquery.elastislide.js"></script>

</head>

<body>

      <div class="container demo-1" style="min-width:auto;">
            <div class="main" style="width:100%;"></div>
      </div>

      <input value="添加图片" onclick="addImgs();" />

     <script>

       function addImgs(){

　　　　var lists="<li style='margin:0 3px;'><a href='#'><img src='图片地址' style='width:100;height:70px;' /></a></li>"

　　　　$("div.main div.elastislide-wrapper.elastislide-horizontal").remove();
           var ulobj= '<ul id="carousel" class="elastislide-list"><li></li></ul>'
           $("div.main").append(ulobj);

           $('#carousel li').remove();
           $('#carousel').append(lists);
           var carousel = $('#carousel').elastislide();

           carousel.add();

       }

     </script>

</body>

 

如下图：