jQuery实现图片轮播效果代码

整理以前用jQuery实现的图片轮播效果。

 1. 不做操作时，自动轮播
 2. 鼠标悬浮在图片上时，停止自动轮播，隐藏在图片左右的箭头会显示出来
 3. 手动轮播1：鼠标指向图片底部的小标按钮，可以切换对应的图片
 4. 手动轮播2：点击左右箭头也可以切换图片

效果图：（PS：用软件捕捉的，不太会弄，感觉图片都失真了）

下面是代码区域：

**inde.html部分代码**

 

  

  

  

  

  

  

  

 
 
  <
  >
 
 

**reset.css代码**

.box{
 padding:0;
 width: 800px;
 height: 500px; 
 margin: 0 auto;
 position:relative;
}
ul.img{
 padding:0;
 margin: 0 auto;
}
ul.img .photo{
 list-style: none;
 position: absolute; 
 display: none;
}
img{
 width: 800px;
 height: 500px;
}
.box .img .active{
 display: block;
}



.jt{
 width: 40px;
 height: 50px;
 background-color: rgba(0,0,0,0.5);
 position: absolute;
 top:50%;
 margin-top: -25px;
 line-height: 50px;
 font-size: 30px; 
 color: white;
 font-weight: 800;
 text-align: center; 
 display: none;
}
#jtRight{
 right: 0;
}


.numList{
 font-size: 0;
 position: absolute;
 bottom:10px;
 left: 50%;
 margin-left:-70px; 
}
.numList .num{
 background-color: black;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 color: white;
 text-align: center;
 font-size: 14px;
 display: inline-block;
}
.numList .check{
 background-color: red;
}

**main.js代码**

$(function(){
 
 var i=0;

 
 var size=$(".photo").size();
 for (var j=1;j<=size;j++){
  var span=$(""+j+"");
  $(".numList").append(span);
 }
 
 $(".photo:eq(0)").addClass("active");
 $(".num:eq(0)").addClass("check");

 
 var HandleImgChange=function(){
  $(".num").each(function(){
   $(this).mouseover(function(){
    $(this).siblings().removeClass("check");
    $(this).addClass("check");

    
    i=$(this).index();
    $(".photo").hide();
    $(".photo").eq(i).show();
   });
  });
 };

 
 var move=function(){
  i++;
  if(i>size-1){
   i=0;
  }
  $(".num").eq(i).addClass("check").siblings().removeClass("check");
  $(".photo").eq(i).show().siblings().hide();
 };

 
 var AutoImgChange=function(){
  var t=setInterval(move,1000);
  $(".box").hover(function(){
   $(this).css({"cursor":"pointer"});
   $(".jt").css({"display":"block"});
   clearInterval(t);
  },function(){
   $(".jt").css({"display":"none"});
   t=setInterval(move,1000);
  })
 };

 
 var jtL=function(){
  $("#jtLeft").click(function(){
   i--;
   if(i<0){
    i=size-1;
   }
   $(".num").eq(i).addClass("check").siblings().removeClass("check");
   $(".photo").eq(i).show().siblings().hide();
  })
 };
 var jtR=function(){
  $("#jtRight").click(function(){
   move();
  })
 };

 HandleImgChange();
 AutoImgChange();
 jtR();
 jtL();
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。