jQuery（二）图片轮播与放大显示

最新推荐文章于 2024-09-25 11:25:05 发布

We_jia

最新推荐文章于 2024-09-25 11:25:05 发布

阅读量2.1k

点赞数

分类专栏： jQuery 文章标签：图片轮播 jQuery

本文链接：https://blog.csdn.net/We_jia/article/details/87968564

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

效果图如下

思路分析

1.图片轮播，将第一个图片向左移动80px(一个图片的宽度)，完成动画以后的回调函数，改变图片的marginLeft值，追加到最后一张图片后，使用计时器依次循环播放图片。

 //图片轮播
            $(".menulist li").first().animate({
                marginLeft: -80  //左移一个图片
            }, 600, function () {  //动画完成后执行的函数
                $(this).css({
                    marginLeft: 5,
                    marginRight: 5
                });
                $(this).appendTo($(this).parent());
            });

2.计时器和滑动图片轮播一样，使用window.requestAnimationFrame（）

3.突出显示，复制要显示的图片，图片效果淡入淡出，改变透明度，设置图片的样式

  $(".ceng").find("img").fadeOut(300, function () {
                $(".ceng").html("");
                $(".menulist li").eq(4).children("img").clone().css({
                    width: 100,
                    height: 100,
                    opacity: 0
                }).appendTo($(".ceng")).fadeTo(300, 1);
            });

4.放大图片显示与突出显示效果一样

全部代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .block {
            position: relative;
            width: 400px;
            height: 500px;
            border: 1px solid silver;
            margin: 0 auto;
            /*overflow: hidden;*/
        }

        .smallimage {
            position: absolute;
            bottom: 10px;
            width: 400px;
            height: 80px;
        }

        .smallimage ul {
            width: 630px;
            height: 80px;
            margin-left: -115px;
            border: 1px solid silver;
        }

        .smallimage li {
            float: left;
            list-style: none;
            width: 80px;
            height: 80px;
            box-shadow: 0 0 4px black;
            margin: 0 5px;
        }

        .smallimage img {
            width: 80px;
            height: 80px;
        }

        .ceng {
            position: absolute;
            bottom: -10px;
            left: 150px;
            width: 100px;
            height: 100px;
            box-shadow: 0 0 10px black;
        }

        .ceng > img {
            width: 100%;
            height: 100%;
        }

        .big {
            position: relative;
            top: 0;
            z-index: -1;
            width: 400px;
            height: 400px;
        }

        .big img {
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body>
<div class="block">
    <div class="big">
        <img src="./imagelist/u=3164647831,181715073&fm=26&gp=0.jpg" alt=""/>
    </div>
    <div class="smallimage">

        <div class="ceng">
            <img src="./imagelist/u=3164647831,181715073&fm=26&gp=0.jpg" alt=""/>
        </div>
        <ul class="menulist">
            <li><img src="./imagelist/u=1058809690,3023062520&fm=26&gp=0.jpg" alt=""/></li>
            <li><img src="./imagelist/u=2522222810,3587513282&fm=26&gp=0.jpg" alt=""/></li>
            <li><img src="./imagelist/u=2928408181,1036252221&fm=26&gp=0.jpg" alt=""/></li>
            <li><img src="./imagelist/u=3164647831,181715073&fm=26&gp=0.jpg" alt=""/></li>
            <li><img src="./imagelist/u=3605060486,3887107607&fm=26&gp=0.jpg" alt=""/></li>
            <li><img src="./imagelist/u=3743442356,4212005056&fm=26&gp=0.jpg" alt=""/></li>
            <li><img src="./imagelist/u=1500120011,2779240891&fm=26&gp=0.jpg" alt=""/></li>
        </ul>
    </div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    var time = new Date();
    var oldTime = time.getTime();
    var newTime = null;
    loop();
    function loop() {
        window.requestAnimationFrame(loop);
        //用本地时间计算2秒
        var newtimes = new Date().getTime();
        newTime = newtimes;
        if (newTime - oldTime >= 2000) { //2s动一次
            oldTime = newTime;
            $(".big").find("img").fadeOut(300, function () {
                $(".big").html("");
                $(".menulist li").eq(4).children("img").clone().css({
                    width: 400,
                    height: 400,
                    opacity: 0
                }).appendTo($(".big")).fadeTo(300, 1);   //fadeTo() 方法将被选元素的不透明度逐渐地改变为指定的值。
            })
            $(".ceng").find("img").fadeOut(300, function () {
                $(".ceng").html("");
                $(".menulist li").eq(4).children("img").clone().css({
                    width: 100,
                    height: 100,
                    opacity: 0
                }).appendTo($(".ceng")).fadeTo(300, 1);
            });
          //图片轮播
            $(".menulist li").first().animate({
                marginLeft: -80  //左移一个图片
            }, 600, function () {  //动画完成后执行的函数
                $(this).css({
                    marginLeft: 5,
                    marginRight: 5
                });
                $(this).appendTo($(this).parent());
            });
        }

    }
</script>
</body>
</html>