原生JS實現圖片輪播 JS實現小廣告外掛
阿新 • • 發佈：2021-09-22
最近想用原生多實現一些小功能，現在寫到部落格裡，大家可以借鑑，有問題歡迎指出。
輪播圖
需求：
圖片迴圈輪播，可點選左右切換，切換狀態與<li>繫結，滑鼠移入圖片懸停，滑鼠移出圖片繼續迴圈切換。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生js輪播圖片</title>
</head>
<style>
.container{
width: 100%;
height: 500px;
position: relative;
}
.content{
width: 900px;
height: 450px;
position: relative;
overflow: hidden;
border: 1px solid seagreen;
margin: 0 auto;
}
.slider-img{
width: 900px;
height: 450px;
margin: 10px auto;
}
.slider-img img{
vertical-align: top;
width: 800px;
height: 400px;
margin: 10px 50px;
display: block;
}
.left{
margin-top: -300px;
margin-left: 50px;
width: 100px;
height: 100px;
}
.left img,.right img{
width: 100px;
height: 100px;
}
http://www.cppcns.com js程式碼，使用時記得在html裡引入JS。
var contiobkfhbjainer = document.getElementById("container"); var content = document.getElementById("content"); var slider = document.getElementById("slider"); var img = document.getElementById("img"); var ul = document.getElementById("ul"); var li = document.getElementsByTagName("li"); var left = document.getElementById("left"); var right = document.getElementById("right"); var num = 0; var timer = null; var picList = ["./img/88.jpg","./img/are.jpg","./img/family.jpg","./img/one.jpg"]; //將li與list下標對應 //設定展示圖片的方法，展示時，li的圓點與圖片繫結在一起 ShowPicture = function() { img.src = picList[num]; for(var i = 0 ; i < li.length;i++) { li[i].className = ''; } li[num].className = 'active'; } //左點選，如果已經是第一張了就返回最後一張 left.onclick = function() { num--; if(num < 0) { num = picList.length-1; } ShowPicture(); } //右點選，若已經是最後一張返回第一張 right.onclick = function() { num++; if(num >= picList.length) { //3 num = 0; } ShowPicture(); } //實現點選圓點跳轉對應圖片，將li與list下標對應list.index=li.index for(var i = 0; i < picList.length ; i++) { li[i].index = i; li[i].http://www.cppcns.comonclick = function() { num = this.index; ShowPicture(); } } //自動輪播圖片，每次呼叫要記得清除定時器，並在呼叫後迴歸定時器，防止時間差越變越大 autoChange = function() { clearInterval(timer); timer = setInterval(() => { num++; num %= picList.length; ShowPicture(); },3000); return timer; } window.onload = autoChange; //事件 img.onmouseover = function() { clearInterval(timer); } img.onmouseleave = autoChange;
廣告外掛
需求：頁面載入結束後彈出廣告，廣告輪播展示，滑鼠移入懸停，移出繼續展示，點X可刪除。
<div id="win">
<img id = "img" />
<button id = "ad_btn">X</button>
//我這是練習，叉號用的X替代，自己做專案加入時可以換iobkfhbj成Icon
</div>
//頁面載入結束彈出廣告，廣告切換展示，點選X可刪除,var ad = document.getElementById('win');
var img = document.getElementById('img');
var ad_btn = document.getElementById('ad_btn');
var timer;
window.onload = function () {
// clearInterval(timer);
timer = setTimeout(() => {
ad.style.display = 'block';
},2000);
change();
}
var count=0;
var num = 0;
var imgTimehttp://www.cppcns.comr = null;
//picture srcList
var picList = ['../img/88.jpg','../img/one.jpg','../img/family.jpg','../img/are.jpg'];
function change() {
clearInterval(imgTimer)
imgTimer = setInterval(() => {
if(count === picList.length) {
count = 0;
resetShow();
} else {
startShow();
}
count++;
},3000);
}
function resetShow() {
img.src = picList[0];
num = 0;
startShow();
}
function startShow() {
if(num < picList.length) {
img.src = picList[num++];
} else {
resetShow();
}
}
ad_btn.addEventListener('click',(e)=>{
ad.style.display = 'none';
clearTimeout(timer)
});
ad.addEventListener('mouseover',()=>{
clearInterval(imgTimer);
})
ad.onmouseleave = function() {
change();
}
實現展示：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。