와이드스크린 이미지 캐러셀의 jQuery 구현 tutorial

와이드스크린 이미지 캐러셀의 jQuery 구현 tutorial_jquery

WBOY

풀어 주다： 2016-05-16 15:30:09

원래의

1106명이 탐색했습니다.

이 문서에서는 jQuery를 사용하여 와이드스크린 이미지 캐러셀을 구현하는 예제 튜토리얼을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
실행 중인 효과의 스크린샷은 다음과 같습니다.

jquery 라이브러리 소개

<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>

로그인 후 복사

HTML 빌드
전체 코드는 세 부분으로 나뉩니다.

1. 로딩 부분

2. 사진 부분에는 4개의 사진만 있을 수 있습니다. 관심 있는 친구는 개선할 수 있습니다.

3. TAB 버튼 부분은 물론, 여기에도 버튼이 4개밖에 없고 개선이 필요합니다.

<div class="gg" id="gg">
      <div class="ggLoading">
        <div class="ggLoading2"><em>精彩活动载入中</em></div>
      </div>
      <div class="ggs">
        <div class="ggBox" id="ggBox">
          <a href="#" title="5月22日测试开启领报名资格" style="z-index: 3; opacity: 4;">
            <img src="images/1.jpg" alt="" /></a>
          <a href="#" title="首测世界的雕琢篇章开启">
            <img src="images/2.jpg" alt="" /></a>
          <a href="#" title="上古世纪游戏资料手册">
            <img src="images/3.jpg" alt="" /></a>
          <a href="#" title="游戏四大特色揭晓">
            <img src="images/4.jpg" alt="" /></a>
        </div>
      </div>
      <div class="ggb">
        <div class="ggBtns" id="ggBtns">
          <a title="5月22日测试开启领报名资格" href='javascript:void(0)' class="ggOn"><em>5月22日测试开启领报名资格</em></a>
          <a title="首测世界的雕琢篇章开启" href='javascript:void(0)'><em>首测世界的雕琢篇章开启</em></a>
          <a title="上古世纪游戏资料手册" href='javascript:void(0)'><em>上古世纪游戏资料手册</em></a>
          <a title="游戏四大特色揭晓" href='javascript:void(0)'><em>游戏四大特色揭晓</em></a>
        </div>
      </div>
    </div>

로그인 후 복사

CSS 스타일 여기의 CSS는 프로젝트 요구 사항에 따라 사용자 정의할 수 있습니다. 원칙을 이해하는 한 아래 코드를 고수할 필요는 없습니다. 아래 CSS가 이해가 안 되시면 여기서는 하나씩 설명하지 않겠습니다.

.ggLoading, .ggLoading2 {
  background-image: url(../images/nav.png);
}
.gg {
  width: 100%;
  height: 500px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin: 0 auto;
  background: #d3d3d3 url(../images/loading.jpg) repeat-x;
}
.ggLoading {
  position: absolute;
  left: 40%;
  top: 200px;
  width: 325px;
  text-align: center;
  height: 56px;
  background-position: 0 -274px;
  background-repeat: no-repeat;
  line-height: 56px;
  color: #9c9c9c;
}
.ggLoading2 {
  width: 330px;
  height: 56px;
  background-position: 213px -330px;
  background-repeat: no-repeat;
}
.ggLoading em {
  font-weight: bold;
}
.ggs {
  width: 200%;
  height: 500px;
  left: -50%;
  top: 0;
  position: absolute;
}
.ggBox {
  width: 1920px;
  height: 500px;
  margin: 0 auto;
}
.ggBox a {
  display: block;
  width: 1920px;
  height: 500px;
  position: absolute;
  z-index: 1;
  opacity: 0.1;
}
.ggBox img {
  display: block;
  width: 1920px;
  height: 500px;
}
.ggb {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  height: 40px;
  z-index: 4;
  background-color: #32342e;
  background-repeat: repeat-x;
  background-position: 50% -40px;
}
.ggBtns {
  width: 960px;
  height: 40px;
  margin: 0 auto;
  border-left: 1px solid #090908;
  border-right: 1px solid #6a6a60;
}
.ggBtns a {
  float: left;
  display: block;
  width: 240px;
  height: 40px;
  text-align: center;
  padding-top: 10px;
  color: #848380;
  font-size: 14px;
  line-height: 40px;
  background-position: 0 10px;
  position: relative;
  top: -10px;
  outline: none;
  background-repeat: no-repeat;
  cursor: pointer;
}
.ggBtns a em {
  display: block;
  width: 210px;
  height: 40px;
  margin: 0 auto;
  overflow: hidden;
}
.ggBtns a:hover {
  color: #e7e7e7;
}
.ggBtns a:focus {
  outline: none;
}
.ggBtns a.ggOn {
  color: #e7e7e7;
  background-position: 0 0;
}
.ggb, .ggBtns a {
  background-image: url(../images/main.jpg);
}
a.ggOn {
  background-image: url(../images/gg.png);
}

로그인 후 복사

JS 코드 드디어 중요한 부분에 이르렀습니다. 이 부분에는 코드가 많지 않으니 살펴보겠습니다.

$(function () {//文档加载后执行
   
  //定义$con,$box,$btns,$i变量，autoChange自动播放函数，loop定时器。 
  var $con = $('#gg'), $box = $con.find('#ggBox'), $btns = $con.find('#ggBtns'), i = 0, autoChange = function () {
    i += 1;//计数器+1
    if (i === 4) { i = 0; }//如果计数器i等4就把i重置为0.
     
    $btns.find('a:eq(' + i + ')').addClass('ggOn').siblings().removeClass('ggOn');
    //找到TAB按钮中的第i个a标签，为其加上ggOn的样式，同时移除所有同级的a标签ggOn样式
    var curr = $box.find('a:eq(' + i + ')'), prev = curr.siblings();
    //定义curr变量，并赋值为$box中当前显示图片的a标签，定义prev变量，赋值为$box中除了当前显示图片的A标签外的所有A标签。
    prev.css('z-index', 2);//$box中除了当前显示图片的A标签外的所有A标签的index值变为2，即向下移一层
    curr.css('z-index', 3).animate({ //$box中当前显示图片的a标签index值变为3，即向上移一层，然后使用jquery动画以150毫秒把透明度变为1，之后执行匿名函数function。
      'opacity': 1
    }, 150, function () { //$box中除了当前显示图片的A标签外的所有A标签的index值变为1，并把透明度变为0.1
      prev.css({
        'z-index': 1, 'opacity': 0.1
      });
    });
  }, loop = setInterval(autoChange, 5000);//定义定时器，每5秒执行一次autoChange函数，达到自动播放效果。
  $con.hover(function () { //定义鼠标悬浮与离开事件
    clearInterval(loop); //鼠标悬浮时移除Loog定时器，即停止播放
  }, function () {
    loop = setInterval(autoChange, 5000); //鼠标离开时载放Loog定时器，继续播放
  });
  $btns.find('a').click(function () {//定义tab按钮事件
    i = $(this).index() - 1; //tab按钮中当前A标签的index值-1，并赋值给i计数器
    autoChange();  //调用切换方法切换图片
  });
});

로그인 후 복사

위의 주의사항을 읽어보신 후 원리를 이해하셨는지 궁금합니다. 실제로 전체 코드는 네 부분으로 나뉩니다.

1. 이미지 전환
i를 카운터로 사용하고, 현재 i에 대한 그림을 표시하고, 다른 모든 그림을 숨기고, 현재 i에 대한 버튼에 ggOn 스타일을 추가하고, 다른 버튼에 대한 ggOn 스타일을 제거합니다. 스위칭 함수를 1이라고 합니다.
2. 자동재생 5초마다 전환 함수를 호출하는 타이머 루프를 정의합니다.

3. 마우스 호버 이벤트 마우스를 가리키면 루프 타이머가 지워지고 마우스가 떠날 때 루프 타이머가 로드되는 것으로 나타났습니다.

4. 버튼 이벤트 탭 버튼 클릭 이벤트를 바인딩합니다. 클릭 후 현재 탭 버튼의 인덱스 값 -1을 할당하고 전환 기능을 호출합니다.

위 내용은 모두 이미지 캐러셀을 구현하기 위한 jquery의 핵심 코드입니다. 튜토리얼에는 아직 부족한 부분이 많이 있으므로 잘 살펴보시기 바랍니다.