您的位置：首页 > Web前端 > JavaScript
纯原生JS轮播图片

2016-02-25 14:25 836 查看
代码：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>图片切换</title>
<style>
*{padding: 0;margin: 0; text-decoration: none; list-style: none; font-family: '微软雅黑'}
.content{
position: relative;
width: 500px;
height: 400px;
margin: 20px auto 0;
background: #efefef;
border: 10px solid #E0E0E0;
border-radius: 4px;
}
#prev,#next{
position: absolute;
top: 175px;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
background: #fff;
opacity: .5;
filter:alpha(opacity=50);
color: #333;
}#prev:hover,#next:hover{
filter:alpha(opacity=80);
opacity: .8;
}
#prev{left: 0;}
#next{right: 0;}
#intro,#num{
position: absolute;
width: 100%;
padding: 5px 0;
text-align: center;
background: #000;
opacity: .8;
filter:alpha(opacity=80);
color: #fff;
}
#intro{bottom: 0;}
#num{top: 0;}
#img{
width: 500px;
height: 400px;
}
.top{
width: 500px;
margin: 20px auto 0;
text-align: center;
}
#p1{padding: 10px 0}
.top button.active{
background: #e65d33;
color: #fff;
}
.top button{
width: 80px;
height: 30px;
border-radius: 4px;
cursor: pointer;
outline: none;
background: transparent;
border: 1px solid #e65d33;
color: #e65d33
}

</style>

</head>

<body>
<div class="top">
<button class="active">循环切换</button>
<button>顺序切换</button>
<p id="p1">图片可从最后一张跳转到第一张循环切换</p>
</div>
<div class="content">
<a href="javascript:;" id="prev"> < </a>
<a href="javascript:;" id="next"> > </a>
<p id="intro">描述文字...</p>
<p id="num">数量...</p>
<img src="" alt="" id="img">

</div>
<script>
window.onload = function(){
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var intro = document.getElementById('intro');
var num = document.getElementById('num');
var img = document.getElementById('img');
var p1 = document.getElementById('p1');
var oBtn = document.getElementsByTagName('button');
var n = 0;
var off = true;  //循环切换为true
var arrImg = ['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg'];
var arrImgBg = ['#7070B6','#EDA727','#D6ED27','#3FF157','#F13F76'];
var arrTxt = ['blue','orange','yellow','green','red'];

oBtn[0].onclick = function(){
off = true;
p1.innerHTML = '图片可从最后一张跳转到第一张循环切换';
}
oBtn[1].onclick = function(){
off = false;
p1.innerHTML = '图片只能到最后一张或只能到第一张切换';
}

function init(){
num.innerHTML = n+1+' / '+arrImgBg.length;
intro.innerHTML = arrTxt
;
img.style.backgroundColor = arrImgBg
;
}
init();
// img.src = arrImg
;
next.onclick = function(){
n++;
if(n == arrImg.length){
if(off){
n = 0;
}else{
alert('最后一张啦~')
n = arrImg.length-1;
}

}
init();
}
prev.onclick = function(){
n--;
if(n == -1){
if(off){
n = arrImg.length-1;
}else{
alert('第一张啦~')
n = 0;
}
}
init();
}
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签： 轮播
相关文章推荐
新的分享
章节导航