图片水平滚动插件实例

      最近做个商品详情页面，页面需要使用图片水平滚动，后面找了个jquery插件“bxCarousel.js”，感觉挺轻巧，但是只能实现水平滚动。

      经过使用，对该插件做了些修改，对于width、height、border建议在列表UL中的li 或 a 或img三个中设置内行样式或属性，这样可以减少很多麻烦。比如jquery的outerWidth可能获取不到border的宽度，甚至获取不到width，我认为这跟 js执行顺序有关，.bx_wrap .bx_container两个div是动态生成，而框架的元码 以下将贴出该插件源码var ow = li.outerWidth(true);获取li宽度是在这两个div之前，而文中却用了这两个div的class去定位li的样式，这导致获取样式在前，设置样式在后的。

      css源码，html源码，并会对固定写法做特别说明。

 

 

//标示做了修改的，请跟源插件比较。
(function($) {
    $.fn.bxCarousel = function(options) {
        var defaults = {
            move: 4,
            display_num: 4,
            speed: 500,
            margin: 0,
            auto: false,
            auto_interval: 2000,
            auto_dir: 'next',
            auto_hover: false,
            next_text: 'next',
            next_image: '',
            prev_text: 'prev',
            prev_image: '',
            controls: true
        };
        var options = $.extend(defaults, options);
        return this.each(function() {
            var $this = $(this);
            var li = $this.find('li');
            var first = 0;
            var fe = 0;
            var last = options.display_num - 1;
            var le = options.display_num - 1;
            var is_working = false;
            var j = '';
            var clicked = false;
            li.css({
                'float': 'left',
                'listStyle': 'none',
                'marginRight': options.margin
            });
            var ow = li.outerWidth(true);
            wrap_width = (ow * options.display_num) - options.margin;
            var seg = ow * options.move;
			var init_seg=0;//做了修改
            $this.wrap('<div class="bx_container"></div>').width(999999);
            if (options.controls) {
                if (options.next_image != '' || options.prev_image != '') {
//做了修改
                    var controls_left = '<a href="" class="prev"><img src="' + options.prev_image + '"/></a>';
					var controls_right = '<a href="" class="next"><img src="' + options.next_image + '"/></a>';
                } else {
//做了修改
					var controls_left = '<a href="" class="prev">' + options.prev_text + '</a>';
                    var controls_right = '<a href="" class="next">' + options.next_text + '</a>';
                }
            }
            $this.parent('.bx_container').wrap('<div class="bx_wrap"></div>').css({
                'position': 'relative',
                'width': wrap_width,
                'overflow': 'hidden'
            }).before(controls_left).after(controls_right);//做了修改
            var w = li.slice(0, options.display_num).clone();
            var last_appended = (options.display_num + options.move) - 1;
            $this.empty().append(w);
            get_p();
            get_a();
            $this.css({
                'position': 'relative',
                'left': -(init_seg)
            });
            $this.parent().siblings('.next').click(function() {
                slide_next();
                clearInterval(j);
                clicked = true;
                return false;
            });
            $this.parent().siblings('.prev').click(function() {
                slide_prev();
                clearInterval(j);
                clicked = true;
                return false;
            });
            if (options.auto) {
                start_slide();
                if (options.auto_hover && clicked != true) {
                    $this.find('li').live('mouseenter',
                    function() {
                        if (!clicked) {
                            clearInterval(j);
                        }
                    });
                    $this.find('li').live('mouseleave',
                    function() {
                        if (!clicked) {
                            start_slide();
                        }
                    });
                }
            }
            function start_slide() {
                if (options.auto_dir == 'next') {
                    j = setInterval(function() {
                        slide_next()
                    },
                    options.auto_interval);
                } else {
                    j = setInterval(function() {
                        slide_prev()
                    },
                    options.auto_interval);
                }
            }
            function slide_next() {
                if (!is_working) {
                    is_working = true;
                    set_pos('next');
                    $this.animate({
                        left: '-=' + seg
                    },
                    options.speed,
                    function() {
                        $this.find('li').slice(0, options.move).remove();
                        $this.css('left', -(seg));
                        get_a();
                        is_working = false;
                    });
                }
            }
            function slide_prev() {
                if (!is_working) {
                    is_working = true;
                    set_pos('prev');
                    $this.animate({
                        left: '+=' + seg
                    },
                    options.speed,
                    function() {
                        $this.find('li').slice( - options.move).remove();
                        $this.css('left', -(seg));
                        get_p();
                        is_working = false;
                    });
                }
            }
            function get_a() {
                var str = new Array();
                var lix = li.clone();
                le = last;
                for (i = 0; i < options.move; i++) {
                    le++
                    if (lix[le] != undefined) {
                        str[i] = $(lix[le]);
                    } else {
                        le = 0;
                        str[i] = $(lix[le]);
                    }
                }
                $.each(str,
                function(index) {
                    $this.append(str[index][0]);
                });
            }
            function get_p() {
                var str = new Array();
                var lix = li.clone();
                fe = first;
                for (i = 0; i < options.move; i++) {
                    fe--
                    if (lix[fe] != undefined) {
                        str[i] = $(lix[fe]);
                    } else {
                        fe = li.length - 1;
                        str[i] = $(lix[fe]);
                    }
                }
                $.each(str,
                function(index) {
                    $this.prepend(str[index][0]);
                });
            }
            function set_pos(dir) {
                if (dir == 'next') {
                    first += options.move;
                    if (first >= li.length) {
                        first = first % li.length;
                    }
                    last += options.move;
                    if (last >= li.length) {
                        last = last % li.length;
                    }
                } else if (dir == 'prev') {
                    first -= options.move;
                    if (first < 0) {
                        first = li.length + first;
                    }
                    last -= options.move;
                    if (last < 0) {
                        last = li.length + last;
                    }
                }
            }
        });
    }
})(jQuery);

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="图片滚动,jquery插件" />
<meta name="description" content="Helloweba演示平台，演示XHTML、CSS、jquery、PHP案例和示例" />
<title>jQuery+CSS实现的图片滚动效果</title>
<style type="text/css">
<!--class名字“bx_wrap”是固定写法，与插件中的js相呼应-->
.bx_wrap {
	margin-left:auto;
	margin-right:auto;	
	width:294px;	
	border:10px solid #d3d3d3
	clear: both; 
	overflow: hidden; 
	background-color:blue;	
}
.bx_wrap .bx_container{
	height:70px;  
}
.bx_wrap .bx_container ul li {
	text-align:center;
	position:relative;
	top:10px;
}
.bx_wrap .bx_container ul img {	
	padding.bx_wrap .bx_container:0px;

}
 ul li a:hover {
	text-decoration:none;
	color:#f30
}
.bx_wrap a.prev {
	width:20px;
	height:24px;
	position:relative;
	top:23.5px;
	display:block;
	float:left;
	text-indent:-999em;
	background:url(img/arr_left.gif) no-repeat;
}
<!--class名字“bx_container ”是固定写法，与插件中的js相呼应-->
.bx_container {
	float:left;
}
.bx_wrap a.next {
	width:20px;
	height:24px;
	position:relative;
	top:23.5px;
	display:block;
	float:right;
	text-indent:-999em;
	background:url(img/arr_right.gif) no-repeat;
}
</style>
<script type="text/javascript" src="jquery.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, 
		controls: false,
		margin: 10,
		auto_hover: true
	});
	$('#demo2').bxCarousel({
		display_num: 4, 
		move: 4,
		margin: 10
		
	});
});
</script>
</head>

<body>
  <ul id="demo2" style="margin:0px; padding:0px;">
        <!--img写width和height属性，不要写样式-->
	<li><a href="#"><img  alt="#" width="56" height="50" src="img/s1.jpg" style="border:0px solid #ddd;"></a></li>

	<li><a href="#"><img  alt="#" width="56" height="50" src="img/s2.jpg" style="border:0px solid #ddd;"></a></li>

	<li><a href="#"><img  alt="#" width="56" height="50" src="img/s3.jpg" style="border:0px solid #ddd;"></a></li>

	<li><a href="#"><img  alt="#" width="56" height="50" src="img/s4.jpg" style="border:0px solid #ddd;"></a></li>

	<li><a href="#"><img  alt="#" width="56" height="50" src="img/s5.jpg" style="border:0px solid #ddd;"></a></li>

	<li><a href="#"><img  alt="#" width="56" height="50" src="img/s6.jpg" style="border:0px solid #ddd;"></a></li>

  </ul>
</body>
</html>

 上面的代码可以直接运行，但是不要忘记导入jquery的库文件。