js实现图片轮播，以及鼠标悬浮到图片时图片放大

图片轮播：

HTML代码：

		

		    

		    	

				

		    
		    
<
			
>
		

js代码：

var curindex = 0;       //当前页
var preindex = -1;      //前一页
var licount;            //计算图片数量
var timer;
$(function(){
    $('ul.pic li:eq(0)').show().siblings('li').hide();
    licount = $('ul.pic li').length;
    timer = setInterval(autochange,5000);

    $('#left').click(function(){       //左翻页
    	clearInterval(timer);
    	_index = (curindex == 0) ? licount-1 : curindex - 1;
    	movenext(_index);
    })
    .mouseout(function(){
    	timer = setInterval(autochange,5000);
    })

    $('#right').click(function(){       //右翻页
    	clearInterval(timer);
    	_index = (curindex == 1) ? licount-2 : curindex + 1;
    	movenext(_index);
    })
    .mouseout(function(){
    	timer = setInterval(autochange,5000);
    })
})
function autochange(){
	_index = (curindex + 1) % licount;
	movenext(_index);
}
function movenext(_index){
	preindex = curindex;
	curindex = _index;
	$('ul.pic li:eq('+ preindex +')').stop().fadeOut(1000);
	$('ul.pic li:eq('+ curindex +')').stop().fadeIn(1000);
}

鼠标悬浮，图片变大：

html代码：

    			

	    			

	    			
WX0201-XX均韵移门衣柜
    			
    			

	    			

	    			
WX0202-XX合和移门衣柜
    			
    			

	    			

	    			
WX0101-XX古典红移门衣柜
    			
    			
    			

	    			

	    			
FZP-610YM爱慕茶白移门衣柜
    			
    			

	    			

	    			
FZP-606塞纳兰移门衣柜
    			
    			

	    			

	    			
FZP-610星辰云移门衣柜
    			
    		

js代码：（实现原理：将图片外层的div设置一定宽度、长度，图片设100%；悬浮时放大外层div即可）

// 鼠标悬浮到图片上时，图片变大，移走恢复原位
$(function(){
    $(".ulimg").hover(function(){
        $(this).css({
            "width":'100%',
            "height":'250px'            
        });
    },function(){
        $(this).css({
            "width":'92%',
            "height":'200px'
        });
    });
})