本文主要为大家带来一篇jquery和html+css实现带小圆点和左右按钮的轮播图实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。
是的！你没看错！还是轮播图。这次的jquery的哟！！
css代码：
/*轮播图 左右按钮 小白点*/
#second_p{
margin-top: 160px;
}
.img_box{
overflow: hidden;
width:100%;
height:420px;
border:1px solid;
position:relative;
}
.img_box img{
width:100%;
position:absolute;
}
.ul5{
list-style: none;
position:absolute;
left:580px;
top:565px;
}
.ul5 li{
float:left;
margin-left:20px;
width:40px;
height:5px;
border:0px;
background:lawngreen;
}
.d1,.d2{
width:50px;
height:60px;
background-color: rgba(10,10,10,0.5);
text-align: center;
font-size:26px;
font-weight: 800px;
line-height:60px;
cursor: pointer;
}
.d1{
position:absolute;
top:373px;
left:25px;
}
.d2{
position:absolute;
top:373px;
left:1445px;
}
html代码：
<!-- 轮播图 -->
<p id="second_p">
<p class="img_box">
<img src="img/ban1.jpg">
<img src="img/ban2.jpg">
<img src="img/ban3.jpg">
<img src="img/ban4.png">
</p>
<ul class="ul5">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<p class="d1"></p>
</p>
js代码：
<script type="text/javascript">
$(document).ready(function(){
//搜索按钮
$(#ss).click(function(){
var new_li = $(<li>+ $(#skuang).val() +</li>);
$(#d1 ul).append(new_li);
$(#d1).hide();
$(#skuang).val();
})
$(#skuang).focus(function(){
$(#d1).css(display,block);
});
$(#skuang).blur();
$(#qingch).click(function(){
$(#d1 li:gt(0)).remove();
$(#d1).hide();
});
//轮播图
var img=$(.img_box img);
var li=$(.ul5 li);
var pw=$(.img_box).width();
var len=$(.img_box img).length;
img.css(left,pw);
img.eq(0).css(left,0);
li.eq(0).css(background,red);
var index=0;
var next=0;
function show(){
next++;
if(next==len){
next=0;
}
img.eq(next).css(left,pw);
img.eq(index).animate({left:-pw});
img.eq(next).animate({left:0});
li.eq(next).css(background,red);
li.eq(index).css(background,lawngreen);
index=next;
}
t=setinterval(show,2000);
function show1(){
next--;
if(next==-1){
next=len-1;
}
img.eq(next).css(left,-pw);
img.eq(index).animate({left:pw});
img.eq(next).animate({left:0});
li.eq(next).css(background,red);
li.eq(index).css(background,lawngreen);
index=next;
}
img.hover(function(){
clearinterval(t);
},function(){
t=setinterval(show,2000);
})
//左右按钮
$(.d2).mousedown(function(){
clearinterval(t);
show();
})
$(.d2).mousedown(function(){
t=setinterval(show,2000);
})
$(.d1).mousedown(function(){
clearinterval(t);
show1();
})
$(.d1).mousedown(function(){
t=setinterval(show,2000);
})
//小白点 点击
li.mousedown(function(){
num=$(this).index();
if(num==next){
return;
}else if(num<next){
clearinterval(t);
img.eq(num).css("left",-pw);
img.eq(index).animate({"left":pw});
img.eq(num).animate({"left":0});
li.eq(num).css("background","red");
li.eq(index).css("background","lawngreen");
index=num;
next=num;
}else if(num>next){
clearinterval(t);
img.eq(num).css(left,pw);
img.eq(index).animate({left:-pw});
img.eq(num).animate({left:0});
li.eq(num).css(background,red);
li.eq(index).css(background,lawngreen);
index=num;
next=num;
}
})
li.mouseup(function(){
t=setinterval(show,2000);
})
})
</script>
相关推荐：
实例详解jquery实现左右轮播图效果
js循环轮播图
javascript中带有子菜单和控件的slider轮播图效果的实现
以上就是关于jquery和html+css实现带小圆点和左右按钮的轮播图分享的详细内容。