html代码片段
<body>
<div class="main">
<img src="img/0.jpg" style="display: block;"/>
<img src="img/1.jpg"/>
<img src="img/2.jpg"/>
<img src="img/3.jpg"/>
<img src="img/4.jpg"/>
<img src="img/5.jpg"/>
<img src="img/6.jpg"/>
<ul>
<li style="background-color: red;"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<a id="lest" href="javascript:void(0)"></a>
<a id="next" href="javascript:void(0)"></a>
</div>
</body>
jquery代码片段
$(function(){
var c = 0;
function bangding(){
//图片轮播
$(".main img").eq(c).show().siblings('img').hide();
//小圆点轮番变为红色
$(".main ul li").eq(c).css({'background':'#A10000'}).siblings('li').css({'background':'#999999'});
}
//自动轮播图函数
function zidong(){
c++;
c = c==7?0:c;
bangding();
}
var dong = setInterval(zidong,2300);
//鼠标事件,鼠标指针移入.main动画停止,移出动画继续
$('.main').mouseover(function(){
clearInterval(dong);
})
$('.main').mouseout(function(){
dong = setInterval(zidong,2300);
})
//鼠标事件,点击上下按钮实现上下翻页,css背景图变化
// 上一张
$('#lest').click(function(){
c--;
c=c==-1?6:c;
bangding();
}).mousemove(function(){
$(this).css({'background-position':'bottom left'})
}).mouseout(function(){
$(this).css({'background-position':'top left'})
})
// 下一张
$('#next').click(function(){
c++;
c=c==7?0:c;
bangding();
}).mousemove(function(){
$(this).css({'background-position':'bottom right'})
}).mouseout(function(){
$(this).css({'background-position':'top right'})
})
//鼠标事件,点击小圆点实现切换图片
$('.main ul li').click(function(){
c = $(this).index();
bangding();
})
})
图片自填就可以用