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

图片轮播：

HTML代码：

<!-- 图片轮播 -->
		<div class="h-img">
		    <ul class="pic">
		    	<li><img class="bg" src="images/h1.jpg"></li>
				<li><img class="bg" src="images/h2.jpg"></li>
		    </ul>
		    <div class="left arrow" id="left"><</div>
			<div class="right arrow" id="right">></div>
		</div>

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代码：

<ul>
    			<li>
	    			<div class="ulimg"><img src="images/d6.jpg" alt=""></div>
	    			<div class="des"><p>WX0201-XX均韵移门衣柜</p></div>
    			</li>
    			<li>
	    			<div class="ulimg"><img src="images/d7.jpg" alt=""></div>
	    			<div class="des"><p>WX0202-XX合和移门衣柜</p></div>
    			</li>
    			<li>
	    			<div class="ulimg"><img src="images/d5.jpg" alt=""></div>
	    			<div class="des"><p>WX0101-XX古典红移门衣柜</p></div>
    			</li>
    			<!-- <li>
	    			<div class="ulimg"><img src="images/d8.jpg" alt=""></div>
	    			<div class="des"><p>WX0301-XX01移门衣柜</p></div>
    			</li> -->
    			<li>
	    			<div class="ulimg"><img src="images/d3.jpg" alt=""></div>
	    			<div class="des"><p>FZP-610YM爱慕茶白移门衣柜</p></div>
    			</li>
    			<li>
	    			<div class="ulimg"><img src="images/d2.jpg" alt=""></div>
	    			<div class="des"><p>FZP-606塞纳兰移门衣柜</p></div>
    			</li>
    			<li>
	    			<div class="ulimg"><img src="images/d4.jpg" alt=""></div>
	    			<div class="des"><p>FZP-610星辰云移门衣柜</p></div>
    			</li>
    		</ul>

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

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