html css js_javascript 기술을 사용하여 구현된 간단한 그림 전환 효과

그림과 같습니다.


이미지 전환 효과는 구현이 매우 간단하고 호환성이 좋습니다.

html 페이지는 다음과 같습니다

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

• < ;/a>


• 


• 

< ;li>< ;/li>

<-- 래퍼 끝 -->



css 스타일

코드 복사 코드는 다음과 같습니다. :

< ;style type="text/css">

* {margin:0; padding:0;}
body {font-size:12px; 222; 글꼴 계열:Verdana,Arial,Helvetica, sans-serif; 배경:#f0f0f0;}
.clearfix:after {content: "."; 투명: 둘 다; 숨겨진;}
.clearfix {zoom: 1;}
ul,li {list-style:none;}
img {border:0;}

.wrapper {너비:800px ; 여백:0 자동; 패딩 바닥:50px ;}

/* qqshop 초점 */
#focus {width:800px; Overflow:hidden; position:relative;} >#focus ul {높이:380px; 위치: 절대;}
#focus ul li {float:left; 높이:280px; 위치:상대적; >#focus ul li div {position:absolute;overflow:hidden;}
#focus .btnBg {위치:절대값:800px; 왼쪽:000;
#focus .btn {위치:절대값: 780px; 높이:10px; 오른쪽:0; 텍스트 정렬:오른쪽;}
#focus .btn {디스플레이 :inline-block; _zoom: 1; 너비:25px; _font-size:0; 커서:포인터;#focus .btn span.on {배경:#fff;}
#focus .preNext {width:45px; height:100px; position:absolute; top:90px) no-repeat 0 0; 커서:포인터;}
#focus . pre {왼쪽:0;}
#focus .next {오른쪽:0; 오른쪽 상단;}
🎜>
js 스크립트




코드 복사

코드는 다음과 같습니다.

$(function() {
var sWidth = $("#focus").width(); //초점 이미지(표시 영역)의 너비를 구합니다.
var len = $ (" #focus ul li").length; //초점 이미지 개수 가져오기
var index = 0;
var picTimer;

//다음 코드는 숫자 버튼과 버튼 뒤에는 반투명 막대가 있으며 이전 페이지와 다음 페이지에 대한 두 개의 버튼이 있습니다.
var btn = "

" ;
for(var i=0; i < len; i ) {
btn = ""
}
btn = "

";
$("#focus").append(btn) ;
$("#focus .btnBg").css("opacity",0.5)

//해당 콘텐츠를 표시하기 위한 작은 버튼에 대한 마우스 슬라이드인 이벤트 추가
$("#focus . btn 스팬").css("불투명도",0.4).mouseenter(function() {
index = $("#focus .btn 스팬").index(this);
showPics(index);
}).eq(0).trigger("mouseenter");

//이전 페이지 및 다음 페이지 버튼 투명도 처리
$("#focus .preNext" ).css( "불투명도",0.2).hover(function() {
$(this).stop(true,false).animate({"opacity":"0.5"},300);
},function( ) {
$(this).stop(true,false).animate({"opacity":"0.2"},300)
}); 이전 페이지 버튼
$("#focus .pre").click(function() {
index -= 1;
if(index == -1) {index = len - 1;}
showPics (index);
});

//다음 페이지 버튼
$("#focus .next").click(function() {
index = 1;
if(index == len) {index = 0;}
showPics(index);
})

//이 예는 좌우로 스크롤됩니다. li 요소는 같은 페이지에 있습니다. 행은 왼쪽에 있으므로 여기서 주변 ul 요소의 너비를 계산해야 합니다.
$("#focus ul").css("width",sWidth * (len) );

//마우스 슬라이드 초점 사진이 켜져 있으면 자동 재생을 중지하고 슬라이드 아웃하면 자동 재생을 시작합니다.
$("#focus").hover(function() {
clearInterval(picTimer);
},function() {
picTimer = setInterval(function() {
showPics(index);
index ;
if(index == len) {index = 0;}
},4000); //this 4000 자동 재생 간격을 나타냅니다. 단위는 밀리초입니다.
}).trigger("mouseleave")//화면 표시 기능 , 수신된 인덱스 값에 따라 해당 콘텐츠 표시
function showPics(index ) { //일반 전환
var nowLeft = -index*sWidth; //인덱스 값을 기준으로 ul 요소의 왼쪽 값을 계산합니다.
$("#focus ul").stop(true,false).animate({ "left":nowLeft},300); //animate()를 통해 계산된 위치로 스크롤하도록 ul 요소를 조정합니다.
//$("#focus .btnspan").removeClass("on").eq( index).addClass("on") //현재 버튼에 대해 선택한 효과로 전환
$(" #focus .btn 범위").stop(true,false).animate({"불투명도":" 0.4"},300).eq(index).stop(true,false).animate({"불투명도":" 1"},300); //현재 버튼에 대해 선택한 효과로 전환
}
});


왼쪽 및 오른쪽 전환 이미지 사용