Elastislide插件通过横向传送带方式浏览图片
Posted 清河01
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Elastislide插件通过横向传送带方式浏览图片相关的知识，希望对你有一定的参考价值。
Elastislide是一款响应式图像滑动浏览 jQuery 插件。
以下所需要的资源有js文件和css文件，图片：
①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>
如下图：
以上是关于Elastislide插件通过横向传送带方式浏览图片的主要内容，如果未能解决你的问题，请参考以下文章
如何让基于html5 canvas的图表插件chart.js中的柱状图形横向显示