最近做个商品详情页面，页面需要使用图片水平滚动，后面找了个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的库文件。
分享到：
相关推荐
**jQuery滚动插件详解** jQuery滚动插件是用于增强网页滚动效果的一种JavaScript库，它能够帮助开发者轻松实现平滑滚动、无限滚动、滚动监听等多种功能，极大地提升了用户体验。在网页设计中，滚动效果是一个重要的...
Sly主要针对水平滚动场景设计，适用于展示产品列表、图片滑块、导航菜单等，它具有响应式布局、自定义动画效果、可配置选项等多种特性，让开发者能够轻松地创建出专业级的滚动效果。 ### Sly的核心功能 1. **响应...
总的来说，"HTML5无限循环滚动图片展示"是一个综合运用HTML5、CSS3和JavaScript技术的实例，展示了现代Web开发中的动态视觉效果和互动体验。开发者可以通过学习和理解这个插件的实现，提升自己的前端开发技能，尤其...
1. **丰富的功能**：除了基本的滚动功能，mCustomScrollbar还提供了垂直滚动、水平滚动、双轴滚动等多种模式。它支持鼠标滚轮、触摸滑动、键盘导航等多种操作方式，并且可以设置滚动动画，增加视觉效果。 2. **高度...
标题和描述中提到的知识点涵盖了使用JavaScript实现的自定义水平滚动字体插件的相关概念。以下是对该插件实现原理和使用技巧的详细解读： 1. 插件定义：自定义水平滚动字体插件是一种可以通过JavaScript代码控制...
总的来说，这个项目是一个实用的jQuery插件实例，展示了如何利用JavaScript和CSS来实现一个交互式的选项卡图片滚动效果。通过理解并分析这些文件，我们可以学习到如何使用jQuery处理DOM操作、创建动画效果以及如何...
9. **jQuery插件**：如果你不熟悉原生JavaScript，可以借助jQuery库，有许多现成的无缝滚动插件可以快速实现这一效果，例如jQuery.scrollTo、jQuery.cycle等。 10. **AOS（Animate on Scroll）库**：这是一种现代的...
调用示例： $(".productshow").xslider({//.productshow是要... dir:"H",//水平移动还是垂直移动，默认H为水平移动，传入V或其他字符则表示垂直移动; autoscroll:1000//自动移动间隔时间 默认null不自动移动; });
标题中的“10个优秀视差滚动插件”是指在网页设计中，使用视差滚动效果的10款高质量JavaScript插件。视差滚动是一种视觉效果，它使得背景元素相对于前景元素以不同的速度移动，从而营造出深度感和动态体验，这种技术...
总之，这个"jQuery+CSS3图片查看器(水平滚动导航条)"项目是一个实用且富有创意的代码实例，它展示了jQuery和CSS3在网页交互设计中的强大功能。无论是初学者还是经验丰富的开发者，都能从中学习到如何结合使用这两种...
《jQuery.scrollTo.js网页滚动插件深度解析》 在网页设计中，流畅的用户交互体验是提升网站品质的关键因素之一。jQuery.scrollTo.js插件正是这样一款工具，它为开发者提供了强大的网页滚动控制功能，使得网页的整体...
【jQuery图片滚动插件开发详解】 在Web开发中，图片滚动是一种常见的动态效果，用于展示多张图片，常用于产品展示、新闻轮播等场景。本教程将详细讲解如何使用jQuery来实现一个完美的图片滚动插件，以"image ...
6. **垂直滚动**：内容不仅限于水平方向，还可以向下或向上滚动。 7. **弹性滚动**：内容在滚动到尽头时具有弹跳效果，模拟真实物理运动。 8. **渐进式滚动**：内容逐渐显现，而不是一次性全部显示，增强视觉冲击力...
一款美化表单下拉列表、复选框等的jquery combobox插件实例 30.站长必备jquery实现combox自动筛选,高亮显示功能 4)菜单 1.jquery+CSS超炫丽横向多级滑动导航菜单 2.jQuery+CSS漂亮蓝色三级菜单下载 3....
2. **图片缩放**：图片查看器支持鼠标滚轮缩放，当用户滚动鼠标滚轮时，图片会相应地放大或缩小。这个功能可以通过调整图片的CSS样式（如`transform: scale()`）或者使用Canvas元素的`drawImage()`方法来实现。 3. ...
1. **横向切换**：lensslider采用水平滚动的方式，让用户可以方便地通过左右箭头或自动播放功能浏览图片，这种设计既符合用户的操作习惯，也使得整个页面布局更加整洁有序。 2. **流畅动画**：利用jQuery的动画功能...
3. **横向Waypoints**：除了垂直滚动，Waypoints还支持水平滚动场景。 4. **自定义事件**：可以自定义事件名称，让代码更具可读性和扩展性。 总结来说，jQuery Waypoints是一个强大的工具，它简化了网页滚动交互的...
7. **奇幻的jQuery效果**：例如`Riding carousels with jQuery`可以创建水平或垂直滚动列表，为网站增添动态感。 8. **颜色选择器**：`Farbtastic`和`jQuery Color Picker`使得在网页上选择颜色变得直观且简单。 9...
"jQuery水平滚动企业发展大事件时间轴代码" 是一个实用的jQuery插件，用于创建动态、交互性强的时间轴效果。这个压缩包包含了实现这一功能所需的全部文件，包括HTML、JavaScript、CSS以及图像资源。 首先，我们要...