图片轮播 z-index方法

最新推荐文章于 2022-05-12 13:45:29 发布

dfhca8563

最新推荐文章于 2022-05-12 13:45:29 发布

阅读量260

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/nimiair/p/5137568.html

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片轮播 z-index方法</title>
<style type="text/css">
*{margin: 0;padding: 0;text-decoration: none;}
#container{width: 600px; height: 400px; border: 3px solid #333; position: relative;margin:20px;}
#list { width: 600px; height: 400px; position: absolute;}
#list img {width: 600px; height: 400px;position: absolute;}
#buttons .on { background: orange;}
#buttons{position: absolute; z-index: 2; bottom: 20px; left: 250px;}
#buttons span{width: 10px;height: 10px;border: #fff 1px solid;background-color: #333;border-radius: 50%;cursor: pointer;display: inline-block;}
.arrow{position: absolute;width: 40px;line-height: 40px;font-weight: bolder;font-size: 36px;text-align: center;color: #fff; cursor: pointer;display: none;height: 40px;z-index: 2;top: 180px;background-color: RGBA(0,0,0,.3);}
.arrow:hover { background-color: RGBA(0,0,0,.7);}
#container:hover .arrow{ display: block;}
#prev { left: 20px;}
#next { right: 20px;}

</style>
<script type="text/javascript">
window.onload = function () {
var container = document.getElementById('container');
var images = document.getElementById('list').getElementsByTagName('img');
var buttons = document.getElementById('buttons').getElementsByTagName('span');
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var index = 1;
var interval = 1000;
function animate(index){
for (var i=0;i<images.length;i++){
images[i].style.zIndex='0';
}
images[index-1].style.zIndex='1';
}
function showButton(index){
for (var i=0;i < buttons.length;i++) {
buttons[i].className=''
};
buttons[index-1].className='on';
}

function play() {
timer = setTimeout(function () {
next.onclick();
play();
}, interval);
}
function stop() {
clearTimeout(timer);
};

prev.οnclick=function(){
if (index===1){
index = 5;
}else{
index-=1
}
animate (index);
showButton(index);
}
next.οnclick=function(){
if (index===5){
index = 1;
}else{
index+=1
}
animate (index);
showButton(index);
}
for (var i = 0; i < buttons.length; i++) {
buttons[i].coo=i+1;
buttons[i].οnclick=function(){
if(this.className == 'on') {
return;
}
index=parseInt(this.coo);
animate (index);
showButton(index);
}
};
container.οnmοuseοver=stop;
container.οnmοuseοut=play;
play();
};
</script>
</head>
<body>

</body>
</html>

转载于:https://www.cnblogs.com/nimiair/p/5137568.html

dfhca8563

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片轮播 z-index方法

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>图片轮播 z-index方法</title> <style type="text/css">*{margin: 0;padding: 0;text-decoration: ...
复制链接

扫一扫