jQuery轮播插件slider

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

 343357  630  查看评论 (279)
jQuery轮播插件slider ie兼容8

jQuery: 部分

$(function(){
  $('#marquee').bxSlider({
        mode:'vertical', //默认的是水平
        displaySlideQty:1,//显示li的个数
        moveSlideQty: 1,//移动li的个数  
        captions: true,//自动控制
        auto: true,
        controls: false//隐藏左右按钮
  });
}); 

HTML: 结构

<div style="width:450px; height:296px; float:left; overflow:hidden; margin-left:200px;">
  <ul id="marquee">
            <li><img src="img/1.jpg" alt="banner_1" style="width:450px; height:296px;"></li>
            <li><img src="img/2.jpg" alt="banner_1" style="width:450px; height:296px;"></li>
     </ul>
</div>

CSS 样式定义左右按钮

.bx-prev{ width:12px; height:26px; background:#f00;text-indent: -999999px;z-index: 999;  position: absolute; float:left; left:455px; top:110px;}
.bx-next{ width:12px; height:26px;  background:#f00; text-indent: -999999px;z-index: 999;  position: absolute; top:110px;left:-15px;}

============= 以下内容由 旅图灬 提供============

参数说明:

bxSlider 详细配置参数:
bxSlider有很多配置参数,使你能够用参数制作出各种各样的slider效果:

mode: 'horizontal',                 // 'horizontal', 'vertical', 'fade' 定义slider滚动的方向,有三个值可供选择 
infiniteLoop: true,                 // true, false - display first slide after last 无限循环 
hideControlOnEnd: false,            // true, false - if true, will hide 'next' control on last slide and 'prev' control on first 如果设置true,将会在最后一个幻灯片隐藏“next”,在最前面的幻灯片因此“prev” 
controls: true,                     // true, false - previous and next controls 是否显示“previous”和“next”按钮 
speed: 500,                         // integer - in ms, duration of time slide transitions will occupy   速度,单位为毫秒 
easing: 'swing',                    // used with jquery.easing.1.3.js - see http://gsgd.co.uk/sandbox/jquery/easing/ for available options 
pager: true,                        // true / false - display a pager 
pagerSelector: null,                // jQuery selector - element to contain the pager. ex: '#pager' 
pagerType: 'full',                  // 'full', 'short' - if 'full' pager displays 1,2,3... if 'short' pager displays 1 / 4   如果设置full,将显示1,2,3……,如果设置short,将显示1/4 . 
pagerLocation: 'bottom',            // 'bottom', 'top' - location of pager 页码的位置 
pagerShortSeparator: '/',           // string - ex: 'of' pager would display 1 of 4 页面分隔符 
pagerActiveClass: 'pager-active',   // string - classname attached to the active pager link 当前页码的className 
nextText: 'next',                   // string - text displayed for 'next' control 下一页的文字 
nextImage: '',                      // string - filepath of image used for 'next' control. ex: 'images/next.jpg' 可以设置下一页为图片 
nextSelector: null,                 // jQuery selector - element to contain the next control. ex: '#next' 
prevText: 'prev',                   // string - text displayed for 'previous' control 上一页的文字 
prevImage: '',                      // string - filepath of image used for 'previous' control. ex: 'images/prev.jpg' 上一页的图片 
prevSelector: null,                 // jQuery selector - element to contain the previous control. ex: '#next' 
captions: false,                    // true, false - display image captions (reads the image 'title' tag) 是否显示图片的标题,读取图片的title属性的内容。 
 
captionsSelector: null,             // jQuery selector - element to contain the captions. ex: '#captions' 
auto: false,                        // true, false - make slideshow change automatically 幻灯片自动滚动 
autoDirection: 'next',              // 'next', 'prev' - direction in which auto show will traverse 自动滚动的顺序 
autoControls: false,                // true, false - show 'start' and 'stop' controls for auto show 自动滚动的控制键 
autoControlsSelector: null,         // jQuery selector - element to contain the auto controls. ex: '#auto-controls' 
autoStart: true,                    // true, false - if false show will wait for 'start' control to activate  
autoHover: false,                   // true, false - if true show will pause on mouseover 设置鼠标mouseover将会使自动滚动暂停 
autoDelay: 0,                       // integer - in ms, the amount of time before starting the auto show 
pause: 3000,                        // integer - in ms, the duration between each slide transition  过渡时间 
startText: 'start',                 // string - text displayed for 'start' control 开始按钮的文字 
startImage: '',                     // string - filepath of image used for 'start' control. ex: 'images/start.jpg' 开始按钮的图片 
stopText: 'stop',                   // string - text displayed for 'stop' control 停止按钮的文本 
stopImage: '',                      // string - filepath of image used for 'stop' control. ex: 'images/stop.jpg'   停止按钮的图片 
ticker: false,                      // true, false - continuous motion ticker mode (think news ticker) 
                                    // note: autoControls and autoControlsSelector apply to ticker! 
tickerSpeed: 5000,                  // integer - has an inverse effect on speed. therefore, a value of 10000 will  
                                    // scroll very slowly while a value of 50 will scroll very quickly. 
tickerDirection: 'next',            // 'next', 'prev' - direction in which ticker show will traverse 
tickerHover: false,                 // true, false - if true ticker will pause on mouseover 
wrapperClass: 'bx-wrapper',         // string - classname attached to the slider wraper 
startingSlide: 0,                   // integer - show will start on specified slide. note: slides are zero based! 
displaySlideQty: 1,                 // integer - number of slides to display at once 
moveSlideQty: 1,                    // integer - number of slides to move at once 
randomStart: false,                 // true, false - if true show will start on a random slide
相关插件-幻灯片和轮播图

Jquery轮播图

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

可嵌入图片全屏滑动

可嵌入图片视频jQuery全屏滑块
  幻灯片和轮播图
 9863  137

SuperSlidev2.1焦点图幻灯片tab

SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新。 网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解决!
  幻灯片和轮播图
 22508  124

原声 JS + Jquery + 面向对象轮播图

几个效果的轮播图,最后组成个组件效果,可供学习
  幻灯片和轮播图
 19748  91

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

    黄昏雨/:mua 0
    2018/4/18 16:44:11
    求分享呀 240085310@qq.com 回复
    漫樘?光里的剪影 0
    2018/4/18 16:35:38
    IE8报错啊,虽然不影响功能,但是左下角黄色感叹号看着很难受啊 回复
    呆呆小蜗牛 0
    2018/4/16 14:39:50
    求分享 263622331@qq.com 回复
    qzuser 0
    2018/4/13 16:32:53
    1602088199@qq.com,谢谢 回复
    新鲜感 0
    2018/4/8 11:27:17
    有没有大佬分享下 谢谢了 411151066@qq.com 回复
    太阳花 0
    2018/3/23 16:56:10
    为什么要把宽度写死,做自适应不好吗? 回复
    Latty 0
    2018/3/22 15:08:30
    有点贵。。但是想要 回复
    氵水の雪* 0
    2018/3/1 11:11:48
    最蓝的天是他的眼 0
    2018/2/28 10:18:06
    这个插件把数据替换成动态的怎么就点不了左右箭头啦?????
    还有左箭头也不知道为什么显示不了了???
    能帮我解答一下吗??谢谢了。
    回复
    吖钷 0
    2018/2/22 10:49:55
    怎么修改轮播时间呢
        Null0
        2018/3/27 10:52:26
        speed: 500,
    回复
取消回复