집 >웹 프론트엔드 >JS 튜토리얼 >jquery는 예약된 자동 캐러셀 특수 효과를 구현합니다_jquery

jquery는 예약된 자동 캐러셀 특수 효과를 구현합니다_jquery

WBOY원래의: 2016-05-16 15:26:361985검색

이 캐러셀 이미지는 이전 글 jQuery 수동 클릭으로 이미지 캐러셀 효과를 구현한 즉, 이번에 보여드리는 것은 클릭 캐러셀 효과를 위한 수동 프로그램과 자동 캐러셀 효과 예정. 꾸준히 배우고 싶은 친구들은 이전 글을 읽고 이 글도 읽어보시길 추천드려요~~~~

최종 예정된 자동 회전식 효과와 수동 클릭 회전식 효과를 살펴보겠습니다.

위 디스플레이 애니메이션이 더 빠른 이유는 제 스크린샷 소프트웨어가 무료인 그린 버전이기 때문입니다~~~ 아시다시피 실제 효과는 이 속도보다 느리고 여전히 균일합니다. ~~따라서 위의 디스플레이 애니메이션은 완성된 효과에 대한 참고용으로만 사용될 수 있습니다.
1. 주요 프로그램

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>轮播图①（手动点击轮播）</title>
  <link type="text/css" rel="stylesheet" href="css/layout.css" />
 </head>
 <body>
  <div class="slideShow">
   <!--图片布局开始-->
   <ul>
    <li><a href="#"><img src="img/picture01.jpg" /></a></li>
    <li><a href="#"><img src="img/picture02.jpg" /></a></li>
    <li><a href="#"><img src="img/picture03.jpg" /></a></li>
    <li><a href="#"><img src="img/picture04.jpg" /></a></li>
   </ul>
   <!--图片布局结束-->
   
   <!--按钮布局开始-->
   <div class="showNav">
    <span class="active">1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
   </div>
   <!--按钮布局结束-->
  </div>
  <script src="js/jquery-1.11.3.js"></script>
  <script src="js/layout.js"></script>
 </body>
</html>

그럼 위의 메인 프로그램은 이전 글과 별반 차이가 없고 수정된 부분도 없습니다~~~~~ 관심이 있으신 분들은 이번 에세이의 첫 번째 글을 보시면 될 것 같습니다. Jquery 프로그램에서
2. CSS 스타일

*{
 margin: 0;
 padding: 0;
}
ul{
 list-style: none;
}
.slideShow{
 width: 346px;
 height: 210px;  /*其实就是图片的高度*/
 border: 1px #eeeeee solid;
 margin: 100px auto;
 position: relative;
 overflow: hidden; /*此处需要将溢出框架的图片部分隐藏*/
}
.slideShow ul{
 width: 2000px;
 position: relative;  /*此处需注意relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置，如果没有这个属性，图片将不可左右移动*/
}
.slideShow ul li{
 float: left;  /*让四张图片左浮动，形成并排的横着布局，方便点击按钮时的左移动*/
 width: 346px;
}
.slideShow .showNav{  /*用绝对定位给数字按钮进行布局*/
 position: absolute;
 right: 10px;
 bottom: 5px;
 text-align:center;
 font-size: 12px; 
 line-height: 20px;
}
.slideShow .showNav span{
 cursor: pointer;
 display: block;
 float: left;
 width: 20px;
 height: 20px;
 background: #ff5a28;
 margin-left: 2px;
 color: #fff;
}
.slideShow .showNav .active{
 background: #b63e1a;
}

3. jQuery 프로그램
먼저 예약 자동 순환의 원리에 대해 이야기해 보겠습니다.
1. 먼저 타이머를 시작해야 합니다. 타이머 시간이 2000ms로 설정되어 있다고 가정합니다. 즉, 2S 타이머가 동작을 수행합니다
2. 타이머가 2S마다 수행하는 작업은 숫자 버튼을 순차적으로 클릭하는 것을 시뮬레이션하는 것입니다. 즉, 클릭 이벤트를 트리거하여 그림을 왼쪽으로 이동시키는 것입니다
일반적인 효과를 얻기 위해 먼저 jQuery코드 1을 살펴보겠습니다.

 var timer=null; //定时器返回值，主要用于关闭定时器
  var iNow=0;  //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0
  timer=setInterval(function(){  //打开定时器
   iNow++;       //让图片的索引值次序加1，这样就可以实现顺序轮播图片
   showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click事件
  },2000); //2000为轮播的时间

위 프로그램은 2S마다 사진의 캐러셀 효과를 얻을 수 있지만, iNow가 마지막 사진에 도달했는지 여부를 판단하지 않기 때문에 캐러셀은 마지막 사진에 도달하면 중지됩니다. 따라서 다음

코드는 Two입니다. :

var timer=null; //定时器返回值，主要用于关闭定时器
  var iNow=0;  //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0
  timer=setInterval(function(){  //打开定时器
   iNow++;       //让图片的索引值次序加1，这样就可以实现顺序轮播图片
   if(iNow>showNumber.length-1){ //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始
    iNow=0;
   }
   showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click
  },2000); //2000为轮播的时间

그래서 jQuery 프로그램의 전체 코드 프로그램은 다음과 같습니다.

$(document).ready(function(){
 var slideShow=$(".slideShow"),  //获取最外层框架的名称
  ul=slideShow.find("ul"),  
  showNumber=slideShow.find(".showNav span"),//获取按钮
  oneWidth=slideShow.find("ul li").eq(0).width(); //获取每个图片的宽度
  var timer=null; //定时器返回值，主要用于关闭定时器
  var iNow=0;  //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0
  
  showNumber.on("click",function(){   //为每个按钮绑定一个点击事件  
   $(this).addClass("active").siblings().removeClass("active"); //按钮点击时为这个按钮添加高亮状态，并且将其他按钮高亮状态去掉
   var index=$(this).index(); //获取哪个按钮被点击，也就是找到被点击按钮的索引值
   ul.animate({
    "left":-oneWidth*iNow, //注意此处用到left属性，所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度，N根据被点击的按钮索引值index确定
   })
  });
  
  timer=setInterval(function(){  //打开定时器
   iNow++;       //让图片的索引值次序加1，这样就可以实现顺序轮播图片
   if(iNow>showNumber.length-1){ //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始
    iNow=0;
   }
   showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click
  },2000); //2000为轮播的时间
})

위의 댓글은 주로 배우고 싶어하는 친구들의 편의를 위해 매우 자세하게 설명되어 있지만 실제로는 프로그램을 작성할 때 그렇게 자세히 설명하지 않습니다. 보시다시피 jQuery 프로그램이 완료되었습니다. 자동 캐러셀 효과는 정확하지만 수동으로 클릭하면 오류가 발생하기 때문에 큰 실수입니다. 오류 효과를 표시하기 위해 특별히 Gif 애니메이션을 만들었습니다.

위 효과를 보면 사진이 자동으로 회전할 때 버튼을 클릭해도 에코만 울리고 클릭한 버튼으로 이동하지만 누르기만 하면 계속 회전한다는 것을 갑자기 깨닫게 될 것입니다. 순서는 캐러셀 순서와 상관없이 버튼을 누른 후 진행해야 하는데,

이유는

수동 클릭 시 인덱스 값이 타이머의 이미지 인덱스 iNow에 할당되지 않기 때문에 iNow는 클릭한 버튼의 인덱스 값을 저장할 수 없습니다. 즉, 어떤 버튼을 클릭했는지 알 수 없습니다. 그 이유를 다음과 같이 수정해야 합니다.

수정 후 jQuery 프로그램의 최종 버전은 다음과 같습니다.

$(document).ready(function(){
 var slideShow=$(".slideShow"),  //获取最外层框架的名称
  ul=slideShow.find("ul"),  
  showNumber=slideShow.find(".showNav span"),//获取按钮
  oneWidth=slideShow.find("ul li").eq(0).width(); //获取每个图片的宽度
  var timer=null; //定时器返回值，主要用于关闭定时器
  var iNow=0;  //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0
  
  showNumber.on("click",function(){   //为每个按钮绑定一个点击事件  
   $(this).addClass("active").siblings().removeClass("active"); //按钮点击时为这个按钮添加高亮状态，并且将其他按钮高亮状态去掉
   var index=$(this).index(); //获取哪个按钮被点击，也就是找到被点击按钮的索引值
   iNow=index;
   ul.animate({
    "left":-oneWidth*iNow, //注意此处用到left属性，所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度，N根据被点击的按钮索引值iNOWx确定
   })
  });
  
  timer=setInterval(function(){  //打开定时器
   iNow++;       //让图片的索引值次序加1，这样就可以实现顺序轮播图片
   if(iNow>showNumber.length-1){ //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始
    iNow=0;
   }
   showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click
  },2000); //2000为轮播的时间
})

위 내용이 이 글의 전체 내용입니다. 다음번에는 캐러셀 이미지 위에 마우스를 올렸을 때 이미지가 회전하는 것을 멈추고, 마우스를 떼도 계속 회전하는 코드를 알려드리겠습니다. 떠나지 마세요.

성명：

이전 기사：AngularJS는 수동 양식 확인 및 자동 양식 확인을 구현합니다._AngularJS다음 기사：AngularJS는 수동 양식 확인 및 자동 양식 확인을 구현합니다._AngularJS

jquery는 예약된 자동 캐러셀 특수 효과를 구현합니다_jquery

관련 기사