多张图片的左右切换特效,实现循环切换
2017-11-13 22:26
435 查看
一个页面同时要显示多个图片,并且需要实现这多个图片的循环切换。
贴代码:
css文件:
接下来主要解释一下js里面的左右切换函数
主要是appendTo和prependTo的妙用。
贴代码:
<!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>jQ左右滑动切换特效</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"> $("#four_flash .but_right img").click(function(){ $self = $('.mobile'); $self.stop().animate({"margin-left" : -326 +"px"},800 , function(){ $self.css({"margin-left":"0px"}).find("li:first").appendTo($self); }); }); $("#four_flash .but_left img").click(function(){ $self = $('.mobile'); $self.css({"margin-left" : -326 +"px"}).find("li:last").prependTo($self); $self.stop().animate({"margin-left" : "0px"},800 , function(){}); }); </script> </div> </body> </html>
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:200%;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;}
接下来主要解释一下js里面的左右切换函数
$("#four_flash .but_right img").click(function(){//右切换 $self = $('.mobile');//选取ul对象 $self.stop().animate({"margin-left" : -326 +"px"},800 , function(){ //326是一个li元素的width,先将ul整体向左移出一个li $self.css({"margin-left":"0px"}).find("li:first").appendTo($self); //将移出的那个li**剪切**到ul的末尾,然后将ul的margin-left设为0。 }); }); $("#four_flash .but_left img").click(function(){//左切换 $self = $('.mobile'); $self.css({"margin-left" : -326 +"px"}).find("li:last").prependTo($self); //将ul的最后一个li剪切到ul的第一个li,然后将其margin-left设为-326。 $self.stop().animate({"margin-left" : "0px"},800 , function(){});//显示 });
主要是appendTo和prependTo的妙用。
相关文章推荐
- 图片左右循环切换功能的实现
- Ajax无刷新实现图片切换特效(AjaxPro)
- Android使用ViewPager实现图片轮播(高度自适应,左右循环,自动轮播)
- jquery实现图片左右切换的方法
- 利用AnimationDrawable实现控件的背景图片循环切换
- 多尺寸图片左右切换功能前端实现
- Android 使用ViewPager实现左右循环滑动图片
- [置顶] 多图片左右切换功能前端实现
- 使用ViewPager实现左右循环滑动图片
- Android ViewPager实现图片循环切换
- jquery制作banner图片左右上下切换滚动特效
- jquery焦点图片左右滑动切换特效代码
- 使用JavaScript实现点击循环切换图片效果
- Ajax无刷新实现图片切换特效
- Ajax无刷新实现图片切换特效
- javascript(小试牛刀)实现图片循环切换功能
- Ajax无刷新实现图片切换特效
- 通过ViewPager控件实现多张图片动态切换
- jQuery实现图片与文字描述左右滑动自动切换的方法
- JQuery实现简单的图片滑动切换特效