>  기사  >  php教程  >  그라데이션 기능 설정이 포함된 캐러셀 플러그인의 두 번째 릴리스

그라데이션 기능 설정이 포함된 캐러셀 플러그인의 두 번째 릴리스

WBOY
WBOY원래의
2016-09-08 08:29:171380검색

업그레이드 버전이 출시되었습니다
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회)

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.