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

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

 35002  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幻灯片相册特效代码

带缩略图和左右箭头轮播的jquery幻灯片相册特效代码
  幻灯片和轮播图
 45574  591

特效轮播图插件

无边框版轮播插件
  幻灯片和轮播图
 35287  379

jq图文焦点广告轮播代码

jquery图文焦点广告轮播代码是一款jquery.nivo.slider.js图片插件制作图文焦点广告轮播代码。
  幻灯片和轮播图
 47457  523

jQuery幻灯插件

号称世界最棒的jQuery幻灯插件 16种幻灯变化的特效 简单并且配置灵活 体积小并且符合语义
  幻灯片和轮播图
 31905  367

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

        我也这么觉得

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