<body>
<button>上一页</button>
<img src="../../../1.png" width="200px" height="300px">
<button onclick="next()">下一页</button>
<br>
<img src="../../../1.png" width="200px" height="300px" xb="0" onclick="show(this)">
<img src="../../../4.png" width="200px" height="300px" xb="1" onclick="show(this)">
<img src="../../../5.png" width="200px" height="300px" xb="2" onclick="show(this)">
<img src="../../../7.jpg" width="200px" height="300px" xb="3" onclick="show(this)">
</body>
<script>
var k=0//点下标使用
var imgs =["../../../1.png",
"../../../4.png",
"../../../5.png",
"../../../7.jpg"
];//存图片
var pev = null;//上一页定义的元素
var imgDom = null; //图片对象
var dsp = null; //定时器对象
window.onload = function(){
//给定义的变量赋值
imgDom =document.getElementsByTagName("img")[0];
pev =document.getElementsByTagName("button")[0];
pev.onclick=pevl;//上一页的点击事件
/* 给图片添加移入事件*/
imgDom.onmousemove =stop;
/* 给图片添加移除事件*/
imgDom.onmouseout =star;
dsp = setInterval(function(){
next();
},2000);
}
//点击下一页轮换
function next(){
k++;
if( k>=imgs.length){
k=0;
}
imgDom.setAttribute("src",imgs[k]);
}
//点击上一页轮换
function pevl(){
k--;
if( k<0){
k=imgs.length-1;
}
imgDom.setAttribute("src",imgs[k]);
}
//当鼠标进入时轮播,加上定时器
function star(){
dsp =setInterval(function(){
next();
},2000);
}
//当鼠标移出时停止
function stop(){y
clearInterval(dsp);
}
//点击图片
function show(obj){
k=+obj.getAttribute("xb");//找到下标
imgDom.setAttribute("src",imgs[k]);//设置属性
}