预览效果
废话不多说,直接上码。One word go!jia !jia !jia!
HTML代码:
<div class="div">
<button class="button1" onclick="preImg()">上一张</button>
<button class="button2" onclick="nextImg()">下一张</button>
<br />
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3484867728,1442783722&fm=26&gp=0.jpg" id="imgs" width="600px" />
</div>
CSS代码:
.div{position: relative;text-align: center}
.button1{position: absolute;top: 25px;left: 300px}
.button2{position: absolute;top: 25px;right: 300px}
JS代码:
//创建图片数组
var imgArr = [
'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3484867728,1442783722&fm=26&gp=0.jpg',
'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=710776287,3294690783&fm=26&gp=0.jpg',
'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=204391119,477738753&fm=11&gp=0.jpg',
'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1977418245,1101263902&fm=26&gp=0.jpg',
'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=454051213,3483702548&fm=26&gp=0.jpg'
];
var i = 0;
function nextImg() {
var next = document.getElementById("imgs");
next.src = imgArr[i];
i++;
if(i == 4){
i=0;
}
}
function preImg() {
var next = document.getElementById("imgs");
next.src = imgArr[i];
if(i == 0){
i=5;
}
i--;
}
//自动切换
function play(){
timer=setInterval(function(){
nextImg();
},2000);
}
//停止切换
function stop(){
clearInterval(timer)
}
play();
document.getElementById("imgs").onmouseover = stop;
document.getElementById("imgs").onmouseout = play;
写得寡丑,用我们贵州话来说,写哈看看在博客上的效果。