dw图片轮播代码是什么

 我来答
百度网友79faf363
2019-11-29 · TA获得超过1.1万个赞
知道小有建树答主
回答量:1212
采纳率:75%
帮助的人:54.8万
展开全部

html部分:

<div id="box" onmouseover="stop()" onmouseout="start()"> 

<div id="red" class="slide"></div> 

<div id="green" class="slide"></div> 

<div id="blue" class="slide"></div> 

</div>

css部分:

#box{ 

 width:100px; 

 height:100px; 

 border:1px solid black; 

 position:relative; 

.slide{ 

 width:100px; 

 height:100px; 

 position:absolute; 

}

#box{ 

width:100px; 

height:100px; 

border:1px solid black; 

position:relative; 

overflow:hidden;

}

JS部分:

onload=function(){

var arr = document.getElementsByClassName("slide");

for(var i=0;i<arr.length;i++){

arr[i].style.left = i*100+"px";

}

}

function LeftMove(){

var arr = document.getElementsByClassName("slide");

for(var i=0;i<arr.length;i++){

var left = parseFloat(arr[i].style.left);

left-=2;

var width = 100;//图片的宽度

if(left<=-width){

left=(arr.length-1)*width;//当图片完全走出显示框,拼接到末尾

}

arr[i].style.left = left+"px";

}

}

moveId=setInterval(LeftMove,10);//设置一个10毫秒定时器,并给自己取名

if(left<=-width){

left=(arr.length-1)*width;//当图片完全走出显示框,拼接到末尾

clearInterval(moveId);

}

function divInterval(){

moveId=setInterval(LeftMove,10);//设置一个10毫秒定时器

}

timeId=setInterval(divInterval,3000);//设置一个3秒的定时器。

function stop(){

clearInterval(timeId);//鼠标停留关闭B定时器

}

function start(){

clearInterval(timeId);//重新打开一个定时前,先关闭之前定时器。

timeId=setInterval(divInterval,2000);//重启一个定时器

}

//页面失去焦点定时器停止 

onblur = function(){ 

 stop(); 

//页面获取焦点时重启定时器 

onfocus = function(){ 

 start(); 

}

扩展资料:

代码解析:

为整个页面添加onload加载完成事件,当浏览器打开并加载完并自动执行事件中的代码块。这部分js代码写在刚才css下面即可,保持同级结构。

当页面加载完全,三个div应该并列在一起。

接下来,需要实现将这三个div整体向左移动,使用定时器,即前面的定时器A。

为了解决当鼠标悬停在轮播图,轮播图停止轮播效果,需要在box上添加鼠标移入和移出事件。

当浏览器窗口切出或页面切换到其他页面一段时间再回来时,轮播效果会有短暂加速(随切出时间加长而加长)。

主要是因为虽然窗口切出去了,定时器依然在执行,但页面却没有将效果显示,所以切回来后会将之前的效果显示出来而加速轮播图。所以添加页面焦点事件。

wjttgy
2014-04-24 · TA获得超过5103个赞
知道大有可为答主
回答量:3795
采纳率:54%
帮助的人:1756万
展开全部
<script type="text/javascript">
imgUrl1="img/1.jpg";(图片名称和路径,你要修改,然后将括号内容删除)

imgUrl2="img/2.jpg";

imgUrl3="img/3.jpg";

imgUrl4="img/4.jpg";

imgUrl5="img/5.jpg";

var focus_width='400'(图片宽度你要修改,然后将括号内容删除)
var focus_height='300'(图片高度你要修改,然后将括号内容删除)
var text_height='|||'
var swf_height = focus_height

var pics=imgUrl1+"|"+imgUrl2+"|"+imgUrl3+"|"+imgUrl4+"|"+imgUrl5

document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="'+ focus_width +'" height="'+ swf_height +'">');
document.write('<param name="allowScriptAccess" value="sameDomain"><param name="movie" value="http://www.webjx.com/js/focus.swf"><param name="quality" value="high"><param name="bgcolor" value="#F0F0F0">');
document.write('<param name="menu" value="false"><param name=wmode value="opaque">');
document.write('<param name="FlashVars" value="pics='+pics+'&borderwidth='+focus_width+'&borderheight='+focus_height+'">');
document.write('<embed src="pixviewer.swf" wmode="opaque" FlashVars="pics='+pics+'&borderwidth='+focus_width+'&borderheight='+focus_height+'" menu="false" bgcolor="#F0F0F0" quality="high" width="'+ focus_width +'" height="'+ focus_height +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />'); document.write('</object>');

</script>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
AsunaerK
推荐于2016-07-15 · TA获得超过1.1万个赞
知道大有可为答主
回答量:4274
采纳率:84%
帮助的人:617万
展开全部
<DIV class=custom-area> </DIV>
<DIV style="HEIGHT: 350px; width:750px;" class="slider-promo J_Slider J_TWidget" data-widget-config="{'effect':'scrolly','contentCls': 'lst-main', 'navCls': 'lst-trigger', 'activeTriggerCls': 'current'}" data-widget-type="Slide" data-type="scroll">
<ul class=lst-main>
<li><A href="链接地址" target=_blank><img  style="WIDTH: 750px; HEIGHT: 350px"alt="" align=absMiddle src="图片地址"></A> 
<li><A href="链接地址" target=_blank><img  style="WIDTH: 750px; HEIGHT: 350px"alt="" align=absMiddle src="图片地址"></A> 
<li><A href="链接地址" target=_blank><img  style="WIDTH: 750px; HEIGHT: 350px"alt="" align=absMiddle src="图片地址"></A></li></ul></DIV>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(1)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式