带小图标预览功能车展

css样式

*{padding: 0;margin: 0;}
            .web{width: 100%;height: 520px;position: relative;}
            .pic{width: 100%;height: 520px;overflow: hidden;}
            .pic ul li{list-style: none;width: 100%;height: 520px;display: none;}
            .nav{height: 22px;position: absolute;right: 185px;bottom: 15px;}
            .nav ul li{list-style: none;width: 60px;height: 22px;float: right;margin-left: 5px;cursor: pointer;
                        position: relative;transition: width .2s;/*平缓的对宽度进行变化*/}
            .nav ul li img{width: 60px;height: 22px;position: absolute;right: 0px;bottom: 0px;transition: .2s;}

index

<div class="web">
            <div class="pic">
                <ul>
                    <li style="background: url(img/1.jpg) center;"></li>
                    <li style="background: url(img/2.jpg) center;"></li>
                    <li style="background: url(img/3.jpg) center;"></li>
                    <li style="background: url(img/4.jpg) center;"></li>
                    <li style="background: url(img/5.jpg) center;display: block;"></li>
                </ul>
            </div>
            <div class="nav">
                <ul>
                    <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>
                    <li><img src="img/5.jpg" /></li>
                </ul>
            </div>
        </div>

js

<script>
        var i=0;
        $(".nav ul li").hover(function(){
            $(this).css({"width":"130px"});
            $(this).find("img").css({"width":"130px","height":"50px"});
        },function(){
            $(this).css({"width":"60px"});
            $(this).find("img").css({"width":"60px","height":"22px"});
        })
        $(".nav ul li").click(function(){
            i=$(this).index();
            $(".pic ul li").eq(i).fadeIn(1000).siblings().fadeOut(1000);
        })
    </script>