JS滚动bxslider的使用

模板网 2014-10-24

1. 详细Demo:http://www.bxslider.com/examples

2、如何使用

在实际中如下引用:

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/jquery.bxslider.js"></script>

bxslider无缝滚动

<script type="text/javascript">

  $(function(){

    $('#marquee').bxSlider({

     mode:'vertical', //默认的是水平

     ticker: true,//自动滚动

     tickerSpeed:1000//tickerSpeed有逆影响速度。 因此,一个价值5000的滚动很慢,而价值50将滚动得很快。

    });

    }); 

</script>

bxslider滚动li

<script type=text/javascript>

$(function(){

  $('#marquee').bxSlider({

        mode:'vertical', //默认的是水平

        displaySlideQty:1,//显示li的个数

        moveSlideQty: 1,//移动li的个数  

        captions: true,//自动控制

        auto: true,

        controls: false//隐藏左右按钮

  });

}); 

</script>-->

3、关于bxSlideer的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_腋臭" style="width:450px; height:296px;"></li>

            <li><img src="img/2.jpg" alt="banner_腋臭" style="width:450px; height:296px;"></li>

     </ul>

</div>

4、关于bxSlideer的左右按钮的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;}

相关文章

  1. 获取QQ信息的几个接口

    可能有的朋友们早就在空间抓到了这些接口,不会的一定要自己抓包啊,IE9版本以前的可以用httpwatch,IE9自带抓包软件(快捷键F12) 本论坛已经发布了登陆空间源代码,其中含有g_tk的计算,关于登陆的不用多说。 在VB中首先登陆一个QQ,计算得到g_tk,然后用G

  2. window.onerror()的详细用法

    window.onerror = function(sMessage,sUrl,sLine){}; onerror函数的三个参数用于确定错误确切的信息,代表的意思依次为:错误信息;发生错误的文件;发生错误的行号。 示例: 复制代码 代码如下: SCRIPT window.onerror=fnErrorTrap; function fnErrorTrap(s

  3. 几种常用的医院地图API接口地址—百度地图

    几种常用的医院地图API接口地址,医疗网站上经常使用的来院路线地图,调用第三方平台提供的地图接口,下面是医疗模板库为大家收集整理的几种常用的地图API接口。 1、百度地图: 网址: http://api.map.baidu.com/lbsapi/creatmap/index.html 2、搜狗地图:

  4. CSS让图片垂直居中的几种技巧

    在网页设计过程中,有时候会希望图片垂直居中的情况。而且,需要垂直居中的图片的高度也不确定,这就会给页面的布局带来一定的挑战。下面总结了一下,曾经使用过的几种方法来使图片垂直居中,除了第一种方法只限于标准浏览器外,另外两种方法的兼容性还不错

  5. 假503错误页面,伪装503错误,503.js代码下载

    在一些特殊情况下,我们需要将我们的网站展现给访客看时是打不开的状态,但是并不希望关闭网站,因为直接关站,会影响搜索引擎的收录。 那么利用下面提供的代码就可以轻松实现这种需求。 代码打包下载: 503.js代码下载 压缩包中主要文件: 503.html 复制代

随机推荐

  1. 获取QQ信息的几个接口

    可能有的朋友们早就在空间抓到了这些接口,不会的一定要自己抓包啊,IE9版本以前的可以用httpwatch,IE9自带抓包软件(快捷键F12) 本论坛已经发布了登陆空间源代码,其中含有g_tk的计算,关于登陆的不用多说。 在VB中首先登陆一个QQ,计算得到g_tk,然后用G

  2. window.onerror()的详细用法

    window.onerror = function(sMessage,sUrl,sLine){}; onerror函数的三个参数用于确定错误确切的信息,代表的意思依次为:错误信息;发生错误的文件;发生错误的行号。 示例: 复制代码 代码如下: SCRIPT window.onerror=fnErrorTrap; function fnErrorTrap(s

  3. 几种常用的医院地图API接口地址—百度地图

    几种常用的医院地图API接口地址,医疗网站上经常使用的来院路线地图,调用第三方平台提供的地图接口,下面是医疗模板库为大家收集整理的几种常用的地图API接口。 1、百度地图: 网址: http://api.map.baidu.com/lbsapi/creatmap/index.html 2、搜狗地图:

  4. CSS让图片垂直居中的几种技巧

    在网页设计过程中,有时候会希望图片垂直居中的情况。而且,需要垂直居中的图片的高度也不确定,这就会给页面的布局带来一定的挑战。下面总结了一下,曾经使用过的几种方法来使图片垂直居中,除了第一种方法只限于标准浏览器外,另外两种方法的兼容性还不错

  5. 假503错误页面,伪装503错误,503.js代码下载

    在一些特殊情况下,我们需要将我们的网站展现给访客看时是打不开的状态,但是并不希望关闭网站,因为直接关站,会影响搜索引擎的收录。 那么利用下面提供的代码就可以轻松实现这种需求。 代码打包下载: 503.js代码下载 压缩包中主要文件: 503.html 复制代