图片水平滚动插件实例
最近做个商品详情页面，页面需要使用图片水平滚动，后面找了个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的库文件。