ホームページ > 記事 > ウェブフロントエンド > js を使用して画像カルーセル効果を実現する
js を使用して画像カルーセル効果を実現する
- 王林転載
- 2020-05-09 09:17:462602ブラウズ
分析プロセス:
画像の切り替え:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function changeImg() {
alert("123")
var img222 = document.getElementById(img1);
img222.src = "img/2.jpg";
}
</script>
</head>
<body>
<input type="button" value="点击换图片" onclick="changeImg()">
<img src="img/1.jpg" id="img1">
</body>
</html>3 秒ごとに 1 つのことを実行:
window.setInterval ():指定された期間 (ミリ秒単位) に従って関数を呼び出すか、式を計算します。
setInterval("alert('123')",2000)
ウィンドウを記述する必要はありません。最初に変数は "" を使用する必要があり、内部の "" は ''
window.setTimeout(): 指定されたミリ秒数後に関数を呼び出すか、式を計算します
window.clearInterval( ):
window.setInterval() メソッド、または int 型の ID を返します。この ID を window.clearInterval() に割り当てて、
window.clearTimeout():
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
/* 当页面加载完成的时候, 动态切换图片
1.确定事件:
2.事件所要触发的函数
*/
var index = 1; //切换图片的函数
function changeAd(){ //获取要操作的img
var img = document.getElementById("imgAd");
img.src = "../img/"+(index%3+1)+".jpg"; //0,1,2 //1,2,3
index++;
}
function init(){ //启动定时器
setInterval("changeAd()",3000);
}
</script>
</head>
<body onload="init()">
<img src="../img/1.jpg" id="imgAd"/>
</body>
</html> 推奨チュートリアル : 以上がjs を使用して画像カルーセル効果を実現するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事はcnblogs.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。