jquery(图片轮播)

最新推荐文章于 2022-10-16 06:11:10 发布

smjor

最新推荐文章于 2022-10-16 06:11:10 发布

阅读量439

点赞数

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

本文链接：https://blog.csdn.net/u014150409/article/details/45050943

版权

jQuery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

jquery(图片轮播)

在可视范围我们只看到两张图片，在一起滑动；
既然只看到两张图片，那我们就可以只设定两个img标签；
两张图片一起移动时，当第一个img标签移过可视区域，改变它的位置（初始时第二张图片的位置），轮流循环；
要达到平滑的移动就要用到jquery中的animate动画效果，animate中（可选的 callback 参数是动画完成后所执行的函数名称。//比较重要，在这里改变图片的位置，改变图片的src
）

<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<head>
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .img_div{
            width:520px;
            height:280px;
            border:1px solid red;
            position: relative;
            overflow: hidden;
        }
        .img_div .img1{
            position: absolute;
            top:0;
            left:0;
        }
        .img_div .img2{
            position: absolute;
            top:0;
            left:520px;
        }
    </style>
    <script src="js/jquery-1.9.1.min.js"></script>

</head>
<body>
<div class="img_div">
    <img class="img1" src="img/1.jpg" />
    <img class="img2" src="img/2.png" />
</div>
<script>
    $(function(){
        setInterval(function(){
        //关键的一步，感官上是同时在执行；还有点不清楚，也在翻阅资料，不过没怎么找到，是不是同时在进行呢？
            move_image($(".img1"));
            move_image($(".img2"));
        },2000);
    });
    var index = 2;
    var ary = [
        "img/1.jpg",
        "img/2.png",
        "img/3.jpg",
        "img/4.jpg"
    ];//可以放多张图片

    function move_image(image_obj){
        if(parseInt(image_obj.css("left")) == 0){

            image_obj.animate({left:"-520px"},1000,function(){
                image_obj.css({left:"520px"});
                image_obj.attr("src",ary[index]);
                index++;
                if(index >= ary.length){
                    index = 0;
                }
            });

        }else{
            image_obj.animate({left:"0"},1000);
        }
    }
</script>
</body>
</html>

smjor

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery(图片轮播)

jquery(图片轮播)在可视范围我们只看到两张图片，在一起滑动；既然只看到两张图片，那我们就可以只设定两个img标签；两张图片一起移动时，当第一个img标签移过可视区域，改变它的位置（初始时第二张图片的位置），轮流循环；要达到平滑的移动就要用到jquery中的animate动画效果，animate中（可选的 callback 参数是动画完成后所执行的函数名称。//比较重要，在这里改变图片的
复制链接

扫一扫

专栏目录