以下是 jQuery左右滑动切换特效特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery左右滑动切换特效</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<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>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
//学员
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);
});
</script>
</body>
</html>
CSS代码(style.css):
@charset "utf-8";/**基本格式开始***************/
*{word-break:break-all;}
body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,textarea,p{margin:0 auto;padding:0px;font-size:12px;font-family:微软雅黑;width:100%;}
ul{list-style:none;}
img,a img{border:none;}
a{text-decoration:none;}
a{color:#000;}
a:hover{text-decoration:none;}
/**基本格式结束***************/
/*森科单页头部开始*/
.bodyCon08{background:url(../images/dy_pic11.jpg);}
.bodyCon08 .students{margin:0 auto;width:1100px;height:480px;position:relative;}
.bodyCon08 .students p.PP{width:510px;height:50px;font-size:16px;color:#333;text-align:center;position:absolute;top:60px;left:300px;}
#four_flash{position:relative;width:1100px;height:400px;margin:0 auto;position:absolute;bottom:40px;}
#four_flash .flashBg{width:998px;height:400px;margin:0 auto;position:relative;overflow:hidden;}
#four_flash .flashBg ul.mobile{width:2000%;height:400px;position:absolute;top:15;left:0;}
#four_flash .flashBg ul.mobile li{border:10px solid #2E324B;float:left;width:280px;height:340px;margin-left:26px;padding-top:40px;color:#6C6E85;}
#four_flash .flashBg ul.mobile li:hover{border:10px solid #343851;color:#fff;}
#four_flash .flashBg ul.mobile li img{width:140px;height:140px;display:block;margin:0 auto;border:10px solid #343851;border-radius:82px;}
#four_flash .flashBg ul.mobile li dd{font-size:20px;width:250px;line-height:60px;text-align:center;border-bottom:1px solid #6C6E85;}
#four_flash .flashBg ul.mobile li p{font-size:16px;text-align:center;width:250px;line-height:24px;margin-top:10px;}
#four_flash .flashBg ul.mobile li a{display:block;background:url(../images/jiantou.png);width:31px;height:31px;border:0px;margin:8px auto;}
#four_flash .flashBg ul.mobile li a:hover{background:url(../images/jiantou2.png);}
#four_flash .but_left{width:50px;height:100px;position:absolute;top:136px;left:0px;}
#four_flash .but_right{width:50px;height:100px;position:absolute;top:136px;right:0px;}
#four_flash .but_left:hover{background:url(../images/qianxleft1.png) no-repeat;}
#four_flash .but_right:hover{background:url(../images/qianxr1.png) no-repeat;}
分享到QQ
分享到微博
微信扫一扫
