读书人
栏目▼

div轮播的JS代码

发布时间： 2012-12-17 09:31:40 作者： rapoo

求一个div轮播的JS代码
如题，类似图片轮播的效果。。。
[最优解释]


步骤一 
收集你已经准备放在网络上的影像，而且将他们裁成相同的尺寸。确定尺寸范围不超过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>

[其他解释]

在<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)'> 
 

　　制作完成。


[其他解释]
建议去相应版块问下
[其他解释]
不懂，帮顶，学习，蹭分.

[其他解释]
引用:
如题，类似图片轮播的效果。。。
LZ发错版了
[其他解释]
1,5,6,7,8楼,缺少2,3,4楼?
[其他解释]
该回复于2010-04-16 08:58:55被版主删除
[其他解释]
该回复于2010-04-16 08:57:52被版主删除
[其他解释]
该回复于2010-04-16 13:10:16被版主删除
[其他解释]
该回复于2010-09-15 11:10:28被版主删除
[其他解释]
<!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 Server

热点推荐

触屏版 | 电脑版

读书人网 m.reader8.net