无闪烁图片切换备忘

标签：

<style type="text/css">

.scroll{margin:0 auto; width:500px; height:200px; position:relative; overflow:hidden;}

.scroll ul{list-style-type:none; padding:0; margin:0; position:absolute; top:0;left:0; width:99999px; height:200px; }

.scroll li{float:left; width:500px;}

.prev{position:absolute; left:-5px; top:80px; }

.next{position:absolute; right:-5px; top:80px;}

</style>

-----------------------------------------------------------------------------------------------

<div class="scroll" id="s1">

<ul>

<li><img src="images/pic_01.jpg" width="500" height="200"></li>

<li><img src="images/pic_02.jpg" width="500" height="200"></li>

<li><img src="images/pic_03.jpg" width="500" height="200"></li>

<li><img src="images/pic_04.jpg" width="500" height="200"></li>

<li><img src="images/pic_05.jpg" width="500" height="200"></li>

</ul>

<a href="#" class="prev"><img src="images/arrow-prev.png" border="0"></a>

<a href="#" class="next"><img src="images/arrow-next.png" border="0"></a>

</div>

-----------------------------------------------------------------------------------------------

(function($){

$.fn.extend({

scroll: function(options) {

var defaults = {

"width": 500,
"left" :0

}

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

return this.each(function() {
var timer;
var oPrev=$(this).children(‘.prev‘);
var oNext=$(this).children(‘.next‘);
var oUl=$(this).children(‘ul‘);
var oLi=oUl.children(‘li‘);
var len=oUl.children(‘li‘).length*2;
oUl.append(oUl.html()).css({‘width‘:len*ops.width,"left":-len/2*ops.width})
oPrev.click(function(){
ops.left = parseInt(oUl.css(‘left‘)) + ops.width
slideMove();

});

oNext.click(function(){
ops.left = parseInt(oUl.css(‘left‘)) - ops.width
slideMove();
});

timer=setInterval(function(){
oNext.trigger(‘click‘);

},5000);

oUl.mouseover(function(){

clearInterval(timer);

}).mouseout(function(){

timer=setInterval(function(){
oNext.trigger(‘click‘);
},5000);
});

function slideMove() {
if(oUl.is(‘:animated‘)){
return;
}

oUl.animate({
‘left‘: ops.left
}, 600, function() {

if (ops.left >= 0) {

oUl.css({
‘left‘: -len / 2 * ops.width
});
} else if (ops.left <= ((1 - len) * ops.width)) {

oUl.css({
"left": (1 - len / 2) * ops.width
})
}

})
}

});

}

})

})(jQuery);

无闪烁图片切换备忘

标签：

原文地址：http://www.cnblogs.com/leyi/p/4756857.html