• 设为首页
  • 加入收藏
  • 我要投稿
  • 联系站长
  • 网站模板技术交流
当前位置:模板网首页 > 特效插件 > 滚动图片 >  bxCarousel图片无缝滚动正文

bxCarousel图片无缝滚动jQuery插件

作者:网页模板
大小:0.044MB
点击次数:
发布时间:2014-09-19 09:57
分享到:

特效介绍

jQuery无缝滚动基于jQuery的bxCarousel图片无缝滚动插件,一共两种:自动滚动,不带左右按钮的和带左右按钮的,使用非常简单,完美无缝滚动,兼容主流浏览器。

使用方法

1、在head引入下面的js和css代码:
<style type="text/css">
.demo{width:650px;height: 134px;margin: 10px auto;clear: both;position: relative;border:1px solid #d3d3d3}
.bx_wrap {margin-left: 10px;}
.bx_wrap ul img { border: 2px solid #ddd; }
.bx_wrap ul img:hover { border: 2px solid #1774AD; }
.bx_wrap ul li{text-align:center}
.bx_wrap ul li a{font-size:12px; text-decoration:none; color:#1774AD}
.bx_wrap ul li a:hover{text-decoration:none; color:#f30;}
.bx_wrap a.prev {width:20px;height:24px;line-height:24px;outline-style:none;outline-width: 0;position:absolute; top:45px; left:-2px; text-indent:-999em; background: url(img/arr_left.gif) no-repeat;}
.bx_wrap a.next {width:20px;height:24px;line-height:24px; left:626px;position: absolute;top:45px; text-indent:-999em; background:url(img/arr_right.gif) no-repeat;}
</style>
<script type="text/javascript" src="http://www.5imoban.net/download/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="bxCarousel.js"></script>
<script type="text/javascript">
$(function(){
    $('#demo1').bxCarousel({
        display_num: 4,  //展示图片的数量
        move: 1,     //每次滚动移动图片的数量
        auto: true,      //css自适应,自动滚动
        controls: false, //否显示左右滚动按钮图片
        margin: 10,      //css样式
        auto_hover: true //滚动时,鼠标滑上图片时是否停止滚动
        auto_dir: 'prev'  //自动滚动的方向,默认为next,你可以试下prev。
    });
    $('#demo2').bxCarousel({
        display_num: 4,
        move: 4,
        margin: 10
    });
});
</script>
2、html代码在demo里面自己参考,根据自己的需要选择。
  • 本文标签:
  • bxCarousel,图片,无缝,滚动,jQuery,插件,基于,jQuery,
支持全屏的图片相册jQuery插件
支持增删图片数量的JS图片滚动插件