缩略图 简介 出现原图 详情 手风琴

插一个背景图片
设置一下

<style>
        *{
            margin: 0px;
            padding: 0px;
            list-style: none;
            text-decoration: none;
        }
        .king{
            width: 1068px;
            margin: 100px auto;
            /* background: url(); */
            overflow: hidden;
            background: violet;
        }
        .king ul{
            overflow: hidden;
        }
        .king li{
            position: relative;
            float: left;
            width: 178px;
            height: 100px;
        }
        .king .active {
            width: 178px;
        }
        .king .active .big{
            display: block;
        }
        .king .active .small{
            display: none;
        }
        .small{
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            border-radius: 5px;
        }
        .big{
            width: 178px;
            display: none;
            border-radius: 5px;
        }
    </style>
    <script src="../../jquery.js"></script>//这个是插入的   jQuery

找一些需要的图片放进去
class=“small” 放需要的小图片 小图片是 简介 之类等
class=“big” 放需要的大图片 大图片是滑动后出现的 详情

<div class="king">
        <ul>
            <li class="active">
                <a href="">
                    <img src="" alt="" class="small">
                    <img src="" alt="" class="big">
                </a>
            </li>

            <li>
                <a href="">
                    <img src="" alt="" class="small">
                    <img src="" alt="" class="big">
                </a>
            </li>

            <li>
                <a href="">
                    <img src="" alt="" class="small">
                    <img src="" alt="" class="big">
                </a>
            </li>

            <li>
                <a href="">
                    <img src="" alt="" class="small">
                    <img src="" alt="" class="big">
                </a>
            </li>

            <li>
                <a href="">
                    <img src="" alt="" class="small">
                    <img src="" alt="" class="big">
                </a>
            </li>

            <li>
                <a href="">
                    <img src="" alt="" class="small">
                    <img src="" alt="" class="big">
                </a>
            </li>
        </ul>
    </div>

1.给 li 滑动效果
2.滑动时让 小图片的宽度改为大图片的宽度 自身的大图片显示 小图片隐藏 其他兄弟的 大图片隐藏 小图片显示
3.移到其他图片上时 让这个大图片宽度再改为下图片的宽度 移动到的这个图片 大图片显示 小图片隐藏 其他兄弟的 大图片隐藏 小图片显示

$(function(){
    $(".king li").mouseenter(function(){
        $(this).stop().animate({
            width: 178
        }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
        

        $(this).siblings("li").stop().animate({
            widht: 100
        }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
    })
})