jquery 鼠标触发，抽屉式幻灯片左右切换 - 图片展开收缩代码

使用jquery方法，实现抽屉式的图片左右切换展开收缩代码，特效非常绚丽！

!DOCTYPE html>
        html>
        head>
        meta http-equiv="Content-Type" content="text/html;
     charset=utf-8" />
        title>
    SW Family/title>
        style type="text/css">
    *{
    margin:0;
    padding:0;
    list-style-type:none;
}
    a,img{
    border:0;
    text-decoration:none;
}
    body{
    font:12px/180% Arial, Helvetica, sans-serif, "新宋体";
}
    .pic{
    width:1100px;
    height:430px;
    margin:70px auto 0;
}
    .pic ul li{
    list-style:none;
    width:100px;
    height:429px;
    float:left;
}
    .pic .l1{
    background-image:url(img/1.jpg);
}
    .pic .l2{
    background-image:url(img/2.jpg);
}
    .pic .l3{
    background-image:url(img/3.jpg);
}
    .pic .l4{
    background-image:url(img/4.jpg);
    width:789px;
}
    .txt{
    width:100px;
     height:429px;
    background:#000;
    filter:alpha(opacity=50);
    background:rgba(0,0,0,.5);
}
    .txt p{
    color:#fff;
    font-family:"微软雅黑";
    float:left;
    position:relative;
}
    .txt .p1{
    font-size:12px;
    width:12px;
    margin:25px 25px 0 20px;
}
    .txt .p2{
    font-size:14px;
    width:14px;
    margin-top:25px;
}
        /style>
        /head>
        body>
        div class="pic">
        	ul>
        li class="l1">
        a href="http://www.17sucai.com/" target="_blank">
        div class="txt">
        p class="p1">
    作者 ： 默默的墨墨/p>
        p class="p2">
    我的个人拉萨之旅｜｜故事之城/p>
        /div>
        /a>
        /li>
        li class="l2">
        a href="http://www.17sucai.com/" target="_blank">
        div class="txt">
        p class="p1">
    作者 ： 默默的墨墨/p>
        p class="p2">
    我的个人拉萨之旅｜｜故事之城/p>
        /div>
        /a>
        /li>
        li class="l3">
         a href="http://www.17sucai.com/" target="_blank">
        div class="txt">
        p class="p1">
    作者 ： 默默的墨墨/p>
        p class="p2">
    我的个人拉萨之旅｜｜故事之城/p>
        /div>
        /a>
        /li>
        li class="l4">
                  a href="http://www.17sucai.com/" target="_blank">
        div class="txt">
        p class="p1">
    作者 ： 默默的墨墨/p>
        p class="p2">
    我的个人拉萨之旅｜｜故事之城/p>
        /div>
        /a>
        /li>
        	/ul>
        /div>
        script type="text/javascript" src="js/jquery.js">
    /script>
        script type="text/javascript">
    $(".pic ul li").hover(function(){
    	$(this).stop(true).animate({
width:"789px"}
,500).siblings().stop(true).animate({
width:"100px"}
    ,500);
    }
    );
        /script>
        /body>
        /html>
    

这种方法的JS代码非常简单，特效也非常好看，适合比较宽屏的轮播或者幻灯片使用！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！