幻灯片动画

来源：互联网发布：文字ocr识别软件编辑：程序博客网时间：2024/06/06 03:25

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");        });}

现在没经验，写的比较简陋，先记录一下，以后应该可以封装的好一点。
效果图（大小屏响应式的切换要刷新一下）
这里写图片描述

阅读全文

0 0