그림에서 볼 수 있듯이.
이미지 전환 효과는 구현하기가 간단하고 호환성이 우수합니다.
HTML 페이지는 다음과 같습니다
코드 사본은 다음과 같습니다.
<div>
<div id = "Focus">
<ul>
<li> <a href = "http://www.lanrentuku.com/"target = "_ blank"> <img src = "img/01.jpg"/> </a> </li>
<li> <a href = "http://www.lanrentuku.com/"target = "_ blank"> <img src = "img/02.jpg"/> </a> </li>
<li> <a href = "http://www.lanrentuku.com/"target = "_ blank"> <img src = "img/03.jpg"/> </a> </li>
<li> <a href = "http://www.lanrentuku.com/"target = "_ blank"> <img src = "img/04.jpg"/> </a> </li>
<li> <a href = "http://www.lanrentuku.com/"target = "_ blank"> <img src = "img/05.jpg"/> </a> </li>
</ul>
</div>
</div> <!-래퍼 엔드->
</body>
CSS 스타일
코드 사본은 다음과 같습니다.
<스타일 유형 = "텍스트/CSS">
* {마진 : 0; 패딩 : 0;}
바디 {글꼴 크기 : 12px; 색상 :#222; Font-Family : Verdana, Arial, Helvetica, Sans-serif; 배경 :#f0f0f0;}
.ClearFix : {content : "."이후; 디스플레이 : 블록; 높이 : 0; Clear : 둘 다; 가시성 : 숨겨진;}
.ClearFix {Zoom : 1;}
ul, li {List 스타일 : 없음;}
img {border : 0;}
.wrapper {너비 : 800px; 여백 : 0 Auto; 패딩-바닥 : 50px;}
/ * qqshop 포커스 */
#focus {너비 : 800px; 높이 : 280px; 오버플로 : 숨겨진; 위치 : 상대;}
#focus ul {높이 : 380px; 위치 : 절대;}
#focus ul li {float : 왼쪽; 너비 : 800px; 높이 : 280px; 오버플로 : 숨겨진; 위치 : 상대; 배경 :#000;}
#focus ul li div {위치 : 절대; 오버플로 : 숨겨진;}
#focus .btnbg {위치 : 절대; 너비 : 800px; 높이 : 20px; 왼쪽 : 0; 하단 : 0; 배경 :#000;}
#focus .btn {위치 : 절대; 너비 : 780px; 높이 : 10px; 패딩 : 5px 10px; 오른쪽 : 0; 하단 : 0; 텍스트 정렬 : 맞습니다;}
#focus .btn span {display : 인라인-블록; _display : 인라인; _zoom : 1; 너비 : 25px; 높이 : 10px; _font-size : 0; 마진 왼쪽 : 5px; 커서 : 포인터; 배경 : #fff;}
#focus .btn span.on {배경 : #fff;}
#focus .prenext {너비 : 45px; 높이 : 100px; 위치 : 절대; 상단 : 90px; 배경 : URL (img/sprite.png) No-Repeat 0 0; 커서 : 포인터;}
#focus .pre {왼쪽 : 0;}
#focus .next {오른쪽 : 0; 배경 위치 : 오른쪽 상단;}
</스타일>
JS 스크립트
코드 사본은 다음과 같습니다.
$ (function () {
var swidth = $ ( "#focus"). width (); // 포커스 맵의 너비 가져 오기 (디스플레이 영역)
var len = $ ( "#focus ul li"). 길이; // 초점 이미지 수를 얻습니다
var index = 0;
var pictimer;
// 다음 코드는 숫자 버튼과 버튼 뒤의 반투명 막대와 이전 페이지와 다음 페이지의 두 개의 버튼을 추가합니다.
var btn = "<div class = 'btnbg'> </div> <div class = 'btn'>";
for (var i = 0; i <len; i ++) {
btn += "<span> </span>";
}
btn += "</div> <div class = 'prenext pre'> </div> <div class = 'prenext next'> </div>";
$ ( "#focus"). Append (btn);
$ ( "#focus .btnbg"). css ( "불투명도", 0.5);
// 작은 버튼으로 이벤트에서 마우스 슬라이드를 추가하여 해당 콘텐츠를 표시합니다.
$ ( "#focus .btn span"). css ( "불투명도", 0.4) .MouseEnter (function () {
index = $ ( "#focus .btn span"). index (this);
쇼핑 (인덱스);
}). eq (0) .trigger ( "마우스 엔터");
// 이전 페이지 및 다음 페이지 버튼 투명성 처리
$ ( "#focus .prenext"). css ( "불투명도", 0.2) .hover (function () {
$ (this) .stop (true, false) .animate ({ "불투명도": "0.5"}, 300);
},기능() {
$ (this) .stop (true, false) .animate ({ "불투명도": "0.2"}, 300);
});
// 이전 페이지 버튼
$ ( "#focus .pre"). 클릭 (function () {
색인 -= 1;
if (index == -1) {index = len -1;}
쇼핑 (인덱스);
});
// 다음 페이지 버튼
$ ( "#focus .next"). 클릭 (function () {
색인 += 1;
if (index == len) {index = 0;}
쇼핑 (인덱스);
});
//이 예제는 왼쪽과 오른쪽으로 스크롤링됩니다. 즉, 모든 LI 요소가 같은 행에 왼쪽으로 떠 다니기 때문에 주변 장치 ul 요소의 너비는 여기에서 계산해야합니다.
$ ( "#focus ul"). css ( "width", swidth * (len));
// 마우스가 초점 이미지에 미끄러 져 나올 때 자동 재생이 중지되고 마우스가 미끄러질 때 시작됩니다.
$ ( "#focus"). hover (function () {
ClearInterval (Pictimer);
},기능() {
pictimer = setInterval (function () {
쇼핑 (인덱스);
색인 ++;
if (index == len) {index = 0;}
}, 4000); //이 4000은 자동 재생 간격을 나타냅니다.
}). 트리거 ( "Mouseleave");
// 그림 함수 표시, 수신 된 인덱스 값에 따라 해당 콘텐츠를 표시합니다.
함수 showpics (index) {// 일반 스위치
var nowleft = -index*swidth; // 인덱스 값에 따라 UL 요소의 왼쪽 값을 계산합니다.
$ ( "#focus ul"). stop (true, false) .animate ({ "left": nowleft}, 300); // animate ()를 통해 UL 요소를 계산 된 위치로 스크롤합니다.
// $ ( "#focus .btn span"). RemoveClass ( "on"). eq (index) .addclass ( "on"); // 현재 버튼의 선택한 효과로 전환합니다
$ ( "#focus .btn span"). stop (true, false) .animate ({ "불투명": "0.4"}, 300) .eq (index) .Stop (true, false) .animate ({불투명도 ":"1 "}, 300); // 현재 버튼의 선택한 효과로 전환합니다
}
});
왼쪽 및 오른쪽 전환 사진