как использовать интервал времени в JQuery с этим простым слайд-шоу - PullRequest
Новая
       19

как использовать интервал времени в JQuery с этим простым слайд-шоу

2 голосов
/ 18 декабря 2011

Я новичок и имею этот простой скрипт.Мой вопрос заключается в том, как установить временной интервал между затуханием mainImg и затуханием в Img(1,2,3), поскольку источник mainImg изменяется непосредственно при затухании: 

<head>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript">
    $(function(){
        $("#img1").click(function(){
            $("#mainImg").fadeOut("slow");

            $("#mainImg").attr("src","images/1.png");
            $("#mainImg").fadeIn("slow");
        });
        $("#img2").click(function(){
            $("#mainImg").fadeOut("slow");

            $("#mainImg").attr("src","images/2.png");
            $("#mainImg").fadeIn("slow");

        });
        $("#img3").click(function(){
            $("#mainImg").fadeOut("slow");

            $("#mainImg").attr("src","images/3.PNG");
            $("#mainImg").fadeIn("slow");
        });
    });

</script>
<style type="text/css">
    #theImage{
        width:256px;
        height:256px;   
    }
    .thumb{
        width:100px;
        height:100px;
        cursor:pointer;
        margin-right:20px;
        margin-left:20px;   
    }
</style>
</head>


<body>
<div id="theImage"><img id="mainImg" src="images/1.png" width="256" height="256" /></div>
<img id="img1" src="images/1.png" class="thumb" /> <img id="img2" src="images/2.png" class="thumb" /> <img id="img3" src="images/3.PNG" class="thumb" />
</body>

Ответы [ 4 ]

2 голосов
/ 18 декабря 2011

Вы можете использовать одну функцию для всех кликов, как это; 

function changeImage(e) {
    e.preventDefault();
    var that = this;
    $("#mainImg").fadeOut("slow", function() {
        $(this).attr("src","images/" + that.id.replace('img', '') + ".png").fadeIn("slow");
    });
}

$(function(){
    $("#img1,#img2,#img3").click(changeImage);
});

Вот jsFiddle пример .Не обращайте внимания на CSS, мне пришлось изменить их для отображения.

1 голос
/ 18 декабря 2011

СМОТРИ ДЕМО ЗДЕСЬ

Я немного изменил ваш HTML: 

<div id="fadeGallery">    
  <div id="gallery">     
    <img src="img1.jpg" />
    <img src="img2.jpg" />
    <img src="img3.jpg" />   
  </div>
  <div id="nav"></div>
</div>

CSS, который я использовал для демонстрации: 

#fadeGallery{
    position:relative;
    background:#111;
    width:300px;
    height:250px;
    margin:0 auto;
}
#gallery{
    width:300px;
    position:relative;
    margin:10px auto;
    background:#000;
    height:168px;
    padding:7px 0;
}
#gallery img{
        position:absolute;
    top:7px;
}
#nav{
    position:absolute;
    height:27px;
    width:300px;
    bottom:12px;
    text-align:center;
}
img.thumb{
    position:relative;
    width:48px;
    margin:2px;
    cursor:pointer;
}
img.active{
    border:2px solid #fff;
    margin:0px;
}

... и самое интересное: 

//#### GALLERY SETUP #########
var fade = 400;
var delay = 2500;
//############################

var timeOut, i = 0, isStopped = false, img = $('#gallery img'), imgN = img.length;

img.clone().appendTo('#nav');
$('#nav img').addClass('thumb').eq(0).addClass('active');
$('#gallery img:gt(0)').hide();

function auto() {    
    if (imgN>1){         // if there's more that one
        if(isStopped){return;}
        clearTimeout(timeOut);    
        timeOut = setTimeout(function() {    
            i = ++i % imgN;        
            img.fadeOut(fade).eq(i).fadeIn(fade,function(){  auto();  });
            $('#nav img').eq(i).addClass('active').siblings('img').removeClass('active');            
        },delay);        
    }
}
auto();

$('#nav img.thumb').click(function(){
    var ind = $(this).prevAll().length;
    i = ind;
    $(this).addClass('active').siblings().removeClass('active');
    img.fadeOut(fade);
    img.eq(ind).fadeIn(fade);
});

$('#gallery').parent().bind('mouseenter mouseleave', function(ev) {    
    ev.type === 'mouseenter' ? ( isStopped=true, clearTimeout(timeOut) ) : ( isStopped=false, auto() );
});

У вас есть затухание, которое вы хотели, и, возможно, вам понадобится «остановить» при наведении.

Если у вас есть вопросы, я с удовольствием объясню часть кода, который я использовал.

Тем временем вы можете 'Google' для:

  • jQuery .clone () / .appendTo ()
  • jQuery .hide () / .fadeIn () / .fadeOut ()
  • jQuery .addClass () / .removeClass ()
  • jQuery .siblings () / .prevAll () /
  • jQuery .bind ()
  • JS троичные операторы
  • setTimeout / clearTimeout с использованием jQuery
  • по модулю (%)
1 голос
/ 18 декабря 2011

Это должно работать: 

$(function(){
    var $mainimg = $("#mainImg");
    $("#img1").click(function(){
        $mainimg.fadeOut("slow", function(){
            $mainimg.attr("src","images/1.png").fadeIn("slow");
        });
    });
    $("#img2").click(function(){
        $mainimg.fadeOut("slow", function(){
            $mainimg.attr("src","images/2.png").fadeIn("slow");
        });
    });
    $("#img3").click(function(){
        $mainimg.fadeOut("slow", function(){
            $mainimg.attr("src","images/3.png").fadeIn("slow");
        });
    });
});

ОБНОВЛЕНИЕ 

<div id="theImage">
    <img id="mainImg" src="http://www.gravatar.com/avatar/d4c62c50b5b95f47b3e9a2f869041bef?s=128&d=identicon&r=PG" width="128" height="128" />
</div>
<div>
    <img id="img1" class="thumb" src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG" /><br/>
    <img id="img2" class="thumb" src="http://www.gravatar.com/avatar/fa50b9d4edc3e059366ac40ce5069e5d?s=128&d=identicon&r=PG" /><br/>
    <img id="img3" class="thumb" src="http://www.gravatar.com/avatar/b3317d19d2ed0d04fa8d1c2460963dc9?s=128&d=identicon&r=PG" /><br/>
</div>

$(function(){
    var $mainimg = $("#mainImg");
    $("#img1, #img2, #img3").click(function(){
        var src = this.src;
        $mainimg.fadeOut("slow", function(){
            $mainimg.attr("src",src).fadeIn("slow");
        });
    });
});

http://jsfiddle.net/WN45P/1/

РЕДАКТИРОВАТЬ

Небольшое редактирование, чтобы заблокировать изменение изображения уже загруженного изображения: 

$(function(){
    var $mainimg = $("#mainImg");
    $("#img1, #img2, #img3").click(function(){
        if ($mainimg[0].src == this.src) return;
        var src = this.src;
        $mainimg.fadeOut("slow", function(){
            $mainimg.attr("src",src).fadeIn("slow");
        });
    });
});

http://jsfiddle.net/WN45P/2/

0 голосов
/ 15 января 2017 
var Slider = new function () {
    var that = this;
    var Recursion = function (n) {
        setTimeout(function () {
            console.log(n);
            $('#sub_div img').attr('src', '/Images/' + n + '.JPG').addClass('current'); // n like 1.JPG,2.JPG .... stored images into Images folder.
            if (n != 0)
                Recursion(n - 1);
            else
                Recursion(5);
        }, 3000);
    };
    var d = Recursion(5);
};
...