为图像阵列中的过渡设置动画

Animating transitions from image array?

本文关键字：设置 动画 图像 阵列      更新时间：2023-09-26

当谈到jQuery时，我是一个新手，我正在摆弄一个从数组中加载图像并将结果发布到div的滑块。按照我的设置方式，它加载图像标记和图像源，并将其放置到一个空的div中。现在，我在jQuery中看到的与数组结合使用的任何动画都有了很大的不同格式。我应该提一下，我不是在寻找优雅的代码，而是在寻找有效的代码。

基本上，有可能将转换与我现在的做法结合起来吗？如果是，怎么做？没有什么花哨的，只是渐变或滑动效果。

jsFiddle迄今

 var imgArray = 
    ['<img src="http://placehold.it/400x300/cf5">',
    '<img src="http://placehold.it/400x300/555">', 
    '<img src="http://placehold.it/400x300/f0f">', 
    '<img src="http://placehold.it/400x300/05b">']
    counter = -1;
    $('#nextimage').click(function () {
    counter = (counter + 1) % imgArray.length; 
    console.log(imgArray[counter]); 
            document.getElementById("result1").innerHTML = (imgArray[counter]);
    });
    $('#previmage').click(function () {
    counter = (counter - 1); 
    console.log(imgArray[counter]); 
            document.getElementById("result1").innerHTML = (imgArray[counter]);
    });

html

  <div class="container">
    <div class="slider_wrapper">
      <div id="slider">
        <div class="img-wrap">
          <div id="result1"></div>
        </div>
      </div>
    </div>
  </div>
    <div id="footer">
        <a href="#" id="previmage"><img title="Previous Image" alt="prev image" src="https://dl.dropboxusercontent.com/u/65639888/image/prev.png"></a>
        <a href="#" id="nextimage"><img title="Next Image" alt="next image" src="https://dl.dropboxusercontent.com/u/65639888/image/next.png"></a>
    </div>

css

body {
    background-color:black;
}
.container{
    padding:5px;
    border:1px dashed black;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    background: black;  
}
.slider_wrapper{
    overflow:hidden;
    position:relative;
    max-width:100%;
    height:auto;
    top:auto;
    border-style: dashed;
    border-color: white;
}
#slider{
    position: relative;
    list-style: none;
    overflow: hidden;
    margin:0px;
    border-style: solid;
    border-color: green;
}
#slider img{
    width: 100%;
    height:auto;
    position: relative;
    float: left;
}
.nvgt{
    position:absolute;
    top: 0px;
    height: 100%;
    width: 50%;
    opacity: 0;
}
#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: BLACK;
    line-height: 2;
    text-align: center;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 0 1px 0 #84BAFF;
    box-shadow: 0 0 15px #FFFFFF;
    opacity: 0.1;
    padding:0;
    margin:0;
}
#footer img {
    padding-top:10px;
    padding-bottom: 5px;
    padding-right:20px;
    padding-left:20px;
    height: 30px;
}
#footer:hover {
    opacity: 1;
}
ul, menu, dir, html, body {
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0px;
    margin:0px;
}

诀窍是等待图像加载完成。

var imgArray = 
    ['<img src="http://placehold.it/400x300/cf5">',
    '<img src="http://placehold.it/400x300/555">', 
    '<img src="http://placehold.it/400x300/f0f">', 
    '<img src="http://placehold.it/400x300/05b">']
counter = -1;
function imgTransition() {
    $('#result1').fadeOut(300, function() {
        $('#result1').html(imgArray[counter]);
        $('#result1 > img').on('load', function() {
            $('#result1').fadeIn(500);
        });
    });
};
$('#nextimage').click(function () {
    counter = (counter + 1) % imgArray.length; 
    console.log(imgArray[counter]);
    imgTransition();
});
$('#previmage').click(function () {
    counter = (counter - 1); 
    console.log(imgArray[counter]); 
    imgTransition();
});

JSFiddle


请参阅jsfidd

var imgArray =
    ['<img src="http://placehold.it/400x300/cf5">',
    '<img src="http://placehold.it/400x300/555">',
    '<img src="http://placehold.it/400x300/f0f">',
    '<img src="http://placehold.it/400x300/05b">'],
    counter = -1;
var animate = false;  //stopping invalid click during animation
function animatable() {
    $('#result1').slideUp(300, function() {
        $('#result1').html(imgArray[counter]);
        $('#result1 > img').on('load', function() {
            //$('#result1').fadeIn(500);
            $( '#result1' ).animate({
              height: "toggle"
            }, 1000 , function(){
                animate = false;
            });
        });
    });
};
function next(){
    if(!animate){
        animate = true;
    counter = (counter + 1) % imgArray.length;
    console.log(counter);
      $("#result1").fadeIn().html(imgArray[counter]);
    animatable();
    }
};
next();
$('#nextimage').click(next);
$('#previmage').click(function () {
    if(!animate){
        animate = true;
      if(counter=='0'){
        counter= imgArray.length;
      }
    counter = (counter - 1); 
    console.log(imgArray[counter]); 
      $("#result1").html(imgArray[counter]);
    animatable();
    }
});

使用可设置动画的更新

上一个和下一个按钮在淡出效果下正常工作

var imgArray = ['<img src="http://placehold.it/400x300/cf5">',
            '<img src="http://placehold.it/400x300/555">',
            '<img src="http://placehold.it/400x300/f0f">',
            '<img src="http://placehold.it/400x300/05b">']
counter = -1;
function imgTransition() {
    $('#result1').fadeOut(300, function() {
        $('#result1').html(imgArray[counter]);
        $('#result1 > img').on('load', function() {
            $('#result1').fadeIn(500);
        });
    });
};
function next() {
    counter = (counter + 1) % imgArray.length;
    console.log(counter);
    imgTransition();
};
next();
$('#nextimage').click(next);
$('#previmage').click(function() {
    if (counter == '0') {
        counter = imgArray.length;
    }
    counter = (counter - 1);
    console.log(imgArray[counter]);
    imgTransition();
});

JSFIIDLE

相关文章：