<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
</head>
<body>
<script>
// var timer=null;
// var iNow=0;
// timer=setInterval(
// function(){
// iNow++;
// //buttons.eq(iNow).trigger("click");
// }
// );
//
//
//window.onload 界面加载完毕后才开始加载元素 真正获取了id元素
window.onload = function() {
// var container=document.getElementById('container');
var list = document.getElementById('list');
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var buttons=document.getElementById('buttons').getElementsByTagName('span');
//定义一个函数 待会就可以直接调用
var index=1;
var timer;
function showButton(){
for(var i=0;i<buttons.length;i++){
if(buttons[i].className=='on')
{
buttons[i].className='';
break;
}
}
buttons[index-1].className='on';//将按钮的样式改为
}
function animate(offset) {
//获取的是style.left，是相对左边获取距离，所以第一张图后style.left都为负值，
//且style.left获取的是字符串，需要用parseInt()取整转化为数字。
var newLeft = parseInt(list.style.left) + offset;
list.style.left = newLeft + 'px';
if(newLeft>-600){
list.style.left = -3000 + 'px';
}
if(newLeft<-3000){
list.style.left = -600 + 'px';
}
}
function play(){
//setinterval 不停的执行
timer=setInterval(function(){
next.onclick();
},3600);
}
function stop(){
clearInterval(timer);
}
next.onclick=function(){
//list.style.left=parseInt(list.style.left)-600+'px';
if(index==5){
index=1;
}
else{
index=index+1;
}
showButton();
animate(-600);
}
prev.onclick=function(){
//list.style.left=parseInt(list.style.left)+600+'px';
if(index==1){
index=5;
}
else{
index=index-1;
}
showButton();
animate(600);
}
// container.onmouseover=stop();
// container.onmouseout=play();
play();
// prev.onclick = function() {
// index-=1;
// showButton();
// animate(600);
//
// }
// //绑定一个事件到onclick上
// next.onclick = function() {
// index+=1;
// showButton();
// animate(-600);
//
// }
}
</script>
<div id="container">
<div id="list" style="left: -600px;">
<img src="/yejiamin/images/4.jpg" alt="1" />
<img src="/yejiamin/images/1.jpg" alt="2" />
<img src="/yejiamin/images/2.jpg" alt="3" />
<img src="/yejiamin/images/3.jpg" alt="4" />
<img src="/yejiamin/images/4.jpg" alt="5" />
<img src="/yejiamin/images/5.jpg" alt="6" />
<img src="/yejiamin/images/4.jpg" alt="7" />
</div>
<div id="buttons">
<span index="1" class='on'></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
<a href="javascript:;" id="prev" class="arrow"><</a>
<a href="javascript:;" id="next" class="arrow">></a>
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
text-decoration: none;
}
body {
padding: 20px;
}
#container {
position: relative;
width: 600px;
height: 400px;
border: 3px solid #333;
overflow: hidden;
}
#list {
position: absolute;
z-index: 1;
width: 4200px;
height: 400px;
}
#list img {
float: left;
width: 600px;
height: 400px;
}
#buttons {
position: absolute;
left: 250px;
bottom: 20px;
z-index: 2;
height: 10px;
width: 100px;
}
#buttons span {
float: left;
margin-right: 5px;
width: 10px;
height: 10px;
border: 1px solid #fff;
border-radius: 50%;
background: #333;
cursor: pointer;
}
#buttons .on {
background: orangered;
}
#buttons.off{
background:#333;
}
.arrow {
position: absolute;
top: 180px;
z-index: 2;
display: none;
width: 40px;
height: 40px;
font-size: 36px;
font-weight: bold;
line-height: 39px;
text-align: center;
color: #fff;
background-color: RGBA(0, 0, 0, .3);
cursor: pointer;
}
.arrow:hover {
background-color: RGBA(0, 0, 0, .7);
}
#container:hover .arrow {
display: block;
}
#prev {
left: 20px;
}
#next {
right: 20px;
}
<style>
</html>
暂时简单放置一下代码 全部放在php内 后期 再修改