轮播图

作者: 一枚奋斗青年 | 来源:发表于2016-07-27 21:39 被阅读13次

无标题文章
轮播图
现金红包
day7_作业
[iOS]定制性强的广告轮播图--SCAdView
普通奖品
轮播图心得
第五周学习内容
三种样式的轮播图
多轮播图的设计

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 标签样式初始化 /
body{margin:0;padding:0;background:#fff;font-size:14px;font-family:Arial,Helvetica,'STHeiti','Microsoft YaHei','sans-serif'}
form,ul,li,p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
img{border:0;}
ul,li{list-style-type:none;}
a{color:#00007F;text-decoration:none;}
a:hover{text-decoration:none;}
/标签样式初始化*/
#wrap{
position: relative;
width: 700px;
height: 430px;
margin: 0 auto;
overflow: hidden;
}
#photo{
position: relative;
width: 9999px;
transition:all 1s;
left: 0;
}
#photo img{
float: left;
width: 700px;
}
#bottom{
position: absolute;
text-align: center;
width: 100%;
bottom: 15px;
}
.pages{
width: 18px;
height: 18px;
border-radius: 50%;
background: black;
display: inline-block;
color: white;
line-height: 18px;
text-align: center;
font-size: 12px;
}
.selected{
background: red;
}
#center{
position: absolute;
top: 50%;
width: 100%;
display: none;
margin-top: -30px;
}
#center a{
width: 28px;
height: 62px;
background: rgba(0,0,0,0.6);
float: left;
text-align: center;
color: white;
line-height: 62px;
}
#center #rightbtn{
float: right;
}
#center #leftbtn{
float: left;
}

</style>

</head>
<body>
<div id="wrap">
<div id="photo">
<img src="img/10.png" alt="">
<img src="img/2.png" alt="">
<img src="img/55.jpg" alt="">
<img src="img/66.jpg" alt="">
<img src="img/5.png" alt="">
<img src="img/9.png" alt="">

    </div>
    <!-- 图片下方的小圆点 -->
    <ul id="bottom">
       <li class="pages selected">1</li>
       <li class="pages">2</li>
       <li class="pages">3</li>
       <li class="pages">4</li>
       <li class="pages">5</li>
       <li class="pages">6</li>


    </ul>
    <!-- 图片左右两边的按钮 -->
    <div id="center">
     <a href="#" class="btn"id="leftbtn">&lt;</a>
     <a href="#" class="btn" id="rightbtn">&gt;</a>
    </div>

</div>
<script>
   //获取元素
  // var wrap = document.getElementById('wrap');
    var photo = document.getElementById('photo');
    var imgs = document.getElementsByTagName('img');
    var pages = document.getElementsByClassName('pages');
    var btn = document.getElementsByClassName('btn');
    var leftBtn = document.getElementById('leftbtn');
    var rightBtn = document.getElementById('rightbtn');

   //自动轮播大图
   var timer = null;
   function autoplay(){
    timer= setInterval(function(){
        index++;
        if(index>5){
            index = 0;
        }
        photo.style.left = index * -imgs[0].width + "px";
        change();
    },2000);
   }
   //轮播的自动调用
   autoplay();

   //点击右侧的按钮是图片滚动
    var index = 0;
    rightbtn.onclick =function(){
        clearInterval(timer);
        index++;
        if (index > 5) {
            index = 0;
        };
        photo.style.left = index * -(imgs[0].width) + "px";
        change();
        //如果要是点击不让图片动就把他主调
        // autoplay();
    }

    //点击左侧的按钮是图片滚动
     leftbtn.onclick = function(){
        clearInterval(timer);
        index--;
        if (index < 0) {
            index = 5;
        };
        photo.style.left = index * -imgs[0].width + "px";
        change();
        //如果要是点击不让图片动就把他主调
         // autoplay();
     }
     //当鼠标移出时，左右两侧按钮消失，当鼠标移入时，左右按钮出现
    wrap.onmouseout = function() {
        document.getElementById('center').style.display = 'none';
        autoplay();
    }
    wrap.onmouseover = function() {
        document.getElementById('center').style.display = 'block';
        clearInterval(timer);

    }
    //当鼠标移入底部分页按钮时，改变按钮样式并改变相应的图片
    for (var i = 0; i < pages.length; i++) {
        pages[i].index = i;
        //为分页按钮添加点击事件
        pages[i].onmouseover = function(){
            clearInterval(timer);
            photo.style.left = this.index *-imgs[0].width + 'px';
            index = this.index;
            change();
            autoplay();
        }
    };
    //页码的样式改变
    function change (){
        for(var i = 0;i < pages.length;i ++){
                pages[0].style.background = 'black';
                pages[i].style.background = '';
            }
            pages[this.index].style.background = 'red';
    }

</script>

</body>
</html>