>웹 프론트엔드 >JS 튜토리얼 >JQuery_jquery 기반의 상품 광고 효과

JQuery_jquery 기반의 상품 광고 효과

WBOY
WBOY원래의
2016-05-16 18:14:121212검색

효과 도표는 다음과 같습니다.
JQuery_jquery 기반의 상품 광고 효과
애니메이션 효과 소개: 이 광고 세트의 효과는 페이지를 연 후 사진이 자동으로 재생된다는 것입니다. 총 5장의 사진 1~5 중 표준에 속한다면 오른쪽 하단의 1, 2, 3, 4, 5 목록으로 이동하시면 보고 싶은 사진으로 자유롭게 전환하실 수 있습니다. 그림 전환은 아래에서 위로 이루어집니다.
JQuery_jquery 기반의 상품 광고 효과
제작 아이디어: 먼저 이 5장의 사진을 ul의 5개 목록에 넣고
《1》전체 사진 수를 찾으면 1.2.3.4를 클릭합니다. 5, 해당 번호가 전달되고 해당 사진이 표시됩니다.
《2》속성 마크가 배치되면 애니메이션을 중지합니다(clearIntval() 사용 가능). 속성 마크가 이동되면 setIntval(function, time)을 사용하여 3000밀리초마다 이 함수를 실행할 수 있습니다.
《3》이 애니메이션 기능을 완료합니다. 이 함수에서는 먼저 이 애니메이션 영역(.slider)의 높이를 얻을 수 있습니다. 그런 다음 애니메이션 사용자 정의 애니메이션 기능을 사용하여 TOP 위치를 변경합니다. 그리고 현재 li의 숫자에 강조 효과를 추가합니다.
《4》한 가지 더, TOP 변경을 정상적으로 수행하려면 현재 영역의 상위 태그(.ad)에 "position:relative;"를 설정해야 합니다. 그러면 모든 것이 정상입니다. 제작 코드는 다음과 같습니다.

1》html 구조는 다음과 같습니다.

코드를 복사하세요 코드는 다음과 같습니다.





  • < li>
  • < /li>

" >
  • 1

  • 2

  • 3

  • 4
  • ;
  • 5< /li>


  • 2》jquery 코드는 다음과 같습니다.




    코드 복사
    코드는 다음과 같습니다. //하이퍼링크 텍스트 프롬프트$(function(){
    var len = $ (".num >li").length;
    var index = 0;
    var adTimer;

    $(" .num li").mouseover(function(){
    index = $(".num li").index(this); //" this "는 " $(this) "로 대체할 수 있습니다.
    showImg(index);
    }).eq(0) .mouseover(); //초기화에 사용되며 페이지가 열리면 첫 번째 그림이 애니메이션을 트리거하는 속성으로 배치됩니다. >
    //$(".ad").hover(function() {
    clearInterval(adTimer);
    },function() {
    adTimer = setInterval(function(){
    showImg(index);
    index ;
    if( index == len ){ index=0; }
    } , 3000);
    }).trigger("mouseleave")
    })

    //주어진 인덱스를 통해 다른 이미지 표시

    function showImg(index){
    var adHeight = $(".content_right .ad").height()
    $(".slider").stop(true,false).animate ( {"top": -adHeight*index},1000 ) ;
    $(".num li").removeClass("on")
    .eq(index).addClass("on")
    }



    3》해당 CSS 스타일:





    코드 복사

    코드는 다음과 같습니다.

    .content_right{
    배경:#eee;
    테두리: 1px 단색 #AAAAAA;
    너비: 586px;
    플로트:왼쪽;
    }


    .content_right .ad {
    margin-bottom:10px;
    폭:586px;
    높이:150px;
    오버플로:숨김;
    위치:상대적;
    }

    .content_right .slider,
    .content_right .num {
    위치:절대;
    }

    .content_right .slider li{
    list-style:none;
    디스플레이:인라인;
    }

    .content_right .slider img{
    너비:586px;
    높이:150px;
    디스플레이:블록;
    }
    .content_right .num{
    right:5px;
    하단:5px;
    }
    .content_right .num li{
    float: 왼쪽;
    너비: 16px;
    높이: 16px;
    줄 높이: 16px;
    텍스트 정렬: 가운데;
    글꼴군: Arial;
    글꼴 크기: 12px;
    색상: #FF7300;
    배경색: #fff;
    테두리: 1px 실선 #FF7300;
    오버플로: 숨김;
    여백: 3px 1px;
    커서: 포인터;
    }
    .content_right .num li.on{
    너비: 21px;
    높이: 21px;
    줄 높이: 21px;
    색상: #fff;
    배경색: #FF7300;
    글꼴 크기: 16px;
    여백: 0 1px;
    테두리: 0;
    글꼴 두께: 굵게;
    }
    성명:
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.