基于jQuery库的功能，要制作以上的图片自动切换效果很简单，首先我们来看CSS+HTML代码：

<!--图片自动切换的CSS代码-->
<style type="text/css">
.focus {
    position:relative;width:375px;height:375px;
    overflow:hidden;margin:0 auto 20px;
    border:3px solid #ddd;
}
.focus .tab {
    position:absolute;left:0;bottom:0;z-index:2;
    width:100%;height:40px;line-height:40px;
    overflow:hidden;text-align:center;
    background-color:#333;
    background-color:rgba(0,0,0,0.7);
}
.focus .tab a {
    display:inline-block;width:10px;height:10px;
    text-indent:-1000em;
    margin:15px 3px 0;
    border-radius:50%;
    background-color:#cbcbcb;
}
.focus .tab a:hover {background-color:#ee4433;}
.focus .tab a.on {background-color:#ee4433;}
.focus .content {
    position:relative;
    width:100%;
    height:100%;
    overflow:hidden;
}
.focus .content ul {
    position:absolute;left:0;top:0;z-index:1;
    width:100%;height:100%;
    margin:0;padding:0;
    list-style:none;
}
.focus .content li {
    float:left;width:375px;height:375px;
    list-style:none;margin:0;padding:0;
}
.focus .content li img {width:375px;height:auto;}
</style>

<!--图片自动切换的HTML代码-->
<div class="focus">
    <div class="tab">
        <a href="/moban/25.html" class="on">房地产网站模板+手机版</a>
        <a href="/moban/35.html">响应式网站模板</a>
        <a href="/moban/20.html">营销型网站模板+手机版+源PSD设计图</a>
    </div>
    <div class="content">
        <ul>
            <li><a href="/moban/25.html" title="房地产网站模板+手机版"><img src="/uploadfile/2017/0306/20170306095346407.jpg" alt="房地产网站模板+手机版"></a></li>
            <li><a href="/moban/35.html" title="响应式网站模板"><img src="/uploadfile/2017/0321/20170321101321210.jpg" alt="响应式网站模板"></a></li>
            <li><a href="/moban/20.html" title="营销型网站模板+手机版+源PSD设计图"><img src="/uploadfile/2016/1218/20161218095200830.jpg" alt="营销型网站模板+手机版+源PSD设计图"></a></li>
        </ul>
    </div>
</div>

最后需要加载jquery库文件，然后在网页底部定义js方法来实现图片自动切换。

<!--载入jquery库-->
<script type="text/javascript" src="/statics/ljs/jquery.js"></script>
<!--实现图片自动切换的JS方法-->
<script type="text/javascript">
$(function(){
    $(".focus .content ul").width(375*$(".focus .content li").length+"px");
    $(".focus .tab a").mouseover(function(){
        $(this).addClass("on").siblings().removeClass("on");
        var index = $(this).index();
        number = index;
        var distance = -375*index;
        $(".focus .content ul").stop().animate({left:distance});
    });
    var auto = 1;
    if(auto == 1){
        var number = 0;
        var maxNumber = $(".focus .tab a").length;
        function autotab(){
            number++;
            number == maxNumber ? number=0 : number;
            $(".focus .tab a:eq("+number+")").addClass("on").siblings().removeClass("on");
            var distance = -375*number;
            $(".focus .content ul").stop().animate({left:distance});
        }
        var tabChange = setInterval(autotab,3000);
        $(".focus").mouseover(function(){clearInterval(tabChange);});
        $(".focus").mouseout(function(){tabChange = setInterval(autotab,3000);});
    }
});
</script>