幻灯片动画

最新推荐文章于 2025-01-24 16:48:15 发布

原创最新推荐文章于 2025-01-24 16:48:15 发布 · 286 阅读

0 ·

CC 4.0 BY-SA版权

小项目专栏收录该内容

2 篇文章

订阅专栏

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=4, minimum-scale=1, user-scalable=no" />
</head>
<body>
    <div class="wrap">
        <div class="inner" id="inner" >
            <div class="pic-wrap" style="left:0">
            <img src="" alt=""></div><div class="pic-wrap" style="">
            <img src="" alt=""></div><div class="pic-wrap" style="">
            <img src="" alt=""></div><div class="pic-wrap" style="">
            <img src="" alt=""></div>
        </div>
        <span class="left direction" id="left">&lt;</span>
        <span class="right direction" id="right">&gt;</span>
    </div>
    <div class="control-wrap">
        <span class="control control-selected" data-id="0"><img src="" alt=""></span>
        <span class="control" data-id="1"><img src="" alt=""></span>
        <span class="control" data-id="2"><img src="" alt=""></span>
        <span class="control" data-id="3"><img src="" alt=""></span>
    </div>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="pictureplay.js"></script>
    <script>

       var picSrc=["https://s3.amazonaws.com/reolink-storage/website/uploads/2016/09/c1-5.jpg","https://s3.amazonaws.com/reolink-storage/website/uploads/2016/09/c1-2-1.jpg","https://s3.amazonaws.com/reolink-storage/website/uploads/2016/09/c1-3-1.jpg","https://s3.amazonaws.com/reolink-storage/website/uploads/2016/09/c1-4-1.jpg"];
       var controlSrc=["https://s3.amazonaws.com/reolink-storage/website/uploads/2016/09/c1-5-130x130.jpg","https://s3.amazonaws.com/reolink-storage/website/uploads/2016/09/c1-2-1-130x130.jpg","https://s3.amazonaws.com/reolink-storage/website/uploads/2016/09/c1-3-1-130x130.jpg","https://s3.amazonaws.com/reolink-storage/website/uploads/2016/09/c1-4-1-130x130.jpg"];
        $(function(){
            if($(window).width()>=600){
                picturePlay(4,"450","1000",picSrc,controlSrc);
            }else{
                picturePlay(4,"300","1000",picSrc,controlSrc);
            }

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

style.css

.wrap{
    height: 450px;
    width:450px;
    overflow: hidden;
    position: relative;
    /* background: #ccc; */
    left:0;
    display: inline-block;
}
.wrap:hover .direction{
    display: inline-block;
}
.control-wrap{
    display: inline-block;
}
.inner{
    height: 450px;
    width:1800px;
    position: absolute;
    overflow: hidden;
    left: 0;
}
.pic-wrap{
    width:450px;
    height: 450px;
    display: inline-block;
    /* background: #ccc */
}
.control ,.direction{
    display: inline-block;
    width:100px;
    cursor: pointer;
}
.pic-wrap img{
    max-width: 450px;
}
.direction{
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    font-size: 30px;
    color:#111;
    padding: 0;
    display: none;
}
.right{
    right:0;
    text-align: right;
}

@keyframes pictureOpacity{
    from {opacity: 0.5;}
    to{opacity:1;}
}

@-moz-keyframes pictureOpacity{
    from {opacity: 0.5;}
    to{opacity:1;}
}
@-webkit-keyframes pictureOpacity{
    from {opacity: 0.5;}
    to{opacity:1;}
}
@-o-keyframes pictureOpacity{
    from {opacity: 0.5;}
    to{opacity:1;}
}
.control{
    position: relative;
    height: 100px;
    border:1px solid white;
    display: block;
}
.control:hover,.control-selected{
    border:1px solid #ccc;
}
.control img{
    opacity:0.5;
    position: absolute;
    max-width: 100px;
    left: 50%;
    transform: translateX(-50%);
}
.control img:hover {
 opacity: 1;

 animation:pictureOpacity 1s;
-moz-animation: pictureOpacity 1s;  Firefox
-webkit-animation: pictureOpacity 1s;   Safari 和 Chrome
-o-animation: pictureOpacity 1s 
}
.control-selected img{
 opacity: 1;
}

@media screen and (max-width: 600px){
    .wrap,.control-wrap{
        display: block;
        margin: 0 auto;
    }
    .wrap,.pic-wrap,.pic-wrap img{
        width: 300px;
        height: 300px;
    }
    .control{
        display: inline-block;
    }
    .inner{
        height:300px;
        width:1200px;
    }
    .control, .control img{
        width: 66px;
        height: 66px;
    }
    .control-wrap{
        width:300px;
    }

}

pictureplay.js

function picturePlay(n,distance,interval,picSrc,controlSrc){

    var pos = 0;
         var pic=$(".pic-wrap img");
       var control=$(".control img");
       for(var i=0;i<n;i++){
        pic.eq(i).attr("src",picSrc[i]);
        control.eq(i).attr("src",picSrc[i]);
       }
    for(var i=0;i<n;i++){
        $(".pic-wrap img").css("left",i*distance);
    }
        $(".control").click(function() {
            $("#inner").stop(true,true);
            $(this).addClass("control-selected");
            $(this).siblings().removeClass("control-selected");
            var id = $(this).data("id");
            if (id == pos) {
                return;
            } else if (id > pos) { //需要的图片在右边，-
                var m = ((id - pos) * distance) + "px";
                $("#inner").animate({
                    left: "-=" + m
                },
                interval);
            } else if (id < pos) {
                m = ((pos - id) * distance) + "px";
                $("#inner").animate({
                    left: "+=" + m
                },
                interval);
            }
            pos = id;
        })
        $("#left").click(function(){
            $("#inner").stop(true,true);
            if(pos==0){
                pos=n-1;
                $("#inner").animate({
                    left: distance+"px"
                },
                interval,function(){
                    $("#inner").css("left","-"+n*distance+"px");
                    $("#inner").animate({
                        left: "-" + (n-1)*distance + "px"
                    },
                    interval);  
                });

            }else{
              pos--;
                $("#inner").animate({
                    left: "+=" + distance + "px"
                },
                interval);             
            }

            $(".control").eq(pos).addClass("control-selected");
            $(".control").eq(pos).siblings().removeClass("control-selected");
        });
        $("#right").click(function(){
            $("#inner").stop(true,true);
            if(pos==(n-1)){
                pos=0;
                $("#inner").animate({
                    left:"-" + n * distance +"px"
                },
                interval,function(){
                    $("#inner").css("left",distance+"px");
                    $("#inner").animate({
                        left:"0px"
                    },interval);
                });
            }else{
               pos++;
               $("#inner").animate({
                left:"-=" + distance + "px"
               },interval);
            }
            $(".control").eq(pos).addClass("control-selected");
            $(".control").eq(pos).siblings().removeClass("control-selected");
        });

}