如何使用javascript作一個網頁輪播圖

時間 2019-11-19

原文原文鏈接

一、輪播圖在網頁中是很是常見的，因此作輪播圖是必然的！javascript

二、首先在網頁上設置輪播圖的區域（也就是div）！css

三、而後在div裏面插入圖片再經過javascript改變圖片的路徑更改圖片達到輪播的效果！html

定義一個div 代碼以下：java

<div>
 <img src="1_b.jpg" id="img">
</div>
設置div的樣式： 
<style type="text/css">
div{
width: 200px;
height: 200px;
 }
</style>
接下來使用JavaScript改變圖片的路徑：
 <script type="text/javascript">
var div=document.getElementsByTagName("div")[0];//得到div的對象！
var img=document.getElementById("img"); //得到圖片的對象
var i=2;先定義一個圖片變量
setInterval(function(){
　　　　//setInterval定時器每1s調用一次匿名函數 實現每1s改變一次圖片的路徑！達到輪播效果！
img.src=i+"_b.jpg";//改變圖片的路徑
i++; //每次把i加一次
if(i>5){
　　　　　　　　//作一個判斷 若是i大於5則把i的值從新賦值爲1！
i=1;
 }
 },1000)
</script>

//完整代碼以下：

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
div{
width: 200px;
height: 200px;
 }
</style>
</head>
<body>
<div>
 <img src="1_b.jpg" id="img">
</div>
<script type="text/javascript">
var div=document.getElementsByTagName("div")[0];
var img=document.getElementById("img");
var i=2;
setInterval(function(){
img.src=i+"_b.jpg";
i++;
if(i>5){
i=1; } },1000)</script></body></html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。