图片轮播源代码

  <!DOCTYPE html>
  <html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title></title>
  <script type="text/javascript" src="../jquery/jquery-1.8.1.js"></script>
  <script type="text/javascript">
  var i=0;
  var timer;
  $(function(){
  $(".ig").eq(0).show().siblings().hide();
  showTime();
  $(".tab").hover(function(){
  i=$(this).index();
  Show();
  clearInterval(timer);
  },function(){
  showTime()
  });
  $(".btn1").click(function(){
  clearInterval(timer);
  if(i==0){
  i=5;
  }
  i--;
  Show();
  showTime();
  })
  $(".btn2").click(function(){
  clearInterval(timer);
  if(i==4){
  i=-1;
  }
  i++;
  Show();
  showTime();
  })
  })
  function Show(){
  $(".ig").eq(i).fadeIn(300).siblings().fadeOut(300);
  $(".tab").eq(i).addClass("bg").siblings().removeClass("bg")
  }
  function showTime(){
  timer=setInterval(function(){
  i++;
  if(i==5){
  i=0;
  };
  Show();
  },3000)
  }
  </script>
  <style type="text/css">
  *{margin:0;padding:0;}
  .ig{position:absolute;}
  .btn{position:absolute;
  width:60px;
  height:90px;
  background-color:rgba(0,0,0,0.5)
  color:#fff;
  text-align:center;
  line-height:90px;
  font-size:40px;
  top:95px;
  cursor:pointer;
  }
  .btn2{
  left:580px;
  }
  ul{list-style:none;}
  #tabs{position:absolute;top:260px;left:200px;}
  .tab{width:30px;height:30px;background:#5388e8;float:left;line-height:30px;text-algin:center;color:#fff;margin-right:10px;border-radius:100%;cursor:pointer}
  .bg{background:red;}
  </style>
  </head>
   
  <body>
  <div id="igs">
  <div class="ig"><img src="img/1.jpg"></div>
  <div class="ig"><img src="img/2.jpg"></div>
  <div class="ig"><img src="img/3.jpg"></div>
  <div class="ig"><img src="img/4.jpg"></div>
  <div class="ig"><img src="img/5.jpg"></div>
  </div>
  <div class="btn btn1"><</div>
  <div class="btn btn2">></div>
  <div id="tabs">
  <div class="tab bg">1</div>
  <div class="tab">2</div>
  <div class="tab">3</div>
  <div class="tab">4</div>
  <div class="tab">5</div>
  </div>
  </body>
  </html>
posted @ 2016-07-24 19:08  逗比煎饼侠  阅读(603)  评论(2)    收藏  举报