jquery幻灯片多图轮播效果插件

发布时间: 编辑:WANG 0人评论 4856次浏览 jQuery轮播图插件
直达下载
摘要 : jquery幻灯片轮播效果插件可以实现多图像幻灯片一样的自动轮播效果,可自由设置自动播放,自动播放间隔时间,每张幻灯片的大小,每张图片和上一张的比例,摆放位置等等。
jquery幻灯片轮播效果插件可以实现多图像幻灯片一样的轮播效果,可自由设置自动播放,自动播放间隔时间,每张幻灯片的大小,每张图片和上一张的比例,摆放位置等等。

jquery幻灯片轮播效果图片预览

jquery幻灯片轮播效果图片预览

jquery幻灯片轮播效果浏览器适配

  • 支持Chrome所有版本
  • 支持Firefox所有版本
  • 支持Safari所有版本
  • 支持IE8及以上版本

jQuery插件浏览器支持

jquery幻灯片轮播效果使用教程

属性列表 说明 默认值
width 幻灯片宽度 900
height 幻灯片高度 411
postWidth 第一帧的宽度 658
postHeight 第一帧的高度 411
scale 每一帧的缩放比例 0.8
speed 幻灯片跳转的速度 500
verticalAlign 布局方式(top:上、middle:中、bottom:下) middle
autoPlay 是否自动播放 false
delay 幻灯片自动播放的间隔时间 1000


使用方法是很简单的,首先引入需要的文件

<link rel="stylesheet" href="css/jquery.carousel.css"/>
<script src="js/jquery-2.2.3.min.js"></script>
<script src="js/jquery.carousel.js"></script>

然后编写HTML文件,创建一个div,类名为carousel content-main,在div里面创建一个列表ul,类名为list,ul标签里面放入li标签,li标签里面放入img,如下所示:

<div id="test1" class="carousel content-main">
    <ul class="list">
        <li><img src="img/photo_1.jpg"/></li>
        <li><img src="img/photo_2.jpg"/></li>
        <li><img src="img/photo_3.jpg"/></li>
        <li><img src="img/photo_4.jpg"/></li>
        <li><img src="img/photo_5.jpg"/></li>
    </ul>
</div>

然后在js里面初始化幻灯片就可以了,方法如下:

Carousel.init($(".carousel"));

这样一个幻灯片就完成了,因为demo中的图片大小和默认的参数是一样的,所以这里就没有设置。为了安全起见这里的四个参数一定要设置一下,分别是幻灯片的高、宽,第一帧也就是第一张图片的高、宽。设置方法如下:

$(".carousel").attr("data-setting",'{ "width":900,"height":411,"postWidth":658,"postHeight":658}')

这里是在js中设置的,当然你也可以在div标签中设置,方法如下:

<div class="carousel content-main" data-setting = '{ "width":900,"height":411,"postWidth":658,"postHeight":658}'>
    ...
</div>

注意设置的属性方式一定要是JSON数据,即所有的属性(除数字外)都要加上双引号。如果一张页面中要设置多个幻灯片的话,只要分别设置每个div的参数就可以了,只用初始化一次。

查看更多

jquery幻灯片多图轮播效果插件下载地址

点击下载jquery幻灯片多图轮播效果插件

转载必须注明来自:https://huajiakeji.com/jqueryslider/2020-11/4290.html

WEB端js焦点图轮换图插件myFocus

WEB端js焦点图轮换图插件myFocus

0 人评论 3591 次人浏览 3.0分 3.0 分
myFocus是一个专注于WEB端焦点图轮换图的JS库。该焦点图插件集成了30多种风格图片切换效果,体积小,使用简单,兼容ie6+和所有的主流浏览器。
Google 幻灯片

Google 幻灯片

0 人评论 33574 次人浏览 3.0分 3.0 分
Google 幻灯片是一款可以使用谷歌云硬盘在云端完成幻灯片制作和演示功能的谷歌浏览器插件。
基于Tabs样式的单页多图jQuery轮播图插件下载

基于Tabs样式的单页多图jQuery轮播图插件下载

0 人评论 4471 次人浏览 2.0分 2.0 分
这是一款效果非常酷的Tabs样式单页多图jQuery轮播图插件。该轮播图插件在每个Tab中可以放置多幅图片,每幅图片都可以链接到不同的页面中。该轮播图整体效果时尚大方,使用起来也非常简单。
评论:(0)

已有 0 位网友发表了一针见血的评论,你还等什么?