jQuery+css_jquery로 구현된 그림 함수 코드 전환-JS 튜토리얼-php.cn

jQuery+css_jquery로 구현된 그림 함수 코드 전환

WBOY

풀어 주다： 2016-05-16 15:17:42

원래의

1221명이 탐색했습니다.

이 글의 예시에서는 jQuery+css로 구현한 이미지 전환 함수 코드를 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

런닝 효과 스크린샷은 다음과 같습니다.

구체적인 코드는 다음과 같습니다.

<!DOCTYPE html>
<html> 
 <head>
  <title>demo</title>
  <script type="text/javascript" src="jquery.js"></script>
  <style type="text/css" >
   body {
    margin:0; padding:0;
   }
   .container {
    border:6px solid gray; background:black;
    width:600px; height:400px; position:relative;
    left:50%; margin-left:-300px; border-radius:6px;
    -webkit-border-radius:6px; -moz-border-radius:6px;
    overflow:hidden;
   }
   .text-center {
    text-align:center;
   }
   h1 {
     font-size:50px; color:gray; font-weight:bolder;
   }
   .imgUL {
    width:100%; height:100%; margin:0px; padding:0px; list-style:none;
   }
   .imgUL li {
    float:left; margin:0px; padding:0px; height:100%; 
    color:gray; font-weight:bolder; text-align:center;
    font-size:100px; line-height:400px;
   }
   .pageUL {
    position:relative; top:-40px; height:40px; list-style:none;
    margin:0px; padding:0px; float:right;
   }
   .pageUL li {
    float:left; display:block; width:36px;
    height:36px; border:2px solid red;
     margin-left:5px; border-radius:4px;
    -webkit-border-radius:4px; text-align:center;
    -moz-border-radius:4px; line-height:36px;
    color:gray; font-weight:bolder; cursor:pointer;
   }
   .pageUL li:hover {
    background:#5ACF00; color:black;
   }
   .pageUL li.active {
    background:#5ACF00; color:black;
   }
  </style>
  <script type="text/javascript" >
   $(document).ready(function(){
    var autoInterval = null,
     imgUL = $(".imgUL"),
     imgliList = imgUL.children("li"),
     liListLength = imgliList.length,
     pageUL = $('.pageUL'),
     pageLiList = pageUL.children('li'),
     pageLiListLength = pageLiList.length,
    // initialize
    activePageLi = $(pageLiList[0]);
    activePageLi.addClass('active');
    imgliList.width(600);
    imgUL.width(liListLength * 600);
    $(".pageUL li").mouseover(function(){
     mouseoverAnimate(this);
    }).mouseout(function(){
     createInterval();
    });
    createInterval();
    function mouseoverAnimate(_this){
     clearInterval(autoInterval);
     activePageLi.removeClass('active');
     activePageLi = $(_this);
     var pageNo = parseInt(activePageLi.html());
     activePageLi.addClass('active');
     imgUL.animate({
      'marginLeft': -600 * (pageNo - 1)
     }, 10);
    }
    function createInterval(){
     autoInterval = setInterval(function(){
      var pageNo = parseInt(activePageLi.html());
      pageNo++;
      if(pageNo > pageLiListLength) {
       pageNo = 1;
      }
      activePageLi.removeClass('active');
      activePageLi = $(pageLiList[pageNo - 1]);
      activePageLi.addClass('active');
      imgUL.animate({
       'marginLeft': -600*(pageNo - 1)
      }, 1100);
     }, 1500);
    }
   });
  </script>
 </head>
 <body>
  <h1 class="text-center">Demo</h1>
  <div class="container" id="container">
   <ul class="imgUL">
    <li>Page1</li>
    <li>Page2</li>
    <li>Page3</li>
    <li>Page4</li>
    <li>Page5</li>
    <li>Page6</li>
   </ul>
   <ul class="pageUL">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
   </ul>
  </div>
 </body>
</html>

로그인 후 복사

jQuery 특수 효과와 관련된 더 많은 콘텐츠에 관심이 있는 독자는 이 사이트의 특별 주제인 "jQuery의 일반적인 클래식 특수 효과 요약" 및 "jQuery 애니메이션 요약"을 확인할 수 있습니다. 및 특수효과 활용"

이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.