javascript幻灯片播放（随机）

最新推荐文章于 2024-07-26 20:46:33 发布

shursulei

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量788

点赞数

分类专栏： Javascript 文章标签： javascript html

本文链接：https://blog.csdn.net/shursulei/article/details/54949174

版权

Javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、程序代码区

html代码区：

<!DOCTYPE html>
<html>
<head>
<title>Image Slideshow</title>
<script src="script09.js"></script>
<link rel="stylesheet" href="script01.css">
</head>
<body>
<div class="centered">
<h1>Welcome, Robot Overlords!</h1>
<img src="images/robot1.jpg" id="myPicture" width="200" height="400" alt="Slideshow">
<h2><a href="previous.html" id="prevLink">&lt;&lt; Previous </a>&nbsp;&nbsp;
<a href="next. html" id="nextLink">Next &gt;&gt;</a></h2>
</div>
</body>
</html>

css代码区：

body {
background-color: white;
color: black;
font-size: 20px;
font-family: "Lucida Grande", Verdana,Arial, Helvetica, sans-serif;
}
h1, th {
font-family: Georgia, "Times New Roman",Times, serif;
}
h1 {
font-size: 28px;
}
table {
border-collapse: collapse;
}
th, td {
padding: 10px;
border: 2px #666 solid;
text-align: center;
width: 20%;
}
#free, .pickedBG {
background-color: #f66;
}
.winningBG {
background-image:url(images/redFlash.gif);
}

js代码区：

window.onload = initLinks;//加载窗口时，调用initlinks函数
var myPix = new Array("images/robot1.jpg","images/robot2.jpg","images/robot3.jpg");
var thisPic = 0;
function initLinks() {
document.getElementById("prevLink").onclick = processPrevious;
document.getElementById("nextLink").onclick = processNext;
}
function processPrevious() {
if (thisPic == 0) {
thisPic = myPix.length;
}
thisPic--;
document.getElementById("myPicture").src = myPix[thisPic];
return false;
}
function processNext() {
thisPic++;
if (thisPic == myPix.length) {
thisPic = 0;
}
document.getElementById("myPicture").src = myPix[thisPic];
return false;
}

最后的结果显示如图：
这里写图片描述

二、显示随机图像

html代码：

<!DOCTYPE html>
<html>
<head>
<title>Random Image</title>
<script src="script10.js"></script>
<link rel="stylesheet" href="script01.css">
</head>
<body>
<img src="images/spacer.gif" width="305" height="312" id="myPicture" alt="some image">
</body>
</html>

js代码：

window.onload = choosePic;
function choosePic() {
var myPix = new Array("images/robot1.jpg","images/robot2.jpg","images/robot3.jpg");
var randomNum = Math.floor ((Math.random() * myPix.length));
/*Math.random 生成一个0～1 的随机数，然后将这个数字乘以myPix.length，即数组中的成员数量（在这个示例中是3）。
Math.floor 将结果向下取整，这意味着最终产生0、1 和2 中的一个数字。*/
document.getElementById("myPicture").src = myPix[randomNum];
}

三、随机开始循环显示图像

html的代码区：

<!DOCTYPE html>
<html>
<head>
<title>Rotating Random Banner</title>
<script src="script11.js"></script>
<link rel="stylesheet" href="script01.css">
</head>
<body>
<div class="centered">
<img src="images/robot1.jpg" id="adBanner" alt="Ad Banner">
</div>
</body>
</html>

js的代码区：

window.onload = choosePic;
var adImages = new Array("images/robot1.jpg","images/robot2.jpg","images/robot3.jpg");
var thisAd = 0;
function choosePic() {
thisAd = Math.floor((Math.random() * adImages.length));
document.getElementById("adBanner").src = adImages[thisAd];
rotate();
}
function rotate() {
thisAd++;
if (thisAd == adImages.length) {
thisAd = 0;
}
document.getElementById("adBanner").src = adImages[thisAd];
setTimeout(rotate, 3 * 1000);
}
}

shursulei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript幻灯片播放（随机）

一、程序代码区html代码区：<!DOCTYPE html><html><head><title>Image Slideshow</title><script src="script09.js"></script><link rel="stylesheet" href="script01.css"></head><body><div class="centered"><h1>We
复制链接

扫一扫