求一个div轮播的JS代码 40zheng_dong]

发布时间:2017-1-19 22:54:25 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"求一个div轮播的JS代码 40zheng_dong]",主要涉及到求一个div轮播的JS代码 40zheng_dong]方面的内容,对于求一个div轮播的JS代码 40zheng_dong]感兴趣的同学可以参考一下。

如题,类似图片轮播的效果。。。

建议去相应版块问下

该回复于2010-04-16 08:58:55被版主删除

该回复于2010-04-16 08:57:52被版主删除

该回复于2010-04-16 13:10:16被版主删除

在<head>标签下 <SCRIPT LANGUAGE="JavaScript"> // 设置轮番显示速度 Set slideShowSpeed (milliseconds) var slideShowSpeed = 5000; // 匀滑转换时间 Duration of crossfade (seconds) var crossFadeDuration = 3; // 指定图像文件 Specify the image files var Pic = new Array(); // to add more images, just continue // the pattern, adding to the array below Pic[0] = '1.jpg' Pic[1] = '2.jpg' Pic[2] = '3.jpg' Pic[3] = '4.jpg' Pic[4] = '5.jpg' // do not edit anything below this line var t; var j = 0; var p = Pic.length; var preLoad = new Array(); for (i = 0; i < p; i++) { preLoad = new Image(); preLoad.src = Pic; } function runSlideShow() { if (document.all) { document.images.SlideShow.style.filter="blendTrans(duration=2)"; document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"; document.images.SlideShow.filters.blendTrans.Apply(); } document.images.SlideShow.src = preLoad[j].src; if (document.all) { document.images.SlideShow.filters.blendTrans.Play(); } j = j + 1; if (j > (p - 1)) j = 0; t = setTimeout('runSlideShow()', slideShowSpeed); } </script>   修改body:   <body bgcolor="#FFFFFF" text="#000000" onLoad="runSlideShow()">    将表格单元格设置名称“id=VU”:   <td id=VU>    在<img>中加入代码:<img src="1.jpg" name='SlideShow'>    至此,我们的效果便制作好了,你不仿试试! 点 击 预 览 效 果 页 面......   制作方法:   1. 在<head>中插入代码: <script language='javascript'> isns = navigator.appName == "Netscape"; //定义播放图片张数 img1=new Image() img2=new Image() img3=new Image() img4=new Image() img5=new Image() //图片路径、文件名 img1.src='images/circul-side.gif' img2.src='images/css-manual.gif' img3.src='images/kpt7.jpg' img4.src='images/msn.jpg' img5.src='images/ps-logo.jpg' nn=1 function change_img() { eval('document.pic.src=img'+nn+'.src'); nn++; if(nn>5) nn=1 if(!isns) { pic.filters.item(0).apply() pic.style.visibility='visible' pic.filters.item(0).play() setTimeout("pic.style.visibility='hidden'",4000); } else document.pic.visibility='visible' tt=setTimeout('change_img()',4000) } </script>   可以在代码中按照中文介绍,修改相关信息。   2. 在<body>中加载:<body onload="change_img();">   3. 插入第一张图片,并命名:id="pic"   插入代码:style='visibility:hidden;filter:revealtrans(duration=2.0,transition=12)'   参考图片代码:   <img src="images/circul-side.gif" name="pic" width="120" height="90" id="pic" style='visibility:hidden;filter:revealtrans(duration=2.0,transition=12)'>   制作完成。

步骤一  收集你已经准备放在网络上的影像,而且将他们裁成相同的尺寸。确定尺寸范围不超过640 x 480个像素,而且所有的相片的像素尺寸都要保持相同--如果照片尺寸大小不定,对观众而言会造成视觉上的不和谐。  步骤二  在你的页首标签里,你首先要做的,就是在<STYLE>标签里指出使用的是CSS。在<STYLE>标签里,在你想要幻灯片出现的页面设定位置,并决定一开头是否要以空白背景图表现,或者直接秀出第一张幻灯片。请将下列程序代码剪贴到你的页面中,并使用你自己选择的位置座标:  <STYLE type="text/css"> <!-- .slides {position:absolute; left: 25%; top:25%; visibility:hidden} --> </STYLE>  步骤三  接下来立刻处理CSS的细节部分,还是在页首标签中插入JavaScript。在var numSLides =之后,设定要秀出的幻灯片数目(别设太多,因为每一张照片都会为网页增加可观的KB数)。我们的范例中有五张照片。以下是程序代码:  <SCRIPT language="JavaScript1.2"> var numSlides = 5; var currentSlide = numSlides;  步骤四  如果你想加入图片的解释说明文字,可以用下列的程序代码,将我们的说明文字换成你自己的说明文字:  var captionTxt = new Array(numSlides);  function setUpCaptions() {  captionTxt[1] = "39号码头入口。"  captionTxt[2] = "海狮在码头附近漫步。"  captionTxt[3] = "小船在码头*岸。"  captionTxt[4] = "水底世界鲸鱼壁画。"  captionTxt[5] = "海中小岛或者是岩石。"  }  步骤五  将这里所示的程序代码贴到你网页中的HTML文件,位置就在JavaScript的说明文字下。因为Navigator 4.0和IE 4.0以不同的方式解读CSS,我们的script就使用对象检测(object detection)来决定呈现的模式。如果呈现的模式是Navigator,它还是可以定义某些特定的对象,使得IE程序代码还是有作用。另外这也是整个程序代码的结尾,所以一定要以</SCRIPT>标签来作结束:  function setUp() {  if (!document.all) {  document.all = document;  for (i=1;i<=numSlides;i++) document.all[("image"+i)].  style=document.all[("image"+i)];  }  switchSlide(1);  }  function switchSlide(sDir) {  newSlide = currentSlide + sDir;  if (!newSlide) newSlide=numSlides;  if (newSlide > numSlides) newSlide=1;  document.all[("image"+newSlide)].style.visibility="visible";  document.all[("image"+currentSlide)].  style.visibility="hidden";  // 如果不要说明文字,请移除下一行:  document.all["captions"].document.forCaptions.captionsText.  value=captionTxt[newSlide];  currentSlide = newSlide;  }  //-->  </script>     注意那些*近程序代码结尾的注解:如果你没有说明文字,那么就将它下面一行的文字移除。  步骤六  以</HEAD>关闭页首标签,然后将下列的程序代码,贴到网页HTML文件中的body部分。 注意,程序代码以个别的<DIV>标签区分每个影像,他们和正规的<IMG src>格式有关联:  <BODY onLoad="setUp()">  <B> Builder.com slide show!</B>  <DIV id="image5" class="slides"><IMG src="fifth.jpg"></DIV>  <DIV id="image4" class="slides"><IMG src="fourth.jpg"></DIV>  <DIV id="image3" class="slides"><IMG src="third.jpg"></DIV>  <DIV id="image2" class="slides"><IMG src="second.jpg"></DIV>  <DIV id="image1" class="slides"><IMG src="first.jpg"></DIV>  步骤七  观众必须以自己的步调来点按幻灯片,所以你得提供他们点按的东西。。你可以使用简单老式的超链接,但是若有特殊的Previous和Next的GIF点选按钮,就精巧多了。样本程序代码是使用一个table来连接next.gif和previuos.gif:  <DIV style="position:absolute; top:350px; left:100px">  <A href="javascript :switchSlide(-1)"><IMG src="previous.gif" border=0></A>  <A href="javascript :switchSlide(1)"><IMG src="next.gif" border=0></A>  </DIV>  如果你不想用GIF文件来作Previous和Next点选按钮,用文字取代上面的<IMG>标签。  步骤八  最后,在<TEXTAREA>输入欲显现的说明文字。你可以随意决定<TEXTAREA>的尺寸大小,只要改变rows=和cols=的数字即可。以下是程序代码:  <DIV id="captions" style="position:absolute; left: 320px; top:75px">  <B>Picture caption</B>  <FORM name=forCaptions>  <TEXTAREA name="captionsText" wrap="virtual" rows=25 cols=20"></TEXTAREA>  </FORM>  </DIV> 

该回复于2010-09-15 11:10:28被版主删除

不懂,帮顶,学习,蹭分.

1,5,6,7,8楼,缺少2,3,4楼?

引用楼主 zheng_dong 的回复:如题,类似图片轮播的效果。。。LZ发错版了

<!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> <style type="text/css"> #nos {position:absolute;padding:0px;width:auto;margin:4px 0 0 4px;} #nos div {margin:1px;padding:3px;height:15px;color:#fff;font-size:11px;background:#333;border:1px solid #333;float:left;cursor:hand;} #gList{filter:progid:DXImagetransform.Microsoft.GradientWipe(duration=3,gradientSize=0.5,motion=forward );        width:228px;        height:128px;        margin:0 auto;        padding:3px;        border-top:1px solid #ccc;        border-left:1px solid #ccc;        border-right:2px solid #999;        border-bottom:2px solid #999;        text-align:center;        background:#99ccff;        cursor:hand; } #gList div{width:100%;display:none} </style> </head> <body> asdfasdfasdfasdf <div id="gg"> <div id="nos"><div style="background:#fff;color:#000;" onclick="plays(0)">1</div><div onclick="plays(1)">2</div><div onclick="plays(2)">3</div><div onclick="plays(4)">4</div></div> <div id="gList">     <div style="display:block"><img src="e:\web\js\gg\1.gif" border="0" onmouseover="clearAuto();" onmouseout="setAuto()" /><br />asdf2</div>     <div><img src="e:\web\js\gg\2.gif" border="0" onmouseover="clearAuto();" onmouseout="setAuto()" /><br />Tljkjk1</div>     <div><img src="e:\web\js\gg\3.gif" border="0" onmouseover="clearAuto();" onmouseout="setAuto()" /><br />ioyjl;3</div>                     <div><img src="e:\web\js\gg\4.gif" border="0" onmouseover="clearAuto();" onmouseout="setAuto()" /><br />ioyjl;dfadfasd</div>    </div> </div> <script language="javascript">  var list = 4; var times = 5000; var g_did = "gg"; var g_list = ""; var n = 0; function plays(value){ n=value;          var nos = document.getElementById("nos").getElementsByTagName("div");          for(var i=0;i<nos.length;i++){             if(i==value){                 nos[i].style.backgroundColor="#fff";                 nos[i].style.color="#000";             }             else             {                nos[i].style.backgroundColor="#333";                nos[i].style.color="#fff";             }          }     with (gList) {     filters[0].Apply();     for(i=0;i<list;i++){                i==value?childNodes[i].style.display="block":childNodes[i].style.display="none";             }      filters[0].play();  } } function g_next(){      n++;      if(n > list-1)n=0;      plays(n); } function clearAuto(){clearInterval(autoStart)} function setAuto(){autoStart=setInterval("g_next(n)", times)} setAuto();  </script> </body> </html>  

JQuery实现图片轮播效果   http://suizhikuo.20525.idcxin.com/forum.php?mod=viewthread&tid=1036&extra=page%3D1

上一篇:SQL Server2008配置数据仓库出现的问题 40分,无满意结帖,结帖人lijian312]
下一篇:99乘法表 40mayuanf]

相关文章

相关评论