轮播图

css

*{
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
        }
        #banner{
            margin: 0 auto;
            width: 1024px;
            height: 684px;
            overflow: hidden;
            border: 3px solid #999;
            position: relative;
        }
        #imglist{
            width: 1024px;
            height: 684px;
        }
        #imglist a{
            display: none;
        }
        #iconlist{
            position: absolute;
            right: 20px;
            bottom: 10px;
        }
        #iconlist li{
            width: 25px;
            height: 25px;
            line-height: 25px;
            text-align: center;
            float: left;
            background-color: #999;
            border-radius: 13px;
            color: #fff;
            cursor: pointer;
            margin-left: 5px;
        }
        .last,.next{
            display: none;
        }
        .last{
            position: absolute;
            width: 50px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            font-size: 30px;
            background-color: #999;
            color: #fff;
            left: 10px;
            top: 50%;
            margin-top: -50px;
            opacity: 0.5;
        }
        .next{
            position: absolute;
            width: 50px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            font-size: 30px;
            background-color: #999;
            color: #fff;
            right: 10px;
            top: 50%;
            margin-top: -50px;
            opacity: 0.5;
        }
        #banner:hover .last,#banner:hover .next{
            display: block;
        }

html

        

            
            
            
            
            
        
        

            
1
            
2
            
3
            
4
            
5
        
        
<
        
>
    

js

var imgs = document.getElementById('imglist').getElementsByTagName('a');
    var icons = document.getElementById('iconlist').getElementsByTagName('li');

    var div = document.getElementById("banner");

    var last = document.getElementsByClassName('last')[0];
    var next = document.getElementsByClassName('next')[0];

    var imglenght = imgs.length;
    var iconlenght = icons.length;
    //设置循环变量
    var m = 1;
    //定时器
    var timer = setInterval(run,3000);
    //循环函数
    function run() {
        if (m >= 5){
            m = 0;
        }
        controlimg(m);
        //控制图标
        controlicon(m);
        m ++;
    }

    //定义一个函数  控制图片
    function controlimg(m) {
        for (var i = 0;i < imgs.length; i ++){
            imgs[i].style.display = "none";
        }
        //显示指定图片
        imgs[m].style.display = "block";
    }

    //改变图标颜色
    function controlicon(m) {
        for (var i = 0;i < imgs.length; i ++){
            icons[i].style.backgroundColor = "#999";
        } ;
        //显示指定图片
        icons[m].style.backgroundColor = "#cc0";
    }
    //鼠标悬停事件，
    div.onmouseover = function () {
        clearInterval(timer);
    };
    // 鼠标移走事件
    div.onmouseout = function () {
        timer = setInterval(run, 2000);
    }
    //图标绑定事件
    for (var i = 0;i < icons.length; i ++){
        (function (i) {
            icons[i].onmouseover=function () {
                controlimg(i);
                controlicon(i);
                m = i + 1;
            }
        })(i)
    };
    //点击左边的标签向左切换
    last.onclick = function (){
      m --;
      if(m < 0){
        m = 4;
      };
      controlimg(m);
      //控制图标
      controlicon(m);
    };
    //点击左边的标签向左切换
    next.onclick = function (){
      m ++;
      if(m >=5){
        m = 0;
      };
      controlimg(m);
      //控制图标
      controlicon(m);
    };