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

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

 29915  304  查看评论 (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径向SVG滑块轮播

简单反应迅速的滑块,与采用 SVG clipPath 和遮罩元素径向过渡效果。
  幻灯片和轮播图
 23836  351

3D轮播幻灯片

支持多种3D轮播切换特效
  幻灯片和轮播图
 41562  602

jQuery无缝滑动轮播插件

jQuery无缝滑动轮播插件,支持上下左右方向滑动,调用非常简单。
  幻灯片和轮播图
 26286  252

jQuery3D轮播效果

jQuery多个3D环绕滚动效果
  幻灯片和轮播图
 41088  374

讨论这个项目(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

        我也这么觉得

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