HTML:
<DOCTTYPE!>
<html>
<head>
<meta charset='utf-8'>
<script src="index.js" type="text/javaScript"></script>
<link href="index.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id='box'>
<img src='images/0.jpg' alt='促销' id='image0'>
<img src='images/1.jpg' alt='促销' id='image1'>
<img src='images/2.jpg' alt='促销' id='image2'>
<img src='images/3.jpg' alt='促销' id='image3'>
</div>
<div id='click'>
<img src = 'images/4.jpg' alt='点击' id='click2'>
</div>
</body>
</html>
CSS:
*{
margin: 0;
padding: 0;
}
#image0,#image1,#image2,#image3{
position: absolute;
top: 0;
left: 0;
}
#click{
position: absolute;
top: 240px;
left: 490px;
}
#image0{
opacity: 1;
}
#image1{
opacity: 0;
}
#image2{
opacity: 0;
}
#image3{
opacity: 0;
}
#click2{
cursor: pointer;
}
JavaScript：
window.onload = function(){
shoudong(4);
zidong(4);
}
//手动轮播器 imgNum：轮播器中图片的数量
function shoudong(imgNum){
var click1 = document.getElementById('click1');
var box = document.getElementById('box');
var child = box.children;
var num = 1;
click2.onclick = function(){
if(num == imgNum){
num = 0;
}
if(num == 0){
child[imgNum-1].style.opacity = 0;
}else{
child[num-1].style.opacity = 0;
}
child[num].style.opacity = 1;
num++;
}
}
//自动轮播器 imgNum：轮播器中图片的数量
var timer = null;
function zidong(imgNum){
var click1 = document.getElementById('click1');
var box = document.getElementById('box');
var child = box.children;
var num = 1;
timer = setInterval(function(){
if(num == imgNum){
num = 0;
}
if(num == 0){
child[imgNum-1].style.opacity = 0;
}else{
child[num-1].style.opacity = 0;
}
child[num].style.opacity = 1;
num++;
},1000);
}
扫一扫
608
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
