HTML+jq简单轮播图

.main{
     100%;
    min- 1100px;
    display: table;
    margin: 0 auto;
    text-align: center;
    position: relative;
}
.pic {
     100%;
    min- 1100px;
    height: 500px;
    z-index: 0;
}
.pic ul {
     100%;
    height: 100%;
}
.pic ul li {
     100%;
    height: 100%;
    list-style: none;    
    position: absolute;
    top: 0;
    right: 0;
}
.pic li img {
     100%;
    height: 100%;
}
.btn{
     300px;
    height: 1.5px;
    margin: 0 auto;
    z-index: 1;
    position: relative;
    top: -40px;
}
.btn ul {
     auto;
    height: 1.5px;
    display: table;
    margin: 0 auto;
}
.btn ul li {
     37px;
    height: 1.5px;
    float: left;
    list-style: none;
    margin: 0 6px;
    background: #000;
}
.btn .btn-style{
     background-color: yellow;
}

 图片，按钮，上下页必须是同级元素

<div class="main">
    <div class="pic">
        <ul>
            <li><img src="img/index/b1.jpg"/></li>
            <li style="display: none;"><img src="img/index/b2.jpg"/></li>    
            <li style="display: none;"><img src="img/index/b3.jpg"/></li>
            <li style="display: none;"><img src="img/index/b4.jpg"/></li>
        </ul>                        
    </div>
    <div class="btn">
        <ul>
            <li style="background: yellow;"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>  
　  <div class="btn-next"></div>
    <div class="btn-pre"></div>                  
</div>

$(document).ready(function() {
    //使用按钮变色，需要定义.btn-style的样式
    Carousel('.pic');
});

function Carousel(car){
    var index = 0;
    var interval;
    var pic = $(car);
    var btn = pic.siblings('.btn');            
    var pre = pic.siblings('.btn-pre');
    var next = pic.siblings('.btn-next');
    var num = pic.find('li').length;
    
    btn.find('ul li').mouseover(function() {
        index = $(this).index();
        display(index);
    });
    
    pre.click(function(){
        index--;
        if(index < 0) {
            index = num;
        }
        display(index);
    });
    
    next.click(function(){
        index++;
        if(index > num) {
            index = 0;
        }
        display(index);
    });

    function display() {
        pic.find('ul li').eq(index).fadeIn('slow');
        pic.find('ul li').eq(index).siblings().fadeOut('fast');                
        btn.find('ul li').eq(index).addClass('btn-style');
        btn.find('ul li').eq(index).siblings().removeClass('btn-style');
    }

    interval = setInterval(function() {
        index++;
        if(index > num) {
            index = 0;
        }
        display(index);
    }, 2000);

    pic.parent().mouseenter(function() {
        clearInterval(interval);
    });

    pic.parent().mouseleave(function() {
        interval = setInterval(function() {
            index++;
            if(index > num) {
                index = 0;
            }
            display(index);
        }, 2000);
    });    
}

推荐使用swiper插件，手机端很好用，pc端貌似ie不太好用

路标： http://www.swiper.com.cn/

swiper4 api ：http://www.swiper.com.cn/api/index.html