展示效果如下：
功能：点击开始就开始播放图片，点击+0.5s或者-0.5s可调节播放速度。点击左右箭头切换上一张或者下一张图片，鼠标移至图片位置暂停播放，移出则继续播放。下面原点有颜色处代表当前第几张图片，鼠标移至任意圆点都可使图片切换到对应的图片。
js源码：
(function() {
var body = document.body;
var nowImgNumber = 1;
var img = document.getElementsByTagName('img');
var start;
var playTime = 2000; //播放时间
var showTime = document.getElementById('showTime');
var flag = 1;
init();
//添加事件委托，左右按钮的
body.addEventListener('click', function(e) {
let id = e.target.id;
if(id == 'rightA') {
if(nowImgNumber == 6) {
nowImgNumber = 1;
} else {
nowImgNumber++;
}
img[0].setAttribute('src', nowImgNumber + '.jpg');
stopPlay('img' + nowImgNumber);
//setTimeout(startPlay, 1000);
startPlay();
} else if(id == 'leftA') {
if(nowImgNumber == 1) {
nowImgNumber = 6;
} else {
nowImgNumber--;
}
img[0].setAttribute('src', nowImgNumber + '.jpg');
stopPlay('img' + nowImgNumber);
startPlay();
} else if(id == 'controlAdd') {
clearInterval(start);
changTime(1);
showTime.innerHTML = playTime / 1000;
startPlay();
} else if(id == 'controlReduce') {
clearInterval(start);
changTime(0);
showTime.innerHTML = playTime / 1000;
startPlay();
} else if(id == 'isPlay'){
flag = !flag;
let target = document.getElementById(id);
if(flag){
startPlay();
target.innerHTML = '暂停';
}else{
stopPlay('img' + nowImgNumber);
target.innerHTML = '开始';
}
}
//stopPlay('img'+nowImgNumber);
//setTimeout(startPlay,1000);
})
//鼠标移入
body.addEventListener('mouseover', function(e) {
let id = e.target.id;
switch(id) {
case 'img1':
stopPlay(id);
jump(1);
break;
case 'img2':
stopPlay(id);
jump(2);
break;
case 'img3':
stopPlay(id);
jump(3);
break;
case 'img4':
stopPlay(id);
jump(4);
break;
case 'img5':
stopPlay(id);
jump(5);
break;
case 'img6':
stopPlay(id);
jump(6);
break;
case 'image':
stopPlay(id);
break;
}
})
//鼠标移开
body.addEventListener('mouseout', function(e) {
let id = e.target.id;
switch(id) {
case 'img1':
jump(1);
startPlay();
break;
case 'img2':
jump(2);
startPlay();
break;
case 'img3':
jump(3);
startPlay();
break;
case 'img4':
jump(4);
startPlay();
break;
case 'img5':
jump(5);
startPlay();
break;
case 'img6':
jump(6);
startPlay();
break;
case 'image':
startPlay();
break;
}
})
function init() { //准备运行时的初始化
startPlay();
document.getElementById('img1').style.color = 'deepskyblue';
showTime.innerHTML = playTime / 1000;
}
function jump(num) { //图片跳跃
nowImgNumber = num;
img[0].setAttribute('src', nowImgNumber + '.jpg');
}
function changImg() { //改变图片
for(let i = 1; i <= 6; i++) {
document.getElementById('img' + i).style.color = 'black';
}
if(nowImgNumber == 6) {
nowImgNumber = 1;
} else {
nowImgNumber++;
}
img[0].setAttribute('src', nowImgNumber + '.jpg');
document.getElementById('img' + nowImgNumber).style.color = 'deepskyblue';
}
function startPlay() { //开始切换
start = setInterval(changImg, playTime);
}
function stopPlay(id) { //停止切换
for(let i = 1; i <= 6; i++) {
document.getElementById('img' + i).style.color = 'black';
}
let target = document.getElementById(id);
target.style.color = 'greenyellow';
clearInterval(start);
}
function changTime(judge) { //改变图片切换时间
if(judge == 0 && playTime != 500) {
playTime -= 500;
} else if(judge == 1 && playTime != 5000) {
playTime += 500;
}
}
})()
html源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="base.css" />
</head>
<body>
<div id="imgBox">
<div id="img">
<img id="image" src="1.jpg"/>
<span id="left" class="imgButton"><a id="leftA" href="#"><</a></span>
<span id="right" class="imgButton"><a id="rightA" href="#">></a></span>
</div>
<div id="point">
<a href="#" class="move" id='img1'>●</a>
<a href="#" class="move" id='img2'>●</a>
<a href="#" class="move" id='img3'>●</a>
<a href="#" class="move" id='img4'>●</a>
<a href="#" class="move" id='img5'>●</a>
<a href="#" class="move" id='img6'>●</a>
</div>
<span class="controlTime">当前图片切换时间间隔为</span>
<span class="controlTime" id="showTime"></span>
<span class="controlTime">秒</span>
<a href="#" id="reduce"><span class="controlTime" id="controlReduce">-0.5s</span></a>
<a href="#" id="add"><span class="controlTime" id="controlAdd">+0.5s</span></a>
<a href="#"><span id="isPlay">暂停</span></a>
</div>
<script type="text/javascript" src="index.js" ></script>
</body>
</html>
css源码：
body{
background-color: #F1F1F1;
}
#imgBox{
margin: auto;
margin-top: 6%;
height: 40%;
width: 60%;
background-color: #FFFFFF;
border: solid 1px black;
text-align: center;
border-radius: 8px/8px;
}
#imgBox img{
height: 50%;
width: 80%;
border-radius: 5px/5px;
}
#img{
margin-top: 15px;
}
#left{
float: left;
}
#right{
float: right;
}
.imgButton{
font-size: 70px;
font-weight: 300;
margin-top: 17%;
}
a{
text-decoration:none;
color: black;
}
.imgButton a:hover{
background-color: lightgray;
border-radius:5px/5px;
}
.imgButton a:active{
background-color: darkgray;
border-radius:5px/5px;
}
#point{
margin-top: 10px;
margin-bottom: 10px;
font-size:25px;
font-weight: bolder;
word-spacing: 25px;
}
.controlTime{
word-spacing: 10px;
font-size: 30px;
margin-bottom: 5px;
}
#controlAdd,#controlReduce{
display: inline-block;
border: solid 2px black;
border-radius: 5px/5px;
width: 80px;
}
#isPlay{
float:right;
display: inline-block;
margin-right: 10px;
font-size: 20px;
border: solid 3px deepskyblue;
border-radius: 3px/3px;
width: 3em;
height: 30px;
line-height: 30px;
}
#isPlay:hover{
background-color: deepskyblue;
}
#isPlay:active{
background-color: dodgerblue;
}
网友评论