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. 仿站小工具 V6.0

    仿站小工具介绍： 仿站小工具是通过网址下载静态网页的工具。从输入的网址下载html代码，提取出JS、Css、Image、Picture、Flash等静态文件网址，再从下载完好的Css代码中提取出Image静态文件网址，通过网址下载静态文件，根据软件设置好的保存规则，自动修正

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

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

  3. 手机站上离线宝被UC浏览器屏蔽解决方案

    手机站上离线宝被UC浏览器屏蔽解决方案，在手机站上使用离线宝发现在UC浏览器中被屏蔽了。页面上会有很大一块空白，怎么办？ 利用一下代码可以解决离线宝被屏蔽时，去除头部空白。 复制代码 代码如下: document.writeln(script type=\text/javascript\ src=\

  4. JS屏蔽错误代码

    JS屏蔽错误代码，防止网页上的某些JS代码运行错误导致网页无法正常打开的问题。 复制代码 代码如下: script type=text/javascript function killerrors(){ return true; } window.onerror = killerrors; /script 将这段代码添加到其他JS代码之前才能起到效果

  5. Zepto.js手机页面上替代jQuery的最佳Javascript库

    Zepto.js手机页面上替代jQuery的最佳Javascript库，Zepto是现代的浏览器最大程度上与jQuery兼容的API，简约的JavaScript库 ，如果你使用jQuery，你已经知道如何使用的Zepto。 虽然100％的jQuery覆盖率不是一个设计目标， 提供的API相匹配的jQuery的同行 。

随机推荐

  1. 仿站小工具 V6.0

    仿站小工具介绍： 仿站小工具是通过网址下载静态网页的工具。从输入的网址下载html代码，提取出JS、Css、Image、Picture、Flash等静态文件网址，再从下载完好的Css代码中提取出Image静态文件网址，通过网址下载静态文件，根据软件设置好的保存规则，自动修正

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

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

  3. 手机站上离线宝被UC浏览器屏蔽解决方案

    手机站上离线宝被UC浏览器屏蔽解决方案，在手机站上使用离线宝发现在UC浏览器中被屏蔽了。页面上会有很大一块空白，怎么办？ 利用一下代码可以解决离线宝被屏蔽时，去除头部空白。 复制代码 代码如下: document.writeln(script type=\text/javascript\ src=\

  4. JS屏蔽错误代码

    JS屏蔽错误代码，防止网页上的某些JS代码运行错误导致网页无法正常打开的问题。 复制代码 代码如下: script type=text/javascript function killerrors(){ return true; } window.onerror = killerrors; /script 将这段代码添加到其他JS代码之前才能起到效果

  5. Zepto.js手机页面上替代jQuery的最佳Javascript库

    Zepto.js手机页面上替代jQuery的最佳Javascript库，Zepto是现代的浏览器最大程度上与jQuery兼容的API，简约的JavaScript库 ，如果你使用jQuery，你已经知道如何使用的Zepto。 虽然100％的jQuery覆盖率不是一个设计目标， 提供的API相匹配的jQuery的同行 。