<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>张钧甯</title>
<style>
*{
margin:0;
padding:0;
}
.part{
width:400px;
height:300px;
border:1px solid red;
overflow: hidden;
}
.godness{
width:1400px;
height:260px;
}
.godness img{
float:left;
width:200px;
height:260px;
}
</style>
<script>
window.onload=function(){
var con=document.getElementById("container");
var list=document.getElementById("list");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
function autoPlay(offset){
var newLeft=parseInt(list.style.left)+offset;
list.style.left=newLeft+"px";
if(newLeft<-1200){
list.style.left="0px";
}
if(newLeft>-200){
list.style.left="-1200px";
}
}
prev.onclick=function(){
autoPlay(200);
}
next.onclick=function(){
autoPlay(-200);
}
}
</script>
</head>
<body>
<div class="part" id="container">
<div class="godness" id="list" style="left:0px;">
<img src="yys/wife1.jpg">
<img src="yys/wife2.jpg">
<img src="yys/wife4.jpg">
<img src="yys/wife5.jpg">
<img src="yys/wife7.jpg">
<img src="yys/wife8.jpg">
<img src="yys/wife9.jpg">
</div>
<div class="button1" id="prev">上一个</div>
<div class="button2" id="next">下一个</div>
</div>
</body>
</html>
