導航:首頁 > 好看圖片 > 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畫圖圖片大全簡單
- 簡單的果醬畫圖片教程
- 衣服叉圖片大全
- 胃圖片簡單
- 睡前記得換衣服圖片
- 衣服拉鏈袋圖片
- 孫儷穿衣服的圖片大全
- 美團二手衣服圖片
- 喪屍風衣服圖片
- 小姨買衣服買奶粉圖片
- 一次性水杯做的簡單小人圖片
- 浪淘沙詩配畫圖片簡單
- 簡單畫范冰冰圖片
- 簡單花牆繪圖片
- 動漫人偶圖片大全簡單