首页 > 代码库 > Elastislide插件通过横向传送带方式浏览图片
Elastislide插件通过横向传送带方式浏览图片
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="http://www.mamicode.com/css/demo2.css" />
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/elastislide2.css" />
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/custom2.css" />
<script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/js/modernizr.custom.17475.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/js/jquerypp.custom.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/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="http://www.mamicode.com/添加图片" onclick="addImgs();" />
<script>
function addImgs(){
var lists="<li style=‘margin:0 3px;‘><a href=http://www.mamicode.com/‘#‘>"
$("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>
如下图：
Elastislide插件通过横向传送带方式浏览图片