js Ein- und Ausblenden von Bildkarusselleffektcode-Sharing_Javascript-Kenntnissen-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

js Ein- und Ausblenden von Bildkarusselleffektcode-Sharing_Javascript-Kenntnissen

May 16, 2016 pm 03:42 PM

javascript 图片轮播 Ein- und Ausblenden

Das Beispiel in diesem Artikel beschreibt den js-Bildkarussell-Effektcode zum Ein- und Ausblenden. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Operationsrendering: ------------Effekt anzeigen--------- ---- ----------

Tipps: Wenn der Browser nicht richtig funktioniert, können Sie versuchen, den Browsermodus zu wechseln.
Der mit Ihnen geteilte Code für den js-Bildkarusselleffekt lautet wie folgt

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;js图片轮播效果代码&lt;/title&gt;
&lt;style type="text/css"&gt;
table img:hover{cursor:pointer;}
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div align="center"&gt;
&lt;SCRIPT&gt;
var roll_image = new Array;
var image_link = new Array;
var small_img = new Array;

roll_image[0] = 'images/01.jpg';
image_link[0] = 'http://www.lanrentuku.com';
small_img[0] = 'images/main_flash_button1_on.gif';

roll_image[1] = 'images/02.jpg';
image_link[1] = 'http://www.lanrentuku.com';
small_img[1] = 'images/main_flash_button2_on.gif';

roll_image[2] = 'images/03.jpg';
image_link[2] = 'http://www.lanrentuku.com';
small_img[2] = 'images/main_flash_button3_on.gif';

roll_image[3] = 'images/04.jpg';
image_link[3] = 'http://www.lanrentuku.com';
small_img[3] = 'images/main_flash_button4_on.gif';

roll_image[4] = 'images/05.jpg';
image_link[4] = 'http://www.lanrentuku.com';
small_img[4] = 'images/main_flash_button5_on.gif';

roll_image[5] = 'images/06.jpg';
image_link[5] = 'http://www.lanrentuku.com';
small_img[5] = 'images/main_flash_button6_on.gif';

roll_image[6] = 'images/07.jpg';
image_link[6] = 'http://www.lanrentuku.com';
small_img[6] = 'images/main_flash_button7_on.gif';

var cliImg = '';
var cliImgSrc = '';
var imgNo = Math.round(Math.random() * 7);

var interval = 3000;
var setTime = '';

function click_simg(ci, no){
 var pImg = document.all.bigimg;
 var pLink = document.all.imglink;

 if(cliImg == '') {
 cliImg = ci;
 cliImgSrc = ci.src;
 ci.src = small_img[no];
 imgNo=no;
 pImg.src =roll_image[no];
 pLink.href = image_link[no];
 } else if(cliImg != ci) {
 cliImg.src = cliImgSrc;
 cliImg = ci;
 cliImgSrc = ci.src;
 ci.src = small_img[no];
 imgNo=no;
 pImg.src =roll_image[no];
 pLink.href = image_link[no];
 }
 clearTimeout(setTime);
 setTime=setTimeout("rotate()",interval);
}

function rotate(){
 imgNo = (imgNo &gt;= 6) &#63; 0 : imgNo+1;
 var ci = eval('document.all.num_img'+imgNo);

 document.all.bigimg.filters.blendTrans.apply();
 document.all.imglink.href=image_link[imgNo];
 document.all.bigimg.src=roll_image[imgNo];
 document.all.bigimg.filters.blendTrans.play();

 if(cliImg == '') {
 cliImg = ci;
 cliImgSrc = ci.src;
 ci.src = small_img[imgNo];
 } else if(cliImg != ci) {
 cliImg.src = cliImgSrc;
 cliImg = ci;
 cliImgSrc = ci.src;
 ci.src = small_img[imgNo];
 }

 setTime=setTimeout("rotate()",interval);
}

//--&gt;
&lt;/SCRIPT&gt;
&lt;TABLE cellSpacing=0 cellPadding=0 width=520 border=0&gt;
 &lt;TBODY&gt;
 &lt;TR&gt;
 &lt;TD height=338&gt;
&lt;A onfocus=this.blur() href="#" name=imglink&gt;&lt;IMG style="FILTER: blendTrans(duration=1)" height=338 src="images/01.jpg" width=520 border=0 name=bigimg&gt;&lt;/A&gt;
 &lt;/TD&gt;
 &lt;/TR&gt;
 &lt;TR&gt;
 &lt;TD height=27&gt;&lt;TABLE cellSpacing=0 cellPadding=0 width="100%" border=0&gt;
 &lt;TBODY&gt;
  &lt;TR&gt;
  &lt;TD width=3&gt;&lt;/TD&gt;
  &lt;TD width=61&gt;&lt;IMG style="CURSOR: hand" 
   onclick="click_simg(this, 0);" height=15 
   src="images/main_flash_button1.gif" width=61 
   border=0 name=num_img0&gt;&lt;/TD&gt;
  &lt;TD width=3&gt;&lt;/TD&gt;
  &lt;TD width=61&gt;&lt;IMG style="CURSOR: hand" 
   onclick="click_simg(this, 1);" height=15 
   src="images/main_flash_button2.gif" width=61 
   border=0 name=num_img1&gt;&lt;/TD&gt;
  &lt;TD width=3&gt;&lt;/TD&gt;
  &lt;TD width=61&gt;&lt;IMG style="CURSOR: hand" 
   onclick="click_simg(this, 2);" height=15 
   src="images/main_flash_button3.gif" width=61 
   border=0 name=num_img2&gt;&lt;/TD&gt;
  &lt;TD width=3&gt;&lt;/TD&gt;
  &lt;TD width=61&gt;&lt;IMG style="CURSOR: hand" 
   onclick="click_simg(this, 3);" height=15 
   src="images/main_flash_button4.gif" width=61 
   border=0 name=num_img3&gt;&lt;/TD&gt;
  &lt;TD width=3&gt;&lt;/TD&gt;
  &lt;TD width=61&gt;&lt;IMG style="CURSOR: hand" 
   onclick="click_simg(this, 4);" height=15 
   src="images/main_flash_button5.gif" width=61 
   border=0 name=num_img4&gt;&lt;/TD&gt;
  &lt;TD width=3&gt;&lt;/TD&gt;
  &lt;TD width=61&gt;&lt;IMG style="CURSOR: hand" 
   onclick="click_simg(this, 5);" height=15 
   src="images/main_flash_button6.gif" width=61 
   border=0 name=num_img5&gt;&lt;/TD&gt;
  &lt;TD width=3&gt;&lt;/TD&gt;
  &lt;TD width=61&gt;&lt;IMG style="CURSOR: hand" 
   onclick="click_simg(this, 6);" height=15 
   src="images/main_flash_button7.gif" width=61 
   border=0 name=num_img6&gt;&lt;/TD&gt;
  &lt;TD 
  width=72&gt;&lt;/TD&gt;
  &lt;/TR&gt;
 &lt;/TBODY&gt;
 &lt;/TABLE&gt;&lt;/TD&gt;
 &lt;/TR&gt;
 &lt;/TBODY&gt;
&lt;/TABLE&gt;
&lt;p&gt;
 &lt;SCRIPT&gt;rotate();&lt;/SCRIPT&gt;
 &lt;br&gt;


&lt;/div&gt;
&lt;/BODY&gt;&lt;/HTML&gt;

Nach dem Login kopieren

Das Obige ist der mit Ihnen geteilte js-Bildkarussell-Effektcode. Ich hoffe, er gefällt Ihnen.

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn