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

最新推荐文章于 2023-08-02 17:02:02 发布

jiang_mingyi

最新推荐文章于 2023-08-02 17:02:02 发布

阅读量8.9k

点赞数 1

分类专栏：前端开发日记文章标签：左右滑动来前进后退的效果

本文链接：https://blog.csdn.net/jiang_mingyi/article/details/78525572

版权

前端开发日记专栏收录该内容

29 篇文章 0 订阅

订阅专栏

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

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

jiang_mingyi

关注

1
点赞
踩
19

收藏

觉得还不错? 一键收藏
1
评论
多张图片的左右切换特效，实现循环切换

一个页面同时要显示多个图片，并且需要实现这多个图片的循环切换。贴代码：<!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"
复制链接

扫一扫