jQuery自定义轮播图插件(原创)

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

 35047  341  查看评论 (11)
分享到微信朋友圈
X
jQuery自定义轮播图插件(原创) ie兼容8

提供丰富的接口,只需要选中一个div,即可调用插件,设置各种属性。

调用代码示例

<div id="banner"></div>
		
<script type="text/javascript">
$("#banner").scrollBanner({
	images : [
		{src:"img/banner1.png",title:"banner1",href:"http://***"},
		{src:"img/banner2.png",title:"banner2",href:"http://***"},
		{src:"img/banner3.png",title:"banner3",href:"http://***"},
		{src:"img/banner4.png",title:"banner4",href:"http://***"}
	],
	scrollTime:1000,
	bannerHeight:"500px",
	iconColor: "#FFFFFF",
	iconHoverColor : "#82C900",
	iconPosition : "center"
});
</script>

插件支持设置的属性接口

images : 接受数组类型,数组的每个值应为对象。对象具有属性: src->图片的路径 title->图片指上后的文字   href->点击图片跳转的页面

scrollTime : 每张图片的停留时间,单位毫秒。 2000

bannerHeight : Banner图的高度.  500px

iconColor : 提示图标的颜色。默认 white

iconHoverColor : 提示图标指上之后的颜色。  默认 orange

iconPosition : 提示图标的位置,可选值left/center/right。 默认center

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

jQuery 3d轮播图

做项目时写的轮播,接手别人的代码时,因问题太多,不兼容ie8,整体重写,利用jQuery的animate来实现兼容性的问题
  幻灯片和轮播图
 32083  400

Jquery轮播图

简洁大气轮播图插件,可控制点击切换或者移至切换。代码逻辑清晰,便于学习。授人以鱼不如授人以渔。
  幻灯片和轮播图
 43278  347
  幻灯片和轮播图
 55255  450

jQuery适合移动设备触摸屏的响应式幻灯片插件

jQuery适合移动设备触摸屏的响应式幻灯片插件
  幻灯片和轮播图
 38930  465

讨论这个项目(11)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    NULL NAME 0
    2018/3/22 20:45:47
    我觉得这个插件,不太完美,图片大小,变了,还要在里面修改
    需要圆心的图标,在里面还要修改
    小型轮播图在里面还有修改样式
    scrollBanner-bannerInner,scrollBanner-banner是什么意思,感觉没啥作用 回复
    BIGBABY? 0
    2017/12/18 13:38:17

      怎么设置成只要三张图片的  新手  求指教

        Allen.J0
        2018/1/20 13:22:04
        只需要在调用的时候把images数组设置成三个对象就可以啦
    回复
    ?? 0
    2017/11/26 15:58:54
    。.. 。 0
    2017/11/1 10:01:53

    看起来不错! 先收藏! 

    回复
    颜得军 0
    2017/10/29 12:22:05
    你好,发现一个小问题,最后一张图片和第一张图片是一样的,从最后一张图片回到第一张图片花了2s时间,从第一张图片再滚动到第二张图片的时候花了2s时间,这样子给人的错觉就像是从第一张图片滚动到第二张图片的时候花了4s时间。 回复
    那儿有阳光??? 0
    2017/10/13 6:57:01
    0可乐0 0
    2017/9/29 8:25:14

    左右切换的的可以显示吗?我预览发现没有

        Allen.J0
        2017/9/30 9:00:25

        没有添加呢……如果需要下一个版本可以加上~~~

    回复
    Allen.J 0
    2017/9/28 16:41:54

    好厉害!!!!!!!!!!!!!!!!!!!!!!

        那儿有阳光???0
        2017/10/13 6:57:33

        我也这么觉得

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复