标签：get 广告轮播 nload padding 轮播图片 span ++ ansi top
<!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); }
标签：get 广告轮播 nload padding 轮播图片 span ++ ansi top
原文地址：http://www.cnblogs.com/ttzzyy/p/7535867.html
