js怎么实现自动更换图片

 我来答
百度网友2571d37bb
2015-12-03 · 知道合伙人软件行家
百度网友2571d37bb
知道合伙人软件行家
采纳数:1971 获赞数:7905
前端工程师

向TA提问 私信TA
展开全部

自动更换图片,这个是用定时器做的。下面是简单的代码,仅供参考:

<style>    
*{ margin:0; padding:0; list-style:none;}    
#box{ width:840px; border:1px solid #000; height:210px; margin:30px auto; position:relative; overflow:hidden;}    
#box ul{ position:absolute; left:0; top:0;}    
#box ul li{ width:200px; height:200px; float:left; padding:5px;}    
</style>    
<script>    
window.onload=function(){    
var oBox=document.getElementById('box');    
var oUl=oBox.children[0];    
var aLi=oUl.children;    
    
//复制一份内容    
oUl.innerHTML+=oUl.innerHTML;    
oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';    
    
setInterval(function(){    
var l=oUl.offsetLeft+10;    
if(l>=0){    
l=-oUl.offsetWidth/2;    
}    
oUl.style.left=l+'px';    
},30);    
};    
</script>    
</head>    
<body>    
<div id="box">    
<ul>    
    <li><img src="img/1.jpg" width="200"></li>    
       <li><img src="img/2.jpg" width="200"></li>    
       <li><img src="img/3.jpg" width="200"></li>    
       <li><img src="img/4.jpg" width="200"></li>    
           
   </ul>    
</div>

简单的说一下定时器:

setInterval定义和用法

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

 

语法

setInterval(code,millisec[,"lang"])

参数

code    必需。要调用的函数或要执行的代码串。    

millisec    必须。周期性执行或调用 code 之间的时间间隔,以毫秒计。

AiPPT
2024-09-19 广告
随着AI技术的飞速发展,如今市面上涌现了许多实用易操作的AI生成工具1、简介:AiPPT: 这款AI工具智能理解用户输入的主题,提供“AI智能生成”和“导入本地大纲”的选项,生成的PPT内容丰富多样,可自由编辑和添加元素,图表类型包括柱状图... 点击进入详情页
本回答由AiPPT提供
过去到未来哇
2017-01-15 · TA获得超过4980个赞
知道小有建树答主
回答量:6025
采纳率:0%
帮助的人:985万
展开全部
target:点击的图
把target复制一个出来,设置postion:fixed,然后加入到body后面,用于放大显示。
把target设置为不显示(visiable:hidden)。

移动问题:
逗它旁边的图片也需要跟着移动,同时达到一个循环地,看不懂什么意思。
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
匿名用户
2014-10-16
展开全部
这网站有很多效果http://www.100sucai.com
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
杂货铺小店
2012-03-31 · 互联网学习资料,计算机编程。
杂货铺小店
采纳数:138 获赞数:549

向TA提问 私信TA
展开全部
你可以去JS懒人图库:http://www.lanrentuku.com,这个网站找效果
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 1条折叠回答
收起 更多回答(2)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

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

类别

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

说明

0/200

提交
取消

辅 助

模 式