一、轮播图(图片自定义)
function sf(cs){
var a=document.getElementById("a");
a.setAttribute("src","img/"+cs);
var b=a.getAttribute("src");
console.info(b);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
<script type="text/javascript" src="js/index.js">
</script>
<style>
a{
font-size: 14px;
color: #39F;
height: 18px;
width: 20px;
border: 1px solid #39F;
text-decoration: none;
display: block;
float: left;
margin-right:5px;
text-align: center;
background-color: #FFF;
line-height: 20px;
}
a:hover {
font-size: 14px;
font-weight: bold;
color: #FFF;
background-color: #39F;
border: 1px solid #39F;
text-decoration: none;
display: block;
}
#apDiv1 {
position:absolute;
width:180px;
height:25px;
z-index:2;
left:100px;
top: 13px;
}
</style>
</head>
<body>
<table width="360" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="height:190px;">
<div id="apDiv1">
<a onmouseover="sf('1.gif')" href="javascript:sf('1.gif')">1</a>
<a onmouseover="sf('2.gif')" href="javascript:sf('2.gif')">2</a>
<a onmouseover="sf('3.jpg')" href="javascript:sf('3.jpg')">3</a>
<a onmouseover="sf('4.jpg')" href="javascript:sf('4.jpg')">4</a>
<a onmouseover="sf('5.gif')" href="javascript:sf('5.gif')">5</a>
</div>
<!-- 图片 -->
<img src="img/1.gif" alt="图片" id="a"/>
</td>
</tr>
</table>
</body>
</html>
二、 随机数
function sd(){
var a=Math.round(Math.random()*9);
var b=Math.round(Math.random()*9);
var c=Math.round(Math.random()*9);
document.getElementById("a").innerHTML=a;
document.getElementById("b").innerHTML=b;
document.getElementById("c").innerHTML=c;
s=setTimeout("sd()",100);
}
function sds(){
window.clearInterval(s);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>随机数</title>
<script type="text/javascript" src="js/index.js">
</script>
<style>
.tda{float:left;width:187px; height:115px; font-family:"微软雅黑"; background-color:#666; text-align:center; line-height:115px; font-size:80px;margin:10px; }
input{width:180px; height:65px; display:block; background-color:#F60;border:0; cursor:pointer; font-family:"微软雅黑"; font-size:40px;font-size:100%;}
</style>
</head>
<body>
<table align="center">
<!-- 第一行:存放随机产生的数字 -->
<tr>
<td id="a" class="tda">X</td>
<td id="b" class="tda">X</td>
<td id="c" class="tda">X</td>
</tr>
<!-- 第二行:两个按钮 -->
<tr>
<td colspan="3" align="center">
<table>
<tr>
<td>
<input type="button" value="开始" onclick="sd()"/>
</td>
<td>
<input type="button" value="停止" onclick="sds()"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
三、文字轮播效果
<body onload="fa()">
<!-- 要展示的文字 -->
<div id="da">
</div>
</body>
<script type="text/javascript">
var i = 1;
function fa() {
var str = "这是一个离不开网络的时代,请大家跟紧时代的列车!!!";
var sa = str.substring(0, i);
document.getElementById("da").innerHTML = sa;
if (i == str.length) {
i = 0;
}
i++;
setTimeout("fa()", 300);
}
</script>