溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
簡介：
javaScript（簡稱“JS”） 是一種具有函數優先的輕量級，解釋型或即時編譯型的高級編程語言。雖然它是作為開發Web頁面的腳本語言而出名的，但是它也被用到了很多非瀏覽器環境中，JavaScript 基于原型編程、多范式的動態腳本語言，并且支持面向對象、命令式和聲明式（如函數式編程）風格。
JavaScript在1995年由Netscape公司的Brendan Eich，在網景導航者瀏覽器上首次設計實現而成。因為Netscape與Sun合作，Netscape管理層希望它外觀看起來像Java，因此取名為JavaScript。但實際上它的語法風格與Self及Scheme較為接近。
實現：
點擊可以實現切換。當然，也可以設置定時函數實現輪播的效果。
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>圖片切換</title>
</head>
<style>
body{
background-color: black;
}
.wp{
width: 632px;
height: 950px;
margin: 0 auto;
background-color: #ffffff;
position: relative;
}
.div_wp{
position: absolute;
top: 110px;
left: 20px ;
width: 572px;
height: 800px;
margin: 0 auto;
background-color: #ffffff;
border: 10px solid #888888;
}
a{
width: 30px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 30px;
text-decoration: none;
/ background-color: black; /
position: absolute;
top:405px;
display: block;
background-color: #999999;
}
#pre{
left: 0;
}
#next{
right: 0;
}
#span,#text2{
position: absolute;
width: 100%;
height: 50px;
background-color: #999999;
text-align: center;
line-height: 50px;
font-size: 30px;
}
#span{
top: 0;
}
#text2{
bottom: 0;
margin: 0;
}
#img{
width: 572px;
height: 800px;}
input{
width: 100px;
height: 30px;
position: absolute;
top: 20px;
}
#btn1{
left: 190px;
}
#btn2{
right: 190px;
}
#text1{
position: absolute;
top: 50px;
left: 200px;
}
</style><script>
window.onload = function(){
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var oText1 = document.getElementById('text1');
var oSpan = document.getElementById('span');
var oPre = document.getElementById('pre');
var oNext = document.getElementById('next');
var oText2 = document.getElementById('text2');
var oImg = document.getElementById('img');
var arrUrl = ['https://c-ssl.duitang.com/uploads/item/201708/29/20170829092524_t8mf4.thumb.700_0.jpeg','https://cache.yisu.com/upload/information/20200302/54/8722.jpg', 'https://cache.yisu.com/upload/information/20200302/54/8723.jpg']; var arrText = ['李沁','喬欣','宋祖兒']; var arrText1=['圖片可從最后一張跳轉到第一張','圖片只能到最后一個或第一張切換'] var num = 0; var onoff = true; function frimg(){ oSpan.innerHTML = num+1 +'/'+ arrUrl.length; oText2.innerHTML = arrText[num]; oImg.src = arrUrl[num]; oText1.innerHTML = arrText1[0]; } frimg(); oBtn1.onclick = function(){ onoff = true; oText1.innerHTML = arrText1[0]; } oBtn2.onclick = function(){ onoff=false; oText1.innerHTML =arrText1[1]; } oPre.onclick = function(){ num--; if(num ==-1){ if(onoff){ num = arrUrl.length-1; }else{ alert('已經是第一張啦~') num= 0; } } frimg(); }; oNext.onclick = function(){ num++; if(num == arrUrl.length){ if(onoff){ num = 0; }else{ alert('已經到最后一張啦~') num = arrUrl.length-1; } } frimg();
}
}
</script>
<body>
<div class="wp">
<input type="button" value="循環切換" id="btn1">
<input type="button" value="順序切換" id="btn2">
<p id="text1"></p>
<div class="div_wp">
<span id="span"></span>
<a id="pre" href="javascript:;"><</a>
<a id="next" href="javascript:;">></a>
<p id="text2"></p>
<img src="02作業-imgs/img1.jpg" alt="" id="img">
</div>
</div></body>
</html>
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
