原生js写轮播
css代码
<style type="text/css">
#box{
width:1140px;
height: 380px;
border: 1px solid #000;
margin: 0 auto;
position: relative;
}
img{
position: absolute;
top: 0;
left: 0;
}
a{
display: block;
width:60px;
height: 50px;
text-align: center;
line-height: 50px;
background: #FFFAE8;
display: none;
position: absolute;
}
#prev{
top:50%;
left: 10px;
}
#next{
top:50%;
right: 10px;
}
p{
width:30px;
height: 30px;
background-color: #ccc;
border-radius: 50%;
float: left;
margin:0 10px;
border:2px solid #fff;
margin:10px;
}
.spot{
width:272px;
height:40px;
position: absolute;
bottom:10px;
left: 40%;
}
.on{
background: red;
}
</style>
html代码
<div id="box">
<img src="img/j_banner1.jpg" alt="" />
<img src="img/j_banner2.jpg" alt="" />
<img src="img/j_banner3.jpg" alt="" />
<img src="img/j_banner4.jpg" alt="" />
<img src="img/j_banner5.jpg" alt="" />
<div class="spot">
<p class="on"></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
<a id="prev" href="javascript:;">前一张</a>
<a id="next" href="javascript:;">后一张</a>
</div>
javascript代码
<script type="text/javascript">
var pic = document.getElementsByTagName("img");
var btn1 = document.getElementById("prev");
var btn2 = document.getElementById("next");
var _box = document.getElementById("box");
var _p = document.getElementsByTagName("p");
var num = 0;
var timer = null;
for(var j = 1;j < pic.length;j++){
setOpacity(pic[j],0);
}
//透明度封装
function setOpacity(elem,level){
if(elem.filters){
elem.style.filter = "alpha(opacity=" + level + ")";
}else{
elem.style.opacity = level / 100;
}
}
//淡如效果
function fadeIn(elem){
setOpacity(elem,0);
for(var i = 0;i <= 100;i++){
(function(pos){
setTimeout(function(){
setOpacity(elem,pos)
},10 * pos);
})(i);
}
}
//淡出效果
function fadeOut(elem){
for(var i = 0;i <= 100;i++){
(function(pos){
setTimeout(function(){
setOpacity(elem,pos);
},10 *(100 - pos));
})(i);
}
}
function converPrev(){
if(num == 0){
fadeOut(pic[num]);
num = 4;
fadeIn(pic[num]);
}else{
fadeIn(pic[num-1]);
fadeOut(pic[num]);
num--;
}
showDot(num);
}
function converNext(){
if(num == 4){
fadeOut(pic[num]);
num = 0;
fadeIn(pic[num]);
}else{
fadeIn(pic[num+1]);
fadeOut(pic[num]);
num++;
}
showDot(num);
}
//小圆点背景色
function showDot(n){
for(var k = 0;k < _p.length;k++){
_p[k].className="";
}
_p[n].className = "on";
}
//小圆点点击事件
for(var n = 0;n < _p.length;n++){
_p[n].setAttribute("aindex",n);
_p[n].onclick = function(){
var newIndex = this.getAttribute("aindex") * 1;
fadeOut(pic[num]);
fadeIn(pic[newIndex]);
num = newIndex;
showDot(num);
}
}
function autoPlay(){
timer = setInterval(converNext,2000);
}
autoPlay();
btn1.onclick = converPrev;
btn2.onclick = converNext;
_box.onmouseout = function(){
autoPlay();
btn1.style.display = "none";
btn2.style.display = "none";
}
_box.onmouseover = function(){
clearInterval(timer);
btn1.style.display = "block";
btn2.style.display = "block";
}
</script>