HTML

<div class="box">
            <div class="pic">
                <ul class="clearfix">
                    <li><img src="img/952-440-1.jpg" alt="" /></li>
                    <li><img src="img/952-440-2.jpg" alt="" /></li>
                    <li
 
><img src="img/952-440-3.jpg" alt="" /></li>
                    <li><img src="img/952-440-4.jpg" alt="" /></li>
                </ul>                                                               
            </div>
            <div class="tab">
                <a
 
 href="#" class="on">01</a>
                <a href="#">02</a>
                <a href="#">03</a>
                <a href="#">04</a>
            </div>
        </div>

CSS

*{margin:0;padding:0;}
            ul,li{list-style: none;display: block;}
            a
 
{text-decoration:none; font-size:20px;color: #302833;}
            .clearfix:after{content: '';display: block;height: 0;visibility: hidden;clear: both;}
            .box{position: relative;width:100%; overflow: hidden;}
            .pic{position: absolute;left:0;width:400%;}         
            li{float:left;width:25%;}
            img{display: block;width: 100%;}
            .tab{width:50%;position: absolute;right:0;bottom:0;}
            .tab a{display: inline-block;width:20%;height:30px;line-height: 30px;background: red;color: #fff;text-align: center;}
            .on{background: blue !important;}

JS

$(function(){
            var $window_wid=$(window).width();
            $(".box").height($window_wid*0.46);  //盒子的高度始終是瀏覽器寬度的0.43
            $(window).resize(function(){
                 $window_wid=$(window).width();
                 $(".box").height($window_wid*0.46); 
//               console.log($(".box").height())
            });
            var box=$(".box"),  //  大盒子
            btns=box.find(">div.tab>a"),  //  獲取a標籤
            pic=box.find(".pic"),   // 找ul
            p=0;                 //  指示         
            btns.each(function(index,btn){
                btn=$(btn);  // 相當於 $(this)
                btn.mouseenter(function(){
                    if(index !=p){// 1 2 3
                        $(btns[p]).removeClass("on"); // 移出預設
                        btn.addClass("on");//  給當前 指示（a連結） 設定  
                        p=index;// 更新p 移除預設樣式 
                        pic.stop().animate({
                            "left":-100*index+"%"
                        },300)
                    }
                })
            }).eq(0).mouseenter()

        })

效果

看兩張圖片的高度