焦点轮播图（一）

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>焦点轮播图</title>
    <link rel="stylesheet" type="text/css" href="master.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
    <script type="text/javascript" src="main.js"></script>
</head>
<body>
    <div class="container">
        <div class="ad">
            <ul class="img">
                <li><img src="img/1.jpg"></li>
                <li><img src="img/2.jpg"></li>
                <li><img src="img/3.jpg"></li>
                <li><img src="img/4.jpg"></li>
            </ul>

            <ul class="spot">
                <li class="native"></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
</body>
<html>

CSS

body,ul,li{margin: 0px;padding: 0px}

.container{position: relative;width: 100%;padding-top: 20px;}

.ad{position: relative;}

.img{position: relative; z-index:1; width: 368px;height: 368px;margin: auto;border: 1px solid #ccc;}

.img li{position: absolute;display: block;}

.spot{position: absolute; z-index: 3; bottom: 20px; width:100%;  text-align: center; border: none;}

.spot li{position: relative; display: inline-block; margin: 0 15px; width: 10px; height: 10px; border: 1px solid #ccc; border-radius: 5px; list-style: none;}

.spot .native{background-color: red}

p{text-align: center;}

$(document).ready(function(){
    (function(){
        var imgLi=$('.img').find('li');
        var spotLi=$('.spot').find('li');
        var iNow=0;
        var timer=null;

        autoPlay();

        spotLi.hover(function(){
            clearInterval(timer);
            iNow=$(this).index();
            fnFade();
        },function(){
            autoPlay();
        });

        function autoPlay(){
            timer=setInterval(function(){
            iNow++;
            iNow %= 4;
            fnFade();
            },2000);
        }

        function fnFade(){
            imgLi.each(function(i){
                if(i!=iNow){
                    imgLi.eq(i).stop().fadeOut().css('z-index','1');
                    spotLi.eq(i).removeClass('native');
                }else{
                    imgLi.eq(i).stop().fadeIn().css('z-index','2');
                    spotLi.eq(i).addClass('native');
                }
            });
        }
    })();
});