jquery 슬라이드, 좌우 단추, 희미하게, 자동으로 구성 요소 재생
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title> </title>
- <style>
- body{ margin:0; padding:0;}
- img{ border:none;}
- .XYMarquee{ width:800px; height:600px; overflow:hidden; margin:0px auto 0; position:relative;}
- .XYMarquee .banner{ position:absolute; left:0; top:0; z-index:10; display:none;}
- .prev{ padding:37px; position:absolute; z-index:20; left:5px; top:300px; font-size:45px; cursor:pointer;}
- .next{ padding:37px; position:absolute; z-index:20; left:685px; top:300px; font-size:45px; cursor:pointer;}
- </style>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
- </head>
-
- <body>
- <div class="XYMarquee">
- <a href="#" target="_blank" title="1"><img src="images/1.jpg" width="800" height="600" class="banner"/></a>
- <a href="#" target="_blank" title="2"><img src="images/2.JPG" width="800" height="600" class="banner"/></a>
- <a href="#" target="_blank" title="3"><img src="images/4.jpg" width="800" height="600" class="banner"/></a>
- <div class="prev"><</div>
- <div class="next">></div>
- </div>
- <script src="index.js"></script>
- <script>
- $(document).ready(function () {
- $(".banner:first").show();
- });
- </script>
-
- </body>
- </html>
이 HTML 코드에서 몇 가지 문제를 주의해야 한다
첫 번째 스크롤된 그림의 바깥쪽은 상대적인 포지셔닝이나 절대적인 포지셔닝으로 설정해야 합니다!안 그러면 안 굴러!
두 번째 모든 그림은 스타일에 제가 디스플레이: none 이거 꼭 써야 돼요. 그렇지 않으면 문제가 생겨요. 굴러갈 때 첫 번째가 끝나고 두 번째가 빨리 나와요. 그러면 문제가 있어요!
JS 코드:
- // JavaScript Document
- function setTab(IClass,WClass,time,prev,next){
- self.o = 0;//
- self.Banner = $(IClass);
- self.bannerFirst = $(IClass+":first");
- self.XYMarquee = $(WClass);
- self.Prev = $(prev);
- self.Next = $(next);
- self.time = time;
- }
- setTab.prototype ={
- init : function(){
- var self = this;
- self.auto();
- self.Prev();
- self.Next();
- self.hover();
- },
- auto : function(){
- self.mytime = setInterval(function(){
- pub();
- },self.time)
- },
- hover : function(){
- self.XYMarquee.hover(function(){
- if(self.mytime){ clearInterval(self.mytime);}
- },function(){
- self.mytime = setInterval(function(){
- pub();
- },self.time);
- });
- },
- Prev : function(){
- self.Prev.click(function(){
- self.o--;
- if(self.o==-4){self.o=-1;}
- var len = self.Banner.length;
- self.Banner.fadeOut();
- self.Banner.eq(self.o).fadeIn();
- });
- },
- Next : function(){
- self.Next.click(function(){
- pub();
- });
- }
- }
- function pub(){
- self.o++;
- var len = self.Banner.length;
- self.Banner.fadeOut();
- self.Banner.eq(self.o).fadeIn();
- if(self.o==len){
- self.o = 0;
- self.bannerFirst.fadeIn(); // ， BUG
- }
- }
- var newSetTab=new setTab(".banner",".XYMarquee","3000",".prev",".next");
- newSetTab.init();
물론 JS가 자바스크립트 대상 프로그래밍으로 봉인한 js js 코드는 어렵지 않습니다. 관건은 구조가 좋으면 양식이 좋으면 js는 어렵지 않습니다. 아래에 첨부파일이 있으면 다운로드할 수 있습니다. OK!이렇게 하자. 코드를 많이 보면 이해할 수 있어. 지금'젓가락형제-좋은 남자'라는 노래를 듣고 있는데 할 말도 없고 생각이 혼란스러워!허허!!이 노래는 개인적으로 듣기 좋은데 시간 나면 한번 들어보세요 ㅋㅋ!!!이 노래가 나인 것 같아!!하하
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
양식 제출 후 제출 버튼 비활성화텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
