基於jQuery左右滑動切換特效 附源碼

分享一款基於腳jQuery左右滑動切換特效。這是一款鼠標點擊左右箭頭按鈕圖片滾動切換，鼠標移到圖片上顯示透明邊框特效。

 

效果圖如下：

 

廢話不多說，代碼奉上！

 

html代碼：

<div class="bodyCon08"><!--學員-->
    <div class="students">
         
          <div id="four_flash">
            <div class="flashBg">
                <ul class="mobile">
                    <li>
                        <img src="images/senke_xy00.jpg" />
                        <dd>高同學</dd>
                        <p>2013年CPA暑期班學員，一年通過5門課程</p>
                        <a href=""></a>
                    </li>
                    <li>
                        <img src="images/senke_xy01.jpg" />
                        <dd>李同學</dd>
                        <p>2014年CPA周末旗艦班學員；1年通過4門課程</p>
                        <a href=""></a>
                    </li>
                    <li>
                        <img src="images/senke_xy02.jpg" />
                        <dd>丁同學</dd>
                        <p>現就職某會計師師事務所<br/>2012年CPA學員，3年通過6門課程</p>
                        <a href=""></a>
                    </li>
                    <li>
                        <img src="images/senke_xy03.jpg" />
                        <dd>宋同學</dd>
                        <p>2013年會計證、CPA長線周末班學員，2014年通過4門課程；</p>
                        <a href=""></a>
                    </li>
                    <li>
                        <img src="images/senke_xy04.jpg" />
                        <dd>戰同學</dd>
                        <p>2012年北京會計初級金榜，2014年會計中級高分一次通過</p>
                        <a href=""></a>
                    </li>
                    <li>
                        <img src="images/senke_xy05.jpg" />
                        <dd>於同學</dd>
                        <p>2014年會計中級學員，1次性通過中級全科</p>
                        <a href=""></a>
                    </li>
 
                </ul>
            </div>
            <div class="but_left"><img src="images/qianxleft.png" /></div>
            <div class="but_right"><img src="images/qianxr.png" /></div>
          </div>
           
    </div>
</div>

 

js代碼：

//學員
var _index5=0;
$("#four_flash .but_right img").click(function(){
    _index5++;
    var len=$(".flashBg ul.mobile li").length;
    if(_index5+5>len){
        $("#four_flash .flashBg ul.mobile").stop().append($("ul.mobile").html());
    }
    $("#four_flash .flashBg ul.mobile").stop().animate({left:-_index5*326},1000);
    });
 
     
$("#four_flash .but_left img").click(function(){
    if(_index5==0){
        $("ul.mobile").prepend($("ul.mobile").html());
        $("ul.mobile").css("left","-1380px");
        _index5=6
    }
    _index5--;
    $("#four_flash .flashBg ul.mobile").stop().animate({left:-_index5*326},1000);
    });

 

完整項目源碼下載：

博客園附件滿了，需要的話，大家可以到我另一篇帖子下載。