suchen

Heim  >  Artikel  >  Web-Frontend  >  js Ein- und Ausblenden von Bildkarusselleffektcode-Sharing_Javascript-Kenntnissen

js Ein- und Ausblenden von Bildkarusselleffektcode-Sharing_Javascript-Kenntnissen

WBOY
WBOYOriginal
2016-05-16 15:42:591487Durchsuche

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 

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

<body>
<div align="center">
<SCRIPT>
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 >= 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);
}

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


</div>
</BODY></HTML>

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

Stellungnahme：
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
Vorheriger Artikel：jquery implementiert die Anzeige eines benutzerdefinierten Rechtsklick-Menüeffekts im angegebenen Bereich der WebseiteNächster Artikel：jquery implementiert die Anzeige eines benutzerdefinierten Rechtsklick-Menüeffekts im angegebenen Bereich der Webseite

In Verbindung stehende Artikel

Mehr sehen