<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>广告轮播</title>
<script type="text/javascript" src="tzy.js" language="JavaScript"></script>
<link rel="stylesheet" href="tzy.css" type="text/css">
</head>
<body onload="lunbozantin()">
<div>
<p><b>我是轮播图片</b></p>
<img src="1.jpg" alt="lol图片" id="tupian" onMouseOver="stoplunbo()" onMouseOut="lunbozantin()">
</div>
</body>
</html>
*{
margin:0px;
padding:0px;
}
div{
width: 508px;
height: 330px;
margin: 100px auto;
padding: 5px;
background-color: coral;
}
p{
width: 528px;
height: 30px;
text-align: center;
font-family: "楷体";
line-height: 30px;
font-size: 25px;
}
img{
width: auto;
height: auto;
background-color: deepskyblue;
-webkit-transition: width 1s, height 1s, -webkit-transform 1s;
/*暂定高宽无变化自动,有变化则为1秒*/
transition: width 1s, height 1s, transform 1s;
}
img:hover{
width: auto;
height: auto;
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
}
var arr = new Array("1.jpg","2.jpg","3.jpg","4.jpg");
var count = 1;
var b;
function lunbo() {
a = document.getElementById("tupian");
a.src =arr[count];
count++;
if(count==4){
count=0;
}
}
function stoplunbo(){
clearInterval(b);
}function lunbozantin() {
b = setInterval(lunbo,3000);
}
时间： 2024-08-01 22:36:59