js怎么写轮播图( 二 )


3. 网页设计中如何让图片轮播 网页设计中让图片轮播,需要用到的JS和比较好的div+css布局意识,主要还是需要了解left,top在css中的意思,这里我提交一段我以前写的代码; html中的代码: js中的代码:ar t=null;function woZaiHouDun(){ var oUl = document.getElementById('woZaiHouDun').getElementsByTagName('ul')[0]; var aLi = oUl.getElementsByTagName('li'); oUl.innerHTML += oUl.innerHTML; oUl.style.width = aLi[0].offsetWidth*aLi.length + 'px'; var oBtnLeft = document.getElementById('btnLeft'); var oBtnRight = document.getElementById('btnRight'); var iTarget = 0; var ispeed = -3; oBtnLeft.onclick = function(){ ispeed = 3; } oBtnRight.onclick = function(){ ispeed = -3; } t=setInterval(function(){ iTarget = oUl.offsetLeft -ispeed; if( iTarget < - oUl.offsetWidth/2){ oUl.style.left =0 +'px'; iTarget = oUl.offsetLeft -ispeed; } if( iTarget > 0){ oUl.style.left =- oUl.offsetWidth/2 +'px'; iTarget = oUl.offsetLeft -ispeed; } oUl.style.left =iTarget +'px'; },30)}这样是能实现轮播的 。
4. 用jquery实现图片轮播怎么写呢求指教 *{ margin: 0; padding: 0; } ul{ list-style:none; } .slideShow{ width: 620px; height: 700px; /*其实就是图片的高度*/ border: 1px #eeeeee solid; margin: 100px auto; position: relative; overflow: hidden; /*此处需要将溢出框架的图片部分隐藏*/ } .slideShow ul{ width: 2500px; position: relative; /*此处需注意relative : 对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置,如果没有这个属性,图片将不可左右移动*/ } .slideShow ul li{ float: left; /*让四张图片左浮动,形成并排的横着布局,方便点击按钮时的左移动*/ width: 620px; } .slideShow .showNav{ /*用绝对定位给数字按钮进行布局*/ position: absolute; right: 10px; bottom: 5px; text-align:center; font-size: 12px; line-height: 20px; } .slideShow .showNav span{ cursor: pointer; display: block; float: left; width: 20px; height: 20px; background: #ff5a28; margin-left: 2px; color: #fff; } .slideShow .showNav .active{ background: #b63e1a; } js代码规范: 主体代码:[html] view plain copy print?<body> <!--图片布局开始--> <!--图片布局结束--> <!--按钮布局开始--> 1 2 3 4 <!--按钮布局结束--> 。
5. 怎么用js做一个简单的轮播图 obj1.onmouseover = function () {
clearInterval(time);
}
obj1.onmouseout = function () {
time = setInterval("turn();", 6000);
}
for (var num = 0; num < obj2.length; num++) {
obj2[num].onmouseover = function () {
turn(this.innerHTML);
clearInterval(time);
}
obj2[num].onmouseout = function () {
time = setInterval("turn();", 6000);
}
}
6. js图片轮播效果 把5张图片(取名01到05)做好,放入images里,在body里插入 <div > <script type="text/javascript" src="http://www.xuexi88.com/zhishi/js/flash.js"></script> </div>flash.js如下:var pic_width=450; //图片宽度var pic_height=205; //图片高度var button_pos=4; //按扭位置 1左 2右 3上 4下var stop_time=4000; //图片停留时间(1000为1秒钟)var show_text=0; //是否显示文字标签 1显示 0不显示var txtcolor="000000"; //文字色var bgcolor="DDDDDD"; //背景色var imag=new Array();var link=new Array();var text=new Array();imag[1]="images/01.jpg";link[1]="index-welcome.html";text[1]="标题 1";imag[2]="images/02.jpg";link[2]="index-welcome.html";text[2]="标题 2";imag[3]="images/03.jpg";link[3]="index-welcome.html";text[3]="标题 3";imag[4]="images/04.jpg";link[4]="index-welcome.html";text[4]="标题 4";imag[5]="images/05.jpg";link[2]="index-welcome.html";text[5]="标题 5";//可编辑内容结束var swf_height=show_text==1?pic_height+20:pic_height;var pics="", links="", texts="";for(var i=1; i<imag.length; i++){ pics=pics+("|"+imag[i]); links=links+("|"+link[i]); texts=texts+("|"+text[i]);}pics=pics.substring(1);links=links.substring(1);texts=texts.substring(1);document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="/pub/shockwave/cabs/flash/swflash.cabversion=6,0,0,0" width="'+ pic_width +'" height="'+ swf_height +'">');document.write('<param name="movie" value="http://www.xuexi88.com/zhishi/flash/focus.swf">');document.write('<param name="quality" value="http://www.xuexi88.com/zhishi/high"><param name="wmode" value="http://www.xuexi88.com/zhishi/opaque">');document.write('<param name="FlashVars" value="http://www.xuexi88.com/zhishi/pics='+pics+'&links='+links+'&texts='+texts+'&pic_width='+pic_width+'&pic_height='+pic_height+'&show_text='+show_text+'&txtcolor='+txtcolor+'&bgcolor='+bgcolor+'&button_pos='+button_pos+'&stop_time='+stop_time+'">');document.write('<embed src="http://www.xuexi88.com/zhishi/flash/focus.swf" FlashVars="pics='+pics+'&links='+links+'&texts='+texts+'&pic_width='+pic_width+'&pic_height='+pic_height+'&show_text='+show_text+'&txtcolor='+txtcolor+'&bgcolor='+bgcolor+'&button_pos='+button_pos+'&stop_time='+stop_time+'" quality="high" width="'+ pic_width +'" height="'+ swf_height +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="/go/getflashplayer" />');document.write('</object>');// JavaScript Document 。