jQuery 实现图片切换

$.fn.imgtransition = function(o){
	var defaults = {
		speed : 3000,
		animate : 1000
	};
	o = $.extend(defaults, o);

	return this.each(function(){
		
		var arr_e = $("li", this);
		function shownext(){
			var hover = arr_e.filter(".hover").length ? arr_e.filter(".hover") : arr_e.first();
			var next =  hover.next().length ? hover.next() : arr_e.first();
			next.css({opacity: 0.0, "z-index": 3}).addClass('hover').animate({opacity: 1.0}, o.animate, function(){
				hover.removeClass('hover').css({"z-index": 2});
			});
		}
		
		setInterval(function(){
			shownext();
		},o.speed);
		
	});
};
$(document).ready(function(){ 
	$("#videopos").imgtransition({
		speed:3000,  //图片切换时间
		animate:1000 //图片切换过渡时间
	});
});

<!--视频框轮显-->
    <div class="video pos">
    	<ul id="videopos">
 			<li><span class="hover"><img src="images/1.jpg" ></span></li>
            <li><span ><img src="images/1.jpg"></span></li>
            <li><span><img src="images/222.jpg"></span></li>
            <li><span><img src="images/1.jpg"></span></li>
            <li><span><img src="images/222.jpg"></span></li>
            <li><span><img src="images/1.jpg"></span></li>
        </ul>
    </div>