您的位置：首页 > Web前端 > JavaScript

javascript 实现图片轮播和点击切换功能

2014-11-07 11:11 906 查看

图片轮播是网页上一个比较常见的功能，下面我们来实现他吧

原理很简单：

1：固定的区域，所有的图片重叠，一次只能显示一张图片

2：通过改变图片的zIndex属性改变显示的图片，就可以达到切换的效果了

<!-- cycle_pic.html -->
<!DOCTYPE html>
<html>
<head>
<title>cycle_pic</title>
<meta charset="utf-8">
<meta content="text/html" http-equiv="Content-Type">
<style type="text/css">
#slideshow_wrapper {
POSITION: relative;
PADDING-BOTTOM: 0px;
BACKGROUND-COLOR: #121212;
PADDING-LEFT: 0px;
WIDTH: 650px;
PADDING-RIGHT: 0px;
HEIGHT: 400px;
OVERFLOW: hidden;
PADDING-TOP: 0px
}
#slideshow_footbar {
Z-INDEX: 5;
POSITION: absolute;
FILTER: alpha(opacity=50);
WIDTH: 100%;
BOTTOM: 0px;
HEIGHT: 30px;
background-color: black;
opacity:0.5;
}
#slideshow_photo {
POSITION: absolute;
WIDTH: 100%;
HEIGHT: 100%;
CURSOR: pointer
}
#slideshow_photo A {
Z-INDEX: 1;
BORDER-BOTTOM: 0px;
POSITION: absolute;
BORDER-LEFT: 0px;
MARGIN: 0px;
DISPLAY: block;
BORDER-TOP: 0px;
TOP: 0px;
BORDER-RIGHT: 0px;
LEFT: 0px
}
#slideshow_footbar .slideshow-bt {
BACKGROUND-COLOR: #d2d3d4;
MARGIN: 10px 10px 0px 0px;
WIDTH: 10px;
DISPLAY: inline;
FLOAT: right;
HEIGHT: 10px;
FONT-SIZE: 0px
}
#slideshow_footbar .bt-on {
BACKGROUND-COLOR: red;
}
</style>
<script type="text/javascript" charset="utf-8">
var curIndex=1;//初始换显示第一张
function slideTo (index) {
var index = parseInt(index);
var pic = document.getElementById("slideshow_photo").childNodes;
for(var i=0;i<pic.length;i++){//改变zIndex属性
if(pic[i].attributes && pic[i].attributes['index'] && parseInt(pic[i].attributes['index'].value)==index){
pic[i].style.zIndex=2;
curIndex=index;
}
else if(pic[i].attributes && pic[i].attributes['index']) {
pic[i].style.zIndex=1;
}
}
var bts = document.getElementsByClassName("slideshow-bt");
for(var i=0;i<bts.length;i++){//改变显示的效果
if(parseInt(bts[i].attributes['index'].value)==index){
bts[i].className="slideshow-bt bt-on";
}
else bts[i].className = "slideshow-bt";
}
}
window.onload = function  () {    //为按钮初始化onclick事件
var bts = document.getElementsByClassName("slideshow-bt");
for(var i=0;i<bts.length;i++){
bts[i].onclick = function  () {
slideTo(this.attributes['index'].value);
}
}
}
setInterval(function  () {//循环切换
if(curIndex+1>5) curIndex=0;
slideTo(curIndex+1);
},2000);
</script>
</head>
<body>
<div id="slideshow_wrapper">
<div id="slideshow_photo">
<a href="#" title="" index="1"><img src="./num/1.jpg" width="650px;" alt="1" border="0px;"></a>
<a href="#" title="" index="2"><img src="./num/2.jpg" width="650px;" alt="2" border="0px;"></a>
<a href="#" title="" index="3"><img src="./num/3.jpg" width="650px;" alt="3" border="0px;"></a>
<a href="#" title="" index="4"><img src="./num/4.jpg" width="650px;" alt="4" border="0px;"></a>
<a href="#" title="" index="5"><img src="./num/5.jpg" width="650px;" alt="5" border="0px;"></a>
</div>
<div id="slideshow_footbar">
<div class="slideshow-bt" index="5"></div>
<div class="slideshow-bt" index="4"></div>
<div class="slideshow-bt" index="3"></div>
<div class="slideshow-bt" index="2"></div>
<div class="slideshow-bt" index="1"></div>
</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航