本篇文章探讨了jQuery教程之jQuery和html+css实现带小圆点和左右按钮的轮播图，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

<

CSS代码：
/*轮播图 左右按钮 小白点*/
  #second_div{
  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代码：
<!-- 轮播图 -->
<div id="second_div">
<div>
 <img src="img/ban1.jpg">
 <img src="img/ban2.jpg">
 <img src="img/ban3.jpg">
 <img src="img/ban4.png">
</div> 
 <ul>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
</ul>
 <div><</div>
 <div>></div>
</div>
　　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 divW=$(".img_box").width();
        var len=$(".img_box img").length;
        img.css("left",divW);
        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",divW);
            img.eq(index).animate({"left":-divW});
            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",-divW);
            img.eq(index).animate({"left":divW});
            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",-divW);
                    img.eq(index).animate({"left":divW});
                    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",divW);
                    img.eq(index).animate({"left":-divW});
                    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>
就是这样的！你们懂了吗？    

      本文由职坐标整理发布，学习更多的相关知识，请关注职坐标IT知识库！