溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

如何用js實現(xiàn)簡單的圖片輪播功能

發(fā)布時間：2021-07-29 16:34:05 來源：億速云 閱讀：212 作者：chen 欄目：web開發(fā)

這篇文章主要介紹“如何用js實現(xiàn)簡單的圖片輪播功能”，在日常操作中，相信很多人在如何用js實現(xiàn)簡單的圖片輪播功能問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”如何用js實現(xiàn)簡單的圖片輪播功能”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

設(shè)計思路：利用js當(dāng)中的定時器實現(xiàn)圖片輪播的效果，將所有圖片放入img文件夾下，我當(dāng)時是存放了三張照片。然后將三張照片分別放入三個div，每一個div顯示和隱藏都是靠定時器進行控制，左下角有三個數(shù)字的div代表這是第幾張圖片，一共有三張圖片所以是三個div。

代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.imgbox{
width: 100%;
height:400px;
background-color: black;
transform: 1s;
}
.img{
width: 100%;
height:100%;
background-image: url(img/37fa7b724f5c49cd8c2d0efad885f1a8.jpeg);
background-repeat:no-repeat;
background-size:cover ;
}
.img0{
width: 100%;
height:100%;
background-image: url(img/37fa7b724f5c49cd8c2d0efad885f1a8.jpeg);
background-repeat:no-repeat;
background-size:100% ;
}
.img1{
width: 100%;
height:100%;
background-image: url(img/5572568_110213373115_2.jpg);
background-repeat:no-repeat;
background-size:100% ;
}
.img2{
width: 100%;
height:100%;
background-image: url(img/5875f5fb7a8f8.jpg);
background-repeat:no-repeat;
background-size:100% ;
}
.img3{
width: 100%;
height:100%;
background-image: url(img/980.jpg);
background-repeat:no-repeat;
background-size:100% ;
}
            ul{
margin-left:-30px ;
list-style-type: none;
position: relative;
margin-top: -100px;
line-height: 50px;
}
ul li{
float: left;
width: 50px;
height:50px;
border:1px solid #000000;
text-align: center;
background-color: aliceblue;
}
.div{
background-color: orange;
line-height: 50px;
}
.div1{
background-color: gainsboro;
line-height: 50px;
}
</style>
<script type="text/javascript">
var i=0;
function imgbox(){
   i++;
  if(i<4){
  document.getElementById("img").className="img"+i;
  if(i==1){
  document.getElementById("one").className="div";
  document.getElementById("two").className="div1";
  document.getElementById("three").className="div1";
  }
  if(i==2){
     document.getElementById("one").className="div1";
     document.getElementById("two").className="div";
     document.getElementById("three").className="div1";
  }
  if(i==3){
     document.getElementById("one").className="div1";
     document.getElementById("two").className="div1";
     document.getElementById("three").className="div";
  } 
}
if(i==4){
i=0;
clearInterval('imgbox()');
}
}
setInterval('imgbox()',1000);
</script>
</head>
<body>
<div class="imgbox">
<div class="img" id="img"></div>
<ul id="ul">
<li id="one">1</li>
<li id="two">2</li>
<li id="three">3</li>
</ul>
</div>
</body>
</html>

認識HTML

HTML，就是我們所說的網(wǎng)頁，網(wǎng)頁的文件格式就是.html格式。在我們眼里，它是一種超文本語言，不需要額外的編譯或者處理，寫好，打開，就是一個網(wǎng)頁。

Html組成由許多標(biāo)簽組成如<p>、<h>、<input>、<img>......，還有一些語義化標(biāo)簽如<header>、<footer>、<nav>....。

什么是js:

js(JavaScript)一種直譯式腳本語言。JavaScript腳本可直接放在HTML語言中，在支持js的瀏覽器上運行。廣泛用于Web應(yīng)用開發(fā),常用來為網(wǎng)頁添加各式各樣的動態(tài)功能,為用戶提供更流暢美觀的瀏覽效果。當(dāng)在瀏覽網(wǎng)頁時做了某種操作就產(chǎn)生一個事件,JavaScript所編寫的程序可對相應(yīng)的事件做出反應(yīng)。

js定時器：定義定時器setInterval('imgbox()',1000);每隔一秒執(zhí)行一次imgbox方法， imgbox方法包含圖片的改變，還有div顏色的改變

啟用定時器

window對象提供了兩個方法來實現(xiàn)定時器的效果，分別是window.setTimeout()和window.setInterval。其中前者可以使一段代碼在指定時間后運行；而后者則可以使一段代碼每過指定時間就運行一次。它們的原型如下：

   window.setTimeout(code,millisec);
   window.setInterval(code,millisec);

其中，code可以是用引號括起來的一段代碼，也可以是一個函數(shù)名，到了指定的時間，系統(tǒng)便會自動調(diào)用該函數(shù)，當(dāng)使用函數(shù)名作為調(diào)用句柄時，不能帶有任何參數(shù)；而使用字符串時，則可以在其中寫入要傳遞的參數(shù)。兩個方法中的第二個參數(shù)是millisec，表示延時或者重復(fù)執(zhí)行的毫秒數(shù)。

具體寫法如下：

函數(shù)名，不帶參數(shù)setTimeout (test,1000)；字符串，可以執(zhí)行的代碼setTimeout ('test()',1000)；匿名函數(shù)setTimeout (function(){},1000)； 注：setInterval的用法與setTimeout一樣

調(diào)用函數(shù)，帶參數(shù)setTimeout ('test(參數(shù))',1000)；

div布局：使用ul，li進行布局

修改樣式如下：

ul{
margin-left:-30px ;//據(jù)左部邊距
list-style-type: none;//去除默認ul樣式
position: relative;//采用相對定位
margin-top: -100px;//據(jù)頂部邊距
line-height: 50px;//行高
}
ul li{
float: left;//浮動
width: 50px;
height:50px;
border:1px solid #000000;//邊框
text-align: center;//文字居中
background-color: aliceblue;
}

Html結(jié)構(gòu)：

<div>
<div id="img"></div>
<ul id="ul">
<li id="one">1</li>
<li id="two">2</li>
<li id="three">3</li>
</ul>
</div>

Img為大的div盒子，img為圖片，<ul>里面包含li為第幾張圖片。

到此，關(guān)于“如何用js實現(xiàn)簡單的圖片輪播功能”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

js
AI
助
手