JQuery和html+css实现带小圆点和左右按钮的轮播图实例

春天来了!你看,融化的冰水把小溪弄醒了。 "丁粳、丁粳 ",它就像大自然的神奇歌手,唱着清脆悦耳的歌,向前奔流……

是的!你没看错!还是轮播图。这次的JQuery的哟!!

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 class="img_box">
 <img src="img/ban1.jpg">
 <img src="img/ban2.jpg">
 <img src="img/ban3.jpg">
 <img src="img/ban4.png">
</div> 
 <ul class="ul5">
 <li></li>
 <li></li>
 <li></li>
 <li></li>
</ul>
 <div class="d1"><</div>
 <div class="d2">></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>

以上这篇JQuery和html+css实现带小圆点和左右按钮的轮播图实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

您可能有感兴趣的文章
html+ajax实现上传大文件功能

给Ajax返回的HTML标签动态添加样式的方法

Ajax提交参数的值中带有html标签不能提交成功的解决办法(ASP.NET)

javascript将图片转换为base64编码方法

javascript判断数组中是否存在某个值