鼠标点击按钮图片切换+自动切换+左右按钮点击切换效果

Css代码部分：

*{margin:0px;padding:0px}

alt=\美女\

alt=\美女\alt=\美女\alt=\美女\alt=\美女\width=\

width=\

width=\

width=\

width=\

li{list-style:none}

a{text-decoration:none} img{border:0px}

.banner{width:350px;height:495px;margin:100px auto;position:relative;overflow:hidden} .banner .pic{width:9999px;height:495px}

.banner .pic li{width:350px;height:495px;float:left}

.banner .anniu{width:100px;height:16px;position:absolute;left:165px;top:470px}

.banner .anniu li{width:16px;height:16px;background:white;float:left;margin:2px;display:inline; cursor:pointer;border-radius:100%} .banner .anniu li.on{background:red}

.banner .lr{width:350px;height:50px;position:absolute;top:250px;display:none} .banner .lr a{color:white}

.banner .lr .pre{width:20px;height:50px;float:left;background:none repeat scroll 0px 0px rgba(1, 0, 0, 0.6);text-align:center;line-height:50px;cursor:pointer}

.banner .lr .next{width:20px;height:50px;float:right;background:none repeat scroll 0px 0px rgba(1, 0, 0, 0.6);text-align:center;line-height:50px;cursor:pointer}

Javascript代码部分：

$(function(){ //鼠标滑过banner，左右按钮进行显示和隐藏 $(\ $(\ },function(){ $(\ }); //点击下面的小按钮，图片进行左右切换效果 $(\ $(this).addClass(\ var num=$(this).index(); $(\ });

//图片自动轮播效果 var a=0;

var automatic=setInterval(function(){ a++; a=a%5; $(\ $(\},6000);

});

//点击左右按钮，图片进行切换效果 $(\ a--; a=(a+5)%5; $(\ $(\});

$(\ a++; a=a%5; $(\ $(\});