导航:首页 > 好看图片 > js简单图片切换
js简单图片切换
发布时间：2022-07-20 22:50:49❶ 您好，请问如何用JS实现图片自动切换
自动更换图片，这个是用定时器做的。下面是简单的代码，仅供参考：
<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 之间的时间间隔，以毫秒计。
❷ JS实现点击一个按钮更换图片
你的代码差在少了"选择元素"这一步。
img1.src = "..images/DT2.JPG"这一步是没有作用的，因为img1你还没有定义。
正确的方法是让图片元素的id是img1，然后
document.getElementById('img1').src = "..images/DT2.JPG"
这样进行赋值。
document.getElementById('img1')这一步的作用就是选择图片元素。
这是针对此问题的测试页面
代码如下
<div class="DT">
<div>
<img id="img1" src="https://img.alicdn.com/bao/uploaded/i3/2276233074/TB20r1QbFXXXXX3XXXXXXXXXXXX_!!2276233074.jpg_270x270.jpg"
/>
</div>
</div>
<div style="text-align:center">
<input type="button" id="b1" value=" 放大 " onclick="fd();" />
<input type="button" id="b3" value="还原 " onclick="hy();" />
<input type="button" id="b2" value=" 缩小 " onclick="sx();" />
</div>
function fd() {
document.getElementById('img1').src = "https://img.alicdn.com/bao/uploaded/i3/2276233074/TB20r1QbFXXXXX3XXXXXXXXXXXX_!!2276233074.jpg_400x400.jpg"
}
function sx() {
document.getElementById('img1').src = "https://img.alicdn.com/bao/uploaded/i3/2276233074/TB20r1QbFXXXXX3XXXXXXXXXXXX_!!2276233074.jpg_180x180.jpg"
}
function hy() {
document.getElementById('img1').src = "https://img.alicdn.com/bao/uploaded/i3/2276233074/TB20r1QbFXXXXX3XXXXXXXXXXXX_!!2276233074.jpg_270x270.jpg"
}
❸ 求一段最简单的js图片切换效果
试试这个图片切换效果
有12345数字一起切换
鼠标点一下数字会变换到另一张图片，不点就会自动换
里面有教程和源码
❹ js鼠标单击实现图片切换
1、提前准备一组图片，将图片名称设置一定规律：例如 img1.jpg、img2.jpg
2、编写鼠标点击事件
3、在鼠标点击时间里，判断鼠标点击次数
4、根据不同次数，显示不同的图片
<scripttype="text/javascript">
$(function(){
varitems=newArrays("img1.jpg","img2.jpg","img3.jpg","img4.jpg","img5.jpg");
vari=0;
$("#bgImage").click(function(){
i++;
if(i>items.length){
i=1;
}
$(this).prop("src","img"+i+".jpg");
});
});
</script>
❺ 如何通过js点击两张图片来回切换
首先
if (oImg.src="img/1.png")
是赋值而不是判断相等, 判断相等请用==或者===
其次, 你的切换不应当依赖于从元素上读到的src, 而应当用变量维护当前的状态
示例
window.onload=function()
{
var
oImg=document.getElementById('img1'),
Picture=['img/1.png','img/2.png'],
Index=0;
oImg.onclick=function()
{
++Index
Index<Picture.length||(Index=0)
oImg.src=Picture[Index]
}
}
与js简单图片切换相关的资料
- 幼儿扔衣服图片卡通
- 衣服上有鸡毛图片代表什么
- 大厅简单漂亮图片
- 生物的调查表手抄报图片大全简单
- 五毒虫子图片最简单的画法
- 天先别冷我还没钱买衣服图片
- 兔子手举起来简单画法图片
- 大寒送衣服图片
- 古风诗书图片简单
- 新衣服后空翻图片
- 谢娜绿色衣服图片
- 幼儿脸简单彩绘图片
- 旧衣服改造马甲线图片
- 黑色至尊衣服图片
- 夏季粉色的鞋配什么衣服图片
- 源光图片简单
- 正装白衣服图片男
- 傣族衣服款式卡通图片
- 意思很简单的图片
- 娃娃素体衣服图片
- 手绘动漫简单图片
- 简单玫瑰花纹身图片
- 6寸生日蛋糕图片简单
- 圣女果梨摆盘简单造型图片
- 简单的运输图片
- 彩虹图片头像简单
- 衣服开业图片
- cad画图图片大全简单
- 简单的果酱画图片教程
- 衣服叉图片大全
- 胃图片简单
- 睡前记得换衣服图片
- 衣服拉链袋图片
- 孙俪穿衣服的图片大全
- 美团二手衣服图片
- 丧尸风衣服图片
- 小姨买衣服买奶粉图片
- 一次性水杯做的简单小人图片
- 浪淘沙诗配画图片简单
- 简单画范冰冰图片
- 简单花墙绘图片
- 动漫人偶图片大全简单