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="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>

如下图:

时间: 2024-11-03 05:24:53

Elastislide插件通过横向传送带方式浏览图片的相关文章

Swift - 使用CollectionView实现图片Gallery画廊效果(左右滑动浏览图片)

1,效果图 (1)图片从左至右横向排列(只有一行),通过手指拖动可以前后浏览图片. (2)视图滚动时,每张图片根据其与屏幕中心距离的不同,显示尺寸也会相应地变化.越靠近屏幕中心尺寸就越大,远离屏幕中心的就逐渐变小. (3)滑动结束后,会有位置自动修正的功能.即将当前最靠近屏幕中点的图片移动到正中央. (4)点击图片则将该图片删除,点击空白处会在最开始的位置插入一张图片.不管新增还是删除都有动画效果. (5)点击导航栏上的"切换"按钮,可以在普通的流式布局和我们自定义的画廊布局间相互切换

web浏览图片支持旋转,缩放功能

浏览图片使用了layer插件,旋转需要引用jquery.rotate.min.js 放大缩小是根据图片等比例缩放,下面是本人写的部分代码:在layer.ext.js这个插件的扩展js文件里需要加上如下代码,实现旋转,缩放功能: //旋转 var value = 0; log.imgtit.find('a').on('click', function () { value += 90; log.bigimg.find('img').rotate({ animateTo: value }) });

Android 自定义Gallery浏览图片

之前写的<Android ImageSwitcher和Gallery的使用>一文中提到我在教室一下午为实现那个效果找各种资料.期间在网上找了一个个人觉得比较不错的效果,现在贴图上来: 其实这个效果使用的知识点就是图像的获取.创建.缩放.旋转.Matrix类.Canvas类等,另外就是自定义的Gallery控件. 相信大家都期待马上上代码了吧,嘻嘻.(注释比较多,相信大家都能看懂.) main.xml: <?xml version="1.0" encoding=&quo

Eclipse安装svn插件的几种方式 转帖....

Eclipse安装svn插件的几种方式 1.在线安装: (1).点击 Help --> Install New Software... (2).在弹出的窗口中点击add按钮,输入Name(任意)和Location(插件的URL),点击OK (3).勾选出现的插件内容,一步步安装即可. 注:目前在线安装svn的版本只有1.6.x和1.8.x地址分别是:http://subclipse.tigris.org/update_1.6.xhttp://subclipse.tigris.org/update

ios学习-制作一个浏览图片的Demo

一.项目要求:制作一个浏览图片的Demo,要求包含夜间模式,以及改变图片大小,能够显示不同的图片描述 二.开发步骤: 1.在storyboard上添加一个空白的View,然后添加”设置“按钮,添加image View,图片序号Label,图片描述Label,更改图片Slider控件. 2.编写sliderValueChanged方法 3.在storyboard再添加一个空白的View,在新增的View上面添加Switch控件,用于夜间模式,添加Slider控件,用于改变图片的大小. 4.编写se

wpf 模拟3D效果(和手机浏览图片效果相似)(附源码)

原文 wpf 模拟3D效果(和手机浏览图片效果相似)(附源码) pf的3D是一个很有意思的东西,类似于ps的效果,类似于电影动画的效果,因为动画的效果,(对于3D基础的摄像机,光源,之类不介绍,对于依赖属性也不介绍.),个人认为,依赖属性这个东西,有百分之五十是为了3D而存在.(自己写的类似于demo的东西)先上图,无图无真相这是demo的整个效果图,可以用鼠标移动,触摸屏也可以手指滑动,图片会移动,然后移动结束,会有一个回弹的判断. <Window x:Class="_3Dshow.Wi

作品2:资源管理器EX(原味浏览图片)

续http://www.cnblogs.com/qingjun1991/p/4971689.html 一直找不到能原汁原味地浏览图片的浏览器,后来我自己做出来了,集成到这个软件 所谓的原味,就是图片中的一个点,放大时这个点变成多个颜色一样的点(用最邻近插值法解决),缩小时这个点不会消失不见(用高质量的双三次插值法解决) .net自带的最邻近插值法达不到我的要求,所以我自己写了一个,缺点是只能倍数放大,但效果很好,我称它为原味法

一款在论坛上看到的JS封装的随机过渡方式的图片切换效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

【iOS开发-3】sandbox沙盒介绍以及如何取得沙盒里面各文件的路径,图片导入方式和图片路径获取

其实每个APP的程序都是单独的一个文件夹,每个APP之间相互之间独立,所以它们的文件夹也是独立的,这个文件夹就是沙盒.沙盒好处,安全.坏处,程序之间彼此共享数据较为困难. (1)如何找到应用程序的沙盒源文件? 一般沙盒源文件都存放在~/Library/Application Support/iPhone Simulator/版本号/Applications/的文件夹中,但是这个Library(中文名叫资源库)文件夹是隐藏的.所以需要方法才能点击进去:在Finder中按CMD+SHIFT+G,然后