基于jquery轮播图插件(简单实现)(原创)

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

 11716  34  查看评论 (16)
基于jquery轮播图插件(简单实现)(原创) ie兼容8

使用方法

发布时间:2018-1-11 1:01

只需要引用以下文件

<script type="text/javascript" src="./scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="./scripts/carousel.js"></script>

调用方法

$(".carousel-content").carousel({
	carousel : ".carousel",//轮播图容器
	indexContainer : ".img-index",//下标容器
	prev : ".carousel-prev",//左按钮
	next : ".carousel-next",//右按钮
	timing : 5000,//自动播放间隔
	animateTime : 800,//动画时间
	auto : true,//是否自动播放
});

引入插件并简单配置即可使用!

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

jQuery自适应滑块轮播图插件zpSlide

zpSlide滑块集轮播图幻灯片,滑块集轮播图个数可自定义,并完全自适应于手机端、ipad、电脑端
  幻灯片和轮播图
 9098  25

针对移动设备的手动切换插件

该插件可以将浏览器中的元素集合像卡片一样通过手势切换,在电脑和移动设备上均可使用。
  幻灯片和轮播图
 12256  48

基于roundabout.js的3d倾斜轮播

jQuery.roundabout.js制作CSS3图片倾斜层叠切换效果代码
  幻灯片和轮播图
 15751  209

HTML5全屏动画幻灯片切换

超炫酷HTML5响应式全屏幻灯片切换
  幻灯片和轮播图
 5064  49

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

    余空。 0
    2018/6/11 13:32:45
    css样式怎么写的 回复
    柒晕のMEMORY 0
    2018/5/4 10:47:02
    我的也是要在同一个页面中多次调用轮播,然后和上面那哥们一样,只有最后一个能轮播,前面都停了,求教怎么解决啊 回复
    gdjy_sp 0
    2018/5/2 15:07:49
    同个页面多个轮播怎么使用? 回复
    120度胡萝卜 0
    2018/3/20 0:35:00
    怎么让图片自适应屏幕
        我只有你一个吖0
        2018/3/30 19:41:43
        调css样式
    回复
    小龙龙爱科科 0
    2018/3/8 19:25:30
    (".carousel-content").是什么啊?
        我只有你一个吖0
        2018/3/15 12:32:38
        轮播图容器
    回复
    li55416207 0
    2018/3/7 21:28:00
    大牛,这代码给力啊 回复
    以后养条狗,名叫前女友 0
    2018/1/31 17:15:25

    点击闪的一下怎么解决

    回复
    会飞的猪cc 0
    2018/1/27 11:56:29

    你好,我一个页面需要2个轮播图,然后第二可以自动播放,第一个不能自动播放,怎么解决?

    回复
    ┽?初、夏ミ 0
    2018/1/26 11:18:59

    下面那个数字 你用了 justify-content: center;    justify-content: center;在ie9上不兼容,不居中,我用了margin-left

        我只有你一个吖0
        2018/3/16 13:12:07
        是的,IE9以下不支持弹性盒子 flex
    回复
    唐大仙 0
    2018/1/21 9:40:17

    请问下标的1 2 3 4 5 应该怎么去掉啊?

        骚年,努力吧!!!0
        2018/1/21 10:40:52

        找到那个代码,删掉数字不就行了

        microsoftvs0
        2018/1/21 11:07:49
        .img-index{display: none;}
        我只有你一个吖1
        2018/1/22 13:29:10

        你好,在源码carousel.js中把下列代码

        for(var i = 1;i <= list.length;i++){
        	$(indexContainer).append("<li>"+i+"</li>")
        }

        修改为

        for(var i = 1;i <= list.length;i++){
        	$(indexContainer).append("<li></li>")
        }

        就没有数字了

    回复
取消回复