999视频网,香蕉大黄香蕉在线观看,国产成人精品2021欧美日韩

- 龍誠動態
  
  行業新聞
  
  我們的觀點
  
  公司公告
  
  建站技術
  
  網站SEO優化
  
  網站制作流程
  
  產品報價
  - 聯系電話：0577-55882408
  - 傳真號碼：0577-55882411
  - 聯系手機：15224122065
  - 聯系地址：溫州市甌海站南商貿城C幢306
- - 首頁-新聞中心-建站技術
  <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery-1.4.2.min.js"></script> <title>JS幻燈片插件</title> </head> <body> <style> br {clear:both;} .frame { width:600px; height:240px; background-color:#CCC; overflow:hidden; } .frame .list { list-style:none; padding:0; margin:0; width:10000px; } .frame .list li { width:600px; height:240px; float:left; } .frame #big_list2 { height:10000px; } .frame #big_list2 li { clear:both; } .frame #big_list4 { height:10000px; } .frame #big_list4 li { clear:both; } .l_frame { width:260px; height:80px; background-color:#CCC; overflow:hidden; float:left; } .l_frame .list { list-style:none; padding:0; margin:0; width:10000px; } .l_frame .list li { float:left; width:76px; height:76px; cursor:pointer; border:solid 2px #cc3910; } .l_frame .list .cur { border:solid 2px #0FF; } .l_frame2 { height:208px; width:80px; background-color:#CCC; overflow:hidden; } .l_frame2 .list { list-style:none; padding:0; margin:0; height:10000px; } .l_frame2 .list li { width:76px; height:76px; cursor:pointer; border:solid 2px #cc3910; } .l_frame2 .list .cur { border:solid 2px #0FF; } .slide_nav { height:80px; width:16px; display:block; float:left; background-color:#2A0; text-indent:-10000px; } .slide_nav2 { width:80px; height:16px; display:block; background-color:#2A0; text-indent:-10000px; } </style> <h3>A、大圖：向左輪轉；小圖：向左輪轉</h3> <div class="wmvwfqqt" id="big_frame" class="frame"> <ul id="big_list" class="list"> <li style="background-color:#332f29;">aaaa</li> <li style="background-color:#f1f2c0;">bb</li> <li style="background-color:#ccc59e;">cc</li> <li style="background-color:#8fa68e;">dd</li> <li style="background-color:#cc3910;">eeee</li> </ul> </div> <br /> <a id="back" class="slide_nav" href="#">left</a> <div class="wmvwfqqt" id="small_frame" class="l_frame"> <ul id="small_list" class="list"> <li id="wmvwfqqt" class="cur" style="background-color:#332f29;">aaaa</li> <li style="background-color:#f1f2c0;">bb</li> <li style="background-color:#ccc59e;">cc</li> <li style="background-color:#8fa68e;">dd</li> <li style="background-color:#cc3910;">eeee</li> </ul> </div> <a id="forward" class="slide_nav" href="#">right</a> <br /> <br /> <br /> <br /> <h3>B、大圖：向上輪轉；小圖：向左輪轉</h3> <div class="wmvwfqqt" id="big_frame2" class="frame"> <ul id="big_list2" class="list"> <li style="background-color:#d57d50;">aaaa</li> <li style="background-color:#cc3910;">bb</li> <li style="background-color:#f1f2c0;">cc</li> <li style="background-color:#ccc59e;">dd</li> <li style="background-color:#8fa68e;">eeee</li> <li style="background-color:#332f29;">FFF</li> </ul> </div> <br /> <a id="back2" class="slide_nav" href="#">a</a> <div class="wmvwfqqt" id="small_frame2" class="l_frame"> <ul id="small_list2" class="list"> <li id="wmvwfqqt" class="cur" style="background-color:#d57d50;">aaaa</li> <li style="background-color:#cc3910;">bb</li> <li style="background-color:#f1f2c0;">cc</li> <li style="background-color:#ccc59e;">dd</li> <li style="background-color:#8fa68e;">eeee</li> <li style="background-color:#332f29;">FFF</li> </ul> </div> <a id="forward2" class="slide_nav" href="#">b</a> <br /> <br /> <br /> <br /> <h3>C、大圖：向左輪轉；小圖：向上輪轉</h3> <div style="float:left;"> <div class="wmvwfqqt" id="big_frame3" class="frame"> <ul id="big_list3" class="list"> <li style="background-color:#d57d50;">aaaa</li> <li style="background-color:#cc3910;">bb</li> <li style="background-color:#f1f2c0;">cc</li> <li style="background-color:#ccc59e;">dd</li> <li style="background-color:#8fa68e;">eeee</li> <li style="background-color:#332f29;">FFF</li> </ul> </div> </div> <div style="float:left; margin:0 0 0 8px;"> <a id="back3" class="slide_nav2" href="#">a</a> <div class="wmvwfqqt" id="small_frame3" class="l_frame2"> <ul id="small_list3" class="list"> <li id="wmvwfqqt" class="cur" style="background-color:#d57d50;">aaaa</li> <li style="background-color:#cc3910;">bb</li> <li style="background-color:#f1f2c0;">cc</li> <li style="background-color:#ccc59e;">dd</li> <li style="background-color:#8fa68e;">eeee</li> <li style="background-color:#332f29;">FFF</li> </ul> </div> <a id="forward3" class="slide_nav2" href="#">b</a> </div> <br /> <br /> <br /> <br /> <h3>D、大圖：向上輪轉；小圖：向上輪轉</h3> <div style="float:left;"> <div class="wmvwfqqt" id="big_frame4" class="frame"> <ul id="big_list4" class="list"> <li style="background-color:#d57d50;">aaaa</li> <li style="background-color:#cc3910;">bb</li> <li style="background-color:#f1f2c0;">cc</li> <li style="background-color:#ccc59e;">dd</li> <li style="background-color:#8fa68e;">eeee</li> <li style="background-color:#332f29;">FFF</li> </ul> </div> </div> <div style="float:left; margin:0 0 0 8px;"> <a id="back4" class="slide_nav2" href="#">a</a> <div class="wmvwfqqt" id="small_frame4" class="l_frame2"> <ul id="small_list4" class="list"> <li id="wmvwfqqt" class="cur" style="background-color:#d57d50;">aaaa</li> <li style="background-color:#cc3910;">bb</li> <li style="background-color:#f1f2c0;">cc</li> <li style="background-color:#ccc59e;">dd</li> <li style="background-color:#8fa68e;">eeee</li> <li style="background-color:#332f29;">FFF</li> </ul> </div> <a id="forward4" class="slide_nav2" href="#">b</a> </div> <br /> <br /> <br /> <br /> </body> </html> <script type="text/javascript"> //初始化 function C_slider(frame,list,Lframe,Llist,forwardEle,backEle,scrollType,LscrollType,acitonType,autoInterval){ this.frame = frame; this.list = list; this.Lframe = Lframe; this.Llist = Llist; this.forwardEle = forwardEle; this.backEle = backEle; this.scrollType = scrollType; this.LscrollType = LscrollType; this.acitonType = acitonType; this.autoInterval = autoInterval; this.slideLength = $("#"+this.Llist+" > li").length;//總的slider數量 this.currentSlide = 0; this.FrameHeight = $("#"+this.frame).height(); this.FrameWidth = $("#"+this.frame).width(); this.lFrameHeight = $("#"+this.Lframe).height(); this.lFrameWidth = $("#"+this.Lframe).width(); this.lListHeight = $("#"+this.Llist+" >li").eq(0).outerHeight(true); this.lListWidth = $("#"+this.Llist+" >li").eq(0).outerWidth(true); var self = this; for(var i = 0; i<this.slideLength; i++) { $("#"+this.Llist+" > li").eq(i).data("index",i); $("#"+this.Llist+" > li").eq(i).bind(this.acitonType,function(){ self.go($(this).data("index")); }); }; //給“上一個”、“下一個”按鈕添加動作 $("#"+this.forwardEle).bind('click',function(){ self.forward(); return false; }); $("#"+this.backEle).bind('click',function(){ self.back(); return false; }); //定論鼠標劃過時，自動輪換的處理 $("#"+this.frame+",#"+this.Lframe+",#"+this.forwardEle+",#"+this.backEle).bind('mouseover',function(){ clearTimeout(self.autoExt); }); $("#"+this.frame+",#"+this.Lframe+",#"+this.forwardEle+",#"+this.backEle).bind('mouseout',function(){ clearTimeout(self.autoExt); self.autoExt = setTimeout(function(){ self.extInterval(); },self.autoInterval); }); //開始自動輪換 this.autoExt = setTimeout(function(){ self.extInterval(); },this.autoInterval); } //執行運動 C_slider.prototype.go = function(index){ this.currentSlide = index; if (this.scrollType == "left"){ $("#"+this.list).animate({ marginLeft: (-index*this.FrameWidth)+"px" }, {duration:600,queue:false}); } else if (this.scrollType == "top"){ $("#"+this.list).animate({ marginTop: (-index*this.FrameHeight)+"px" }, {duration:600,queue:false}); } $("#"+this.Llist+" > li").removeClass("cur"); $("#"+this.Llist+" > li").eq(index).addClass("cur"); //對于縮略圖的滾動處理 if(this.LscrollType == "left"){ if(this.slideLength*this.lListWidth > this.lFrameWidth){ var spaceWidth = (this.lFrameWidth - this.lListWidth)/2; var hiddenSpace = this.lListWidth*this.currentSlide - spaceWidth; if (hiddenSpace > 0){ if(hiddenSpace+this.lFrameWidth <= this.slideLength*this.lListWidth){ $("#"+this.Llist).animate({ marginLeft: -hiddenSpace+"px" }, {duration:600,queue:false}); } else { var endHidden = this.slideLength*this.lListWidth - this.lFrameWidth; $("#"+this.Llist).animate({ marginLeft: -endHidden+"px" }, {duration:600,queue:false}); } } else { $("#"+this.Llist).animate({ marginLeft: "0px" }, {duration:600,queue:false}); } } } else if (this.LscrollType == "top"){ if(this.slideLength*this.lListHeight > this.lFrameHeight){ var spaceHeight = (this.lFrameHeight - this.lListHeight)/2; var hiddenSpace = this.lListHeight*this.currentSlide - spaceHeight; if (hiddenSpace > 0){ if(hiddenSpace+this.lFrameHeight <= this.slideLength*this.lListHeight){ $("#"+this.Llist).animate({ marginTop: -hiddenSpace+"px" }, {duration:600,queue:false}); } else { var endHidden = this.slideLength*this.lListHeight - this.lFrameHeight; $("#"+this.Llist).animate({ marginTop: -endHidden+"px" }, {duration:600,queue:false}); } } else { $("#"+this.Llist).animate({ marginTop: "0px" }, {duration:600,queue:false}); } } } } //前進 C_slider.prototype.forward = function(){ if(this.currentSlide<this.slideLength-1){ this.currentSlide += 1; this.go(this.currentSlide); }else { this.currentSlide = 0; this.go(0); } } //后退 C_slider.prototype.back = function(){ if(this.currentSlide>0){ this.currentSlide -= 1; this.go(this.currentSlide); }else { this.currentSlide = this.slideLength-1; this.go(this.slideLength-1); } } //自動執行 C_slider.prototype.extInterval = function(){ if(this.currentSlide<this.slideLength-1){ this.currentSlide += 1; this.go(this.currentSlide); }else { this.currentSlide = 0; this.go(0); } var self = this; this.autoExt = setTimeout(function(){ self.extInterval(); },this.autoInterval); } //實例化對象 var goSlide1 = new C_slider("big_frame","big_list","small_frame","small_list","forward","back","left","left","click",3000); var goSlide2 = new C_slider("big_frame2","big_list2","small_frame2","small_list2","forward2","back2","top","left","click",5000); var goSlide3 = new C_slider("big_frame3","big_list3","small_frame3","small_list3","forward3","back3","left","top","click",3000); var goSlide4 = new C_slider("big_frame4","big_list4","small_frame4","small_list4","forward4","back4","top","top","click",2000); </script>

亚州一级-亚州视频在线-亚州视频一区二区-亚州视频一区-亚州三级视频-亚州三级