星空网 > 软件开发 > Java

基于jQuery左右滑动切换特效

分享一款基于脚jQuery左右滑动切换特效。这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效。效果图如下:

基于jQuery左右滑动切换特效

在线预览    源码下载

实现的代码。

html代码:

<div class="bodyCon08"><!--学员-->  <div class="students">         <div id="four_flash">      <div class="flashBg">        <ul class="mobile">          <li>            <img src='/images/loading.gif' data-original="images/senke_xy00.jpg" />            <dd>高同学</dd>            <p>2013年CPA暑期班学员,一年通过5门课程</p>            <a href=""></a>          </li>          <li>            <img src='/images/loading.gif' data-original="images/senke_xy01.jpg" />            <dd>李同学</dd>            <p>2014年CPA周末旗舰班学员;1年通过4门课程</p>            <a href=""></a>          </li>          <li>            <img src='/images/loading.gif' data-original="images/senke_xy02.jpg" />            <dd>丁同学</dd>            <p>现就职某会计师师事务所<br/>2012年CPA学员,3年通过6门课程</p>            <a href=""></a>          </li>          <li>            <img src='/images/loading.gif' data-original="images/senke_xy03.jpg" />            <dd>宋同学</dd>            <p>2013年会计证、CPA长线周末班学员,2014年通过4门课程;</p>            <a href=""></a>          </li>          <li>            <img src='/images/loading.gif' data-original="images/senke_xy04.jpg" />            <dd>战同学</dd>            <p>2012年北京会计初级金榜,2014年会计中级高分一次通过</p>            <a href=""></a>          </li>          <li>            <img src='/images/loading.gif' data-original="images/senke_xy05.jpg" />            <dd>于同学</dd>            <p>2014年会计中级学员,1次性通过中级全科</p>            <a href=""></a>          </li>        </ul>      </div>      <div class="but_left"><img src='/images/loading.gif' data-original="images/qianxleft.png" /></div>      <div class="but_right"><img src='/images/loading.gif' data-original="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左右滑动切换特效

关键词:jquery

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

五分钟读懂欧盟ERP注册&检测流程详解:https://www.kjdsnews.com/a/1307675.html
SDS安全数据表中重金属污染对人体的危害,危险特性分类鉴定:https://www.kjdsnews.com/a/1307676.html
海外网红营销四大坑,你踩雷了吗?:https://www.kjdsnews.com/a/1307677.html
商标资源即将面临枯竭,想用商标应该怎么办?:https://www.kjdsnews.com/a/1307678.html
个人跨境汇款--国内转账到香港转账费用对比:https://www.kjdsnews.com/a/1307679.html
订单量不多,是因为没看到这篇文章!:https://www.kjdsnews.com/a/1307680.html
长治婚庆女司仪和主持人:https://www.vstour.cn/a/366176.html
北京丰台区水上乐园哪家好玩?:https://www.vstour.cn/a/366177.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流