jquery幻灯片轮播效果

所属分类:媒体-幻灯片和轮播图

 6408  28  查看评论 (6)
jquery幻灯片轮播效果 ie兼容8

使用方法

下面是一些基本参数

属性列表说明默认值
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的参数就可以了,只用初始化一次。

相关插件-幻灯片和轮播图

背景平铺的幻灯片插件FourBoxes

展示了如何创建三种切换效果。使用 3D 转换、 切换和动画效果,目的是要实现平滑的过度效果并添加一些变化。
  幻灯片和轮播图
 12181  35

55bbs首页轮播图效果

jQuery实现55bbs首页轮播图效果
  幻灯片和轮播图
 7463  44

缩略图预览

在本教程中我们将使用显示的每个图像作为一个小小的缩略图预览的 jQuery 创建一个图像画廊。想法是将鼠标悬停在滑块点并使有关缩略图幻灯片到预览窗口。
  幻灯片和轮播图
 12157  21

精美的轮播图插件myFocus

myFocus轮播图插件可以选择袭击喜欢的样式及风格
  幻灯片和轮播图
 7511  41

讨论这个项目(6)回答他人问题或分享插件使用方法奖励jQ币

    笨蛋熊蛋蛋 0
    2017/3/21 17:08:45
    想知道这个插件是因为什么原因不能兼容ie7的 回复
    。磐石 1
    2017/1/16 16:18:03

    我曹~过滤了代码!写了好多!!!!简单说下,就是两种图情况下就有BUG,在js文件中找到setPostOther函数,找到

    lh = rightItem.last().height();

    代码,下面新增

    if(rightItem.length==0){
        lh=this.settings.postHeight-80;
    }

    判断即可,就能显示两张图了!希望这次没有被过滤!

    回复
    。磐石 0
    2017/1/16 15:47:46

    作者在吗?在线沟通

    回复
    。磐石 0
    2017/1/16 15:47:08
    SiriBen 0
    2017/1/11 10:01:56

    下载了 ,支持鼓励下,效果还是比较流畅的,但是感觉独特性不是太强

        我与世界只差一个你0
        2017/1/11 14:01:05
        恩呢
    回复
取消回复