码迷,mamicode.com
首页 > Web开发 > 详细

基于jQuery左右滑动切换特效

时间:2015-07-17 09:31:37      阅读:113      评论:0      收藏:0      [点我收藏+]

标签:

分享一款基于脚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);
    });

via:http://www.w2bc.com/article/49525

基于jQuery左右滑动切换特效

标签:

原文地址:http://www.cnblogs.com/liaohuolin/p/4653440.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!