自定义gft动态图

来源：互联网发布：淘宝网收藏宝贝编辑：程序博客网时间：2024/04/28 15:58

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>gft</title>
<style type="text/css">
body{
background-color: #ddd;
}
#imgdiv{
width: 220px;
height: 220px;

margin:100px auto;
position: relative;
overflow: hidden;
}
#contont{
width: 1760px;
position: absolute;
left: 0;
top:0;

}
#contont img{
float: left;
width: 220px;
height: 220px;
}
#input{
position: absolute;
left: 10px;
bottom: 30px;
}
</style>
</head>
<body>

<div id="imgdiv">

<div id="contont">
<img src="http://www.w3cfuns.com/misc.php?mod=attach&genre=editor&aid=ac9ef28193150ed56660e81cf010fbc4" alt="" />
<img src="http://www.w3cfuns.com/misc.php?mod=attach&genre=editor&aid=ac34a65e7669052e914f1a45a9f08ad8" alt="" />
<img src="http://www.w3cfuns.com/misc.php?mod=attach&genre=editor&aid=a627e7eb06ee4024e24078c1cfb3c08a" alt="" />
<img src="http://www.w3cfuns.com/misc.php?mod=attach&genre=editor&aid=b346da5881dcb6a18dfd0ec7429d9b98" alt="" />
<img src="http://www.w3cfuns.com/misc.php?mod=attach&genre=editor&aid=a08a5a093aa8897bd21117cc41b253da" alt="" />
<img src="http://www.w3cfuns.com/misc.php?mod=attach&genre=editor&aid=a77f0d12cb569e4bbd6702d5e6c9c733" alt="" />
<img src="http://www.w3cfuns.com/misc.php?mod=attach&genre=editor&aid=5f22a82e335c212ac37f0c834fd9c108" alt="" />
<img src="http://www.w3cfuns.com/misc.php?mod=attach&genre=editor&aid=88e8ebfeb8e6751334cb78cb64758a98" alt="" />
</div>

<div id="input">
<input type="button" onclick="aboveImg ()" id="above" value="上一张" />
<input type="button" onclick="bottomImg ()" id="bottom" value="下一张" />
<input type="button" id="start" value="开始" />
<input type="button" id="end" value="结束" />
</div>
</div>
</body>
<script type="text/javascript">

var contontObj =document.getElementById("contont");
var aboveObj = document.getElementById("above");
var bottomObj = document.getElementById("bottom");
var startObj = document.getElementById("start");
var endObj = document.getElementById("end");

var index = 0;

function aboveImg () {
index--;
if ( index < 0) {
index = 7;
}
contontObj.style.left = -index * 220 + "px";
}

function bottomImg () {
index++;
if ( index > 7) {
index = 0;
}
contontObj.style.left = -index * 220 + "px";
}

var timer;
start.onclick = function function_name () {

clearInterval(timer);
timer = setInterval(function (){
index++;
if ( index > 7) {
index = 0;
}
contontObj.style.left = -index * 220 + "px";
},100);
}

endObj.onclick =function(){

clearInterval(timer);
}
</script>
</html>

0 0