jquery简单多图片前后滚动插件

(function($) {
$.fn.slidePicture = function(options) {
var ops = $.extend({}, $.fn.slidePicture.defaults, options);

return this.each(function() {
$this = $(this);
var opts = $.meta ? $.extend({}, ops, $(this).data()) : ops;

var num = opts.num;
var ul = $this.find("ul");
var lifirst = ul.find("li:first");
var liwidth = lifirst.width();
var liheight = lifirst.height();
// img个数
var size = ul.find("li img").size();
// 从第num个往后，都不显示
ul.find("li:gt(" + (num - 1) + ") img,li:gt(" + (num - 1) + ")")
.css({
'display' : 'none'
});
// 创建向前按钮
var left_prevous = $("<div id=\"left_prevous\" class=\"pnLi\"><</div>");
// 创建向后按钮
var right_next = $("<div id=\"right_next\" class=\"pnLi\">></div>");
// 添加到div上
$this.before(left_prevous);
$this.after(right_next);
// div父容器的宽度，高度，偏移量
var dwidth, dheight = $this.height(), dposition = $this.offset();
left_prevous.css({
'top' : dposition.top + ((dheight - left_prevous.height()) / 2)
+ "px",
'left' : dposition.left + "px"
});
right_next.css({
'top' : dposition.top + ((dheight - right_next.height()) / 2)
+ "px",
'display' : 'none'
});
/**
* chrome浏览器下，父div的内容没有加载完，取得的宽度没有被撑开
* (http://jaykong.blog.163.com/blog/static/8895412010428111617633/)
* 设置一下延迟加载右侧按钮的左偏移,100毫秒足够
*/
setTimeout(function() {
dwidth = $this.width();
right_next.css({
'left' : dposition.left
+ parseInt(dwidth - right_next.width()) + "px",
'display' : 'block'
});
}, 100);

// 隐藏及显示
function fade(fadeOut, fadeIn) {
fadeOut.css({
'display' : 'none'
});
fadeIn.css({
'display' : 'block'
});
}
// 左侧的index从0开始
var first = 0;
// 右侧的index从num开始
var last = num;
// 是否前向滚动结束,false表示结束
var firstEnd = false;
// 是否后向滚动结束，false表示结束
var lastEnd = false;
// 前一个操作是否前滚动,false表示否
var doPrevous = false;
// 前一个操作是否后滚动，false表示否
var doNext = false;
// 前滚动事件
left_prevous.bind("click", function() {
// 前滚动没有结束
if (firstEnd == false) {
// 前一个操作是后滚动
if (doNext == true) {
last = last;
first = first;
}
// 前一个操作时前滚动，因此前后索引都各自加1
if (doPrevous == true) {
last = last - 1;
first = first - 1;
}
fade(
ul.find("li:eq(" + last + ") img,li:eq(" + last
+ ")"), ul.find("li:eq(" + first
+ ") img,li:eq(" + first + ")"));
// 0表示前滚动结束
if (first == 0) {
firstEnd = true;
doNext = false;
} else {
doNext = false;
}
lastEnd = false;
doPrevous = true;
}
});
// 后滚动事件
right_next.bind("click", function() {
if (lastEnd == false) {
if (doPrevous == true) {
last = last;
first = first;
}
if (doNext == true) {
last = last + 1;
first = first + 1;
}
fade(ul.find("li:eq(" + first + ") img,li:eq(" + first
+ ")"), ul.find("li:eq(" + last + ") img,li:eq("
+ last + ")"));
if (last == size - 1) {
lastEnd = true;
doPrevous = false;
} else {
doPrevous = false;
}
firstEnd = false;
doNext = true;
}
});
});
}

$.fn.slidePicture.defaults = {
num : 3
};

})(jQuery);

需要的css样式，css样式可以自调:

body {
background-color: #ddd;
margin: 0;
}

.pic {
position: absolute;
left: 400px;
top: 300px;
background: #666666;
border: 5px solid #666666;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
list-style: none;
}

.pic ul {
padding-left: 60px;
padding-right: 60px;
margin: 0px;
list-style-type: none;
}

.pic ul li {
float: left;
margin-top: 10px;
margin-bottom: 1px;
margin-left: 0px;
margin-right: 2px;
height: 135px;
z-index: 10;
}

.pnLi {
width: 30px;
height: 135px;
vertical-align: middle;
text-align: center;
line-height: 135px;
font-size: 4.5em;
font-weight: 900;
position: absolute;
z-index: 20;
}

.pnLi:hover {
color: #fff;
text-shadow: 0px 0px 3px #333;
cursor: pointer;
}

.singleImg {
position: relative;
z-index: 10;
vertical-align: bottom;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: 4px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
box-shadow: 0 1px 5px rgba(0, 0, 0, .5);
-mozbox-shadow: 0 1px 5px rgba(0, 0, 0, .5);
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .5);
opacity: 0.7;
}

.singleImg:hover {
opacity: 1;
box-shadow: 0 1px 5px rgb(255, 255, 255);
-mozbox-shadow: 0 1px 5px rgb(255, 255, 255);
-webkit-box-shadow: 0 1px 5px rgb(255, 255, 255);
}

页面调用方法:

<script type="text/javascript">
$(document).ready(function(){
var totalNum=$("pic ul li img").size();
var first=0;
$("img").load(function(){
first++;
});
if(first==totalNum){
$(".pic").slidePicture();
}
});
</script>

这样调用有一个原因，当图片一个一个加载时，原有的父div会随着图片的一个一个加载而慢慢变大，我们的效果是希望父的div的大小不发生变化,所以需要利用load图片加载来制作一个计数器，当数值与图片的个数相等的时候，渲染整个插件。

<body>
<div class="pic">

<ul>
<li class="imgLi">
<a href="#"><img
src="http://down.139zhuti.com/bizhi/2010/8/24/f2fcb01.jpg" alt=""
class="singleImg"> </a>
</li>
<li class="imgLi">
<a href="#"><img
src="http://down.139zhuti.com/bizhi/2010/8/24/b8def93.jpg" alt=""
class="singleImg"> </a>
</li>
<li class="imgLi">
<a href="#"><img
src="http://down.139zhuti.com/bizhi/2010/8/24/f2fcb02.jpg" alt=""
class="singleImg"> </a>
</li>
<li class="imgLi">
<a href="#"><img
src="http://down.139zhuti.com/bizhi/2010/8/24/e16ac0.jpg" alt=""
class="singleImg"> </a>
</li>
<li class="imgLi">
<a href="#"><img
src="http://down.139zhuti.com/bizhi/2010/8/24/261f104.jpg" alt=""
class="singleImg"> </a>
</li>
<li class="imgLi">
<a href="#"><img
src="http://down.139zhuti.com/bizhi/2010/8/24/261f102.jpg" alt=""
class="singleImg"> </a>
</li>
<li class="imgLi">
<a href="#"><img
src="http://down.139zhuti.com/bizhi/2010/8/24/32e0012.jpg" alt=""
class="singleImg"> </a>
</li>
<li class="imgLi">
<a href="#"><img
src="http://down.139zhuti.com/bizhi/2010/8/24/32e0011.jpg" alt=""
class="singleImg"> </a>
</li>
</ul>
</div>
</body>

效果图如下：