多张图片的左右切换特效,实现循环切换

一个页面同时要显示多个图片,并且需要实现这多个图片的循环切换。
贴代码:


<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的妙用。

你可能感兴趣的:(前端开发日记)