<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
background-color: #444;
}
#wrap{
position:relative;
margin:100px auto;
width:400px;
height:500px;
background: #f1f1f1;
}
#wrap img{
position: absolute;
top:50px; left:50px;
width:300px;
height:400px;
}
#wrap span{
position: absolute;
width:100%;
height: 20px;
text-align: center;
color: #444;
}
#wrap .page{
top:10px;
}
#wrap .footer{
bottom:10px;
}
#wrap a{
position: absolute;
text-decoration: none;
display: inline-block;
width: 30px;
height: 30px;
top:50%;
margin-top: -15px;
background-color: rgba(0,0,0,.05);
color:#fff;
font-size: 20px;
text-align: center;
line-height: 30px;
}
#wrap a:hover{
background-color: rgba(0,0,0,.7);
}
#wrap .prev{
left: 10px;
}
#wrap .next{
right: 10px;
}
#wrap .prev:hover{
padding-right: 5px;
}
#wrap .next:hover{
padding-left: 5px;
}
#wrap #loop{
top:-5%;
left:35%;
width: 50px;
background: #fff;
color: #444;
margin-right: 10px;
text-align: center;
line-height: 25px;
}
#wrap #sequence{
top:-5%;
left:60%;
width: 50px;
background: #fff;
color: #444;
text-align: center;
line-height: 20px;
}
</style>
</head>
<body>
<div id="wrap">
<img id="myImg" src="" alt="">
<span id="page">數(shù)量加載中</span>
<span id="footer">作品名稱</span>
<a id="prev" href="javascript:;"><</a>
<a id="next" href="javascript:;">></a>
<a id="loop" href="javascript:;">loop</a>
<a id="sequence" href="javascript:;">seq</a>
</div>
<script>
window.onload = function(){
var oMyImg = document.getElementById("myImg");
var oPage = document.getElementById("page");
var oFooter = document.getElementById("footer");
var oPrev = document.getElementById("prev");
var oNext = document.getElementById("next");
var oLoop = document.getElementById("loop");
var oSeq = document.getElementById("sequence");
var arrImg = ['src/2.jpg','src/3.jpg','src/4.jpg','src/5.jpg','src/6.jpg'];
var arrText = ['藝妓回憶錄','幸福來敲門','小情人','吸血鬼','吉他'];
var num = 0;
var moduleChange;
var omg , seqPrev, seqNext;
function imgTab(){
oPage.innerHTML = num + 1 +"/"+ arrImg.length;
? ?oFooter.innerHTML = arrText[num];
? ?oMyImg.src = arrImg[num];
}
imgTab();
oLoop.onclick = function(){
moduleChange = true;
}
oSeq.onclick = function(){
moduleChange = false;
clearInterval(omg);
}
? ?oNext.onclick = function(){
? ? ?? ?if(moduleChange){
? ? ?? ? clearInterval(omg);
? ? ?? ? omg = setInterval(function(){
? ? ?? ? num++;
? ? ?? ? if(num > 4){
? ? ?num = 0;
? ? ? ?}
? ? ? ?imgTab();
? ? ? ? ? },800);
? ? ?? ?}else{
? ? ?? ? if(num == 4){
? ? ?? ? alert("這已經(jīng)是最后一張了");
? ? ?? ? }
? ? ?? ? clearInterval(seqPrev);
? ? ?? ? ?? seqNext = setInterval(function(){
? ? ?? ? num++;
? ? ?? ? if(num > 4){
? ? ?num = 4;
? ? ?clearInterval(seqNext);
? ? ? ?}
? ? ? ?imgTab();
? ? ? ? ? },800);
? ? ?? ?}
? ?}
? ?oPrev.onclick = function(){
? ? ?? ?if(moduleChange){
? ? ?? ? clearInterval(omg);
? ? ?? ? omg = setInterval(function(){
? ? ?? ? ??num--;
? ? ?? ? ??if(num < 0){
? ? ? ? num = 4;
? ? ? ? ? ?}
? ? ? ? ?imgTab();
? ? ? ? ? ? ? },800);
? ? ?? ?}else{
? ? ?? ? if(num == 0){
? ? ?? ? alert("這已經(jīng)是第一張了");
? ? ?? ? }else{
? ? ?? ? clearInterval(seqNext);
? ? ?? ? seqPrev = setInterval(function(){
? ? ?? ? num--;
? ? ?? ? if(num < 0){
? ? ?num = 0;
? ? ?clearInterval(seqPrev);
? ? ? ?}
? ? ? ?imgTab();
? ? ? ? ? },800);
? ? ?? ? ? ?}
? ? ?? ?}
? ?}
這是以前寫的一個小例子，包含了自動循環(huán)播放，正序播放，逆序播放，點(diǎn)擊下一張，上一張播放等功能，你參考下
