Elastislide插件通过横向传送带方式浏览图片

最新推荐文章于 2021-06-04 01:46:46 发布

weixin_30641999

最新推荐文章于 2021-06-04 01:46:46 发布

阅读量165

点赞数

原文链接：http://www.cnblogs.com/hangun/p/6590852.html

版权

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>

</head>

<body>

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>

如下图：

转载于:https://www.cnblogs.com/hangun/p/6590852.html

weixin_30641999

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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...
复制链接

扫一扫