그라데이션 기능 설정이 포함된 캐러셀 플러그인의 두 번째 릴리스
- WBOY원래의
- 2016-09-08 08:29:171384검색
업그레이드 버전이 출시되었습니다
Node.js 코드/**이미지 캐러셀*/<br>
/**초기 매개변수 설정*/<br>
_fun={<br>
Multid:'qi',//한 페이지에 여러 캐러셀 플러그인이 나타나는 경우 캐러셀 코드를 복사하여 이 매개변수를 다른 값으로 설정하세요. 이 값은 ul<br>의 ID입니다.
Multcla:'nei_img',//한 페이지에 여러 캐러셀 플러그인이 나타나는 경우 캐러셀 코드를 복사하고 이 매개변수를 다른 값으로 설정하세요. 이 값은 ul을 래핑하는 클래스<br>입니다.
sw:1,//자동 캐러셀 스위치 0은 켜져 있고 1은 꺼져 있습니다<br>
ti:2000,//자동 회전 시간<br>
sba:1,//아래에 선택한 태그를 표시할지 여부<br>
ba:'#ACAAAA',//선택한 배경의 배경색 설정<br>
금지:'#1D63AF',//배경색 설정이 선택되지 않았습니다<br>
bacla:'qink',//아래 체크박스 클래스 설정<br>
jianb:1,//그라데이션 활성화 여부<br>
jianban:30, // 그림이 그라데이션될 때마다 그림 그라데이션에 대한 s 매개변수 설정은 자동 재생 시간 간격(권장 값 30)의 3% 미만이어야 합니다. <br>
}<br>
/**초기 매개변수 설정*/<br>
<br>
var qik=1;<br>
$(function(){//캐러셀 초기화 <br>
var lio=$('#'+_fun.multid+' li');<br>
lio.mouseover(function(){//이미지에 마우스를 올리면 자동 재생이 중지됩니다<br>
qik=0;<br>
});<br>
lio.mouseout(function(){//이미지 밖으로 마우스를 떼면 자동 재생이 시작됩니다<br>
qik=1;<br>
});<br>
$.each(lio, 함수(k,v) {<br>
If(k==0){<br>
$(v).addClass('img_lib');<br>
}그 외{<br>
$(v).addClass('img_lin');<br>
}<br>
}) <br>
If(_fun.sba){<br>
var obal=$('.'+_fun.multcla);<br>
for(i=0;i<lio.length></lio.length>
If(i==(lio.length-1)){<br>
obal.after('<span class="'+_fun.bacla+'" style="배경:'+_fun.ba+'" id="'+_fun.multid+(lio.length-i)+'" onmouseout="kai()" onclick="qin('+(lio.length-i)+')"></span> ');<br>
}그밖에{<br>
obal.after('<span class="'+_fun.bacla+'" style="배경:'+_fun.ban+'" id="'+_fun.multid+(lio.length-i)+'" onmouseout="kai()" onclick="qin('+(lio.length-i)+')"></span> ');<br>
}<br>
}<br>
}<br>
})<br>
<br>
function kai(){//자동 재생 기능 활성화<br>
qik=1;<br>
}<br>
function den(){//자동재생 기능 끄기<br>
qik=0;<br>
}<br>
<br>
함수 qin(i){//선택된 함수<br>
qik=0;//마우스를 클릭하면 자동 재생이 중지됩니다<br>
var liog_q=$('#'+_fun.multid+' li');<br>
$.each(liog_q, 함수(kw,vw) {<br>
$('#'+_fun.multid+(kw+1)).css('배경',_fun.ban);<br>
If(kw==(i-1)){<br>
$(vw).removeClass('img_lin');<br>
$(vw).addClass('img_lib');<br>
만약(_fun.jianb){<br>
funqin(0,9,vw,_fun.jianban);//그라디언트 표시 기능<br>
}<br>
~
}그 외{<br> $(vw).removeClass('img_lib');<br>
$(vw).addClass('img_lin');<br>
}<br>
});<br>
$('#'+_fun.multid+i).css('배경',_fun.ba);<br>
}<br>
<br>
함수 반동(){//后退函数<br>
<br>
var liog_r=$('#'+_fun.multid+' li');<br>
var l_r=liog_r.length;<br>
var bl_r;<br>
$.each(liog_r, 함수(k,v) {<br>
if(v.className=='img_lib'){<br>
if(k!=0){ <br>
bl_r=k;<br>
$(v).removeClass('img_lib');<br>
$(v).addClass('img_lin');<br>
}그밖에{<br>
bl_r=l_r;<br>
$(v).removeClass('img_lib');<br>
$(v).addClass('img_lin');<br>
}<br>
}<br>
});<br>
$.each(liog_r, function(kw,vw) {<br>
if(kw==(bl_r-1)){<br>
$(vw).removeClass('img_lin');<br>
$(vw).addClass('img_lib');<br>
if(_fun.jianb){<br>
funqin(0,9,vw,_fun.jianban);//渐变显示函数<br>
}<br>
if(_fun.sba){<br>
$('#'+_fun.multid+(kw+1)).css('배경',_fun.ba);//创建下면选择标签<br>
}<br>
}그밖에{<br>
if(_fun.sba){<br>
$('#'+_fun.multid+(kw+1)).css('배경',_fun.ban);<br>
}<br>
}<br>
});<br>
<br>
}<br>
<br>
함수 geen(){//前进按钮函数<br>
<br>
var liog=$('#'+_fun.multid+' li');<br>
var l=liog.length;<br>
var bl;<br>
$.each(liog, 함수(k,v) {<br>
if(v.className=='img_lib'){<br>
if(k!=(l-1)){ <br>
bl=k;<br>
$(v).removeClass('img_lib');<br>
$(v).addClass('img_lin');<br>
}그밖에{<br>
bl=-1; <br>
$(v).removeClass('img_lib');<br>
$(v).addClass('img_lin');<br> }<br>
}<br>
});<br>
$.each(liog, function(kw,vw) {<br>
If(kw==(bl+1)){<br>
$(vw).removeClass('img_lin');<br>
$(vw).addClass('img_lib');<br>
만약(_fun.jianb){<br>
funqin(0,9,vw,_fun.jianban);//그라디언트 표시 기능<br>
}<br>
if(_fun.sba){<br>
$('#'+_fun.multid+(kw+1)).css('Background',_fun.ba);//다음 선택 태그 생성 <br>
}<br>
}그 외{<br>
if(_fun.sba){<br>
$('#'+_fun.multid+(kw+1)).css('배경',_fun.ban);<br>
}<br>
}<br>
});<br>
<br>
}<br>
<br>
funqin(i,k,ob,s) 함수{//그림 그라데이션에 사용되는 숫자 증가 함수의 매개변수 설정은 자동 재생 시간 간격의 10% 미만이어야 합니다<br>
If(i<k></k>
난++;<br>
$(ob).css('불투명도','0.'+i+'9');<br>
}<br>
setTimeout(function(){//매개변수를 허용할 수 있도록 익명 함수로 작성해야 합니다<br>
funqin(i,k,ob,s);<br>
},s);<br>
}<br>
<br>
<br>
function gee(){//앞으로 기능-(정규 시간 함수, 앞으로 버튼 기능으로 사용할 수 없음)<br>
If(qik){//타임 점프 함수는 앞으로 함수를 호출하기 때문에 이 함수에 스위치를 설정하세요 <br>
var liog=$('#'+_fun.multid+' li');<br>
var l=liog.length;<br>
var bl;<br>
$.each(liog, function(k,v) {<br>
If(v.className=='img_lib'){<br>
if(k!=(l-1)){
bl=k;<br>
$(v).removeClass('img_lib');<br>
$(v).addClass('img_lin');<br>
}그밖에{<br>
bl=-1;<br>
$(v).removeClass('img_lib');<br>
$(v).addClass('img_lin');<br>
}<br>
}<br>
});<br>
$.each(liog, function(kw,vw) {<br>
If(kw==(bl+1)){<br>
$(vw).removeClass('img_lin');<br>
$(vw).addClass('img_lib');<br>
만약(_fun.jianb){<br>
funqin(0,9,vw,_fun.jianban);//그라디언트 표시 기능<br>
}<br>
if(_fun.sba){<br> $('#'+_fun.multid+(kw+1)).css('Background',_fun.ba);//다음 선택 태그 생성 <br>
}<br>
}그 외{<br>
if(_fun.sba){<br>
$('#'+_fun.multid+(kw+1)).css('배경',_fun.ban);<br>
}<br>
}<br>
});<br>
}<br>
}<br>
<br>
/**예약된 실행이 시작됩니다.*/<br>
if(_fun.sw){<br>
setInterval(function(){//매개변수를 허용할 수 있도록 익명 함수 패키징<br>
gee();<br>
}, _fun.ti);<br>
}<br>
/**타이밍 실행 종료*/<br>
/**이미지 캐러셀*/모든 렌더링 열기:
아래 체크박스 효과 그림을 닫으세요:
확인란의 배경색을 수정합니다.
(스타일은 CSS 파일에서 수정 가능)
qin.zip
(896.86 KB 다운로드: 6회)