1

TheHelpingDevelop のチュートリアルに従って、基本的な jQuery スライダーを作成しました。スライダーを柔軟な幅に変更し、画像をスライドではなくフェードさせました。

スライダーに前と次のボタンを組み込む方法を知りたいです。

<!DOCTYPE html>
<html>
  <head>
  <title>Slider</title>
  <script type="text/javascript" src="js/jquery.js"></script>

  <style type="text/css">
    .slider{
        position: relative;
        width:80%;
        height:350px;
        overflow: hidden;
        margin: 30px auto;
    }

    .slider img{
        width: 100%;
        height: inherit;
        display: none;
    }
  </style>
</head>
<body onload="slider()">
   <div class="slider">
       <img id="1" src="img/image1.png" border="0" alt="">
       <img id="2" src="img/image2.png" border="0" alt="">
       <img id="3" src="img/image3.png" border="0" alt="">
   </div>


<script type="text/javascript">

    function slider() {
        $('.slider #1').fadeIn();
        $('.slider #1').delay(5500).fadeOut();

        var sc = $('#.slider img').size();
        var count = 2;
        var slider = $('.slider')

        setInterval(function (){
            $('.slider #'+count).fadeIn(500);
            $('.slider #'+count).delay(5500).fadeOut();

                if(count == sc){
                    count = 1;
                }else{
                    count = count + 1;
                }
            },6500);

        }

</script>
</body>
</html>

また、移行中に背景が見えないように、フェージング画像間のギャップを削除する方法も知りたいです。これにより、スライダーがより滑らかになります。

JS Fiddle のデモを参照してください。

4

3 に答える 3

2

画像の不透明度を調整するようにコードを変更し、すべての画像を絶対的に共通の場所に配置したため、2 つの画像間の遷移をアニメーション化できるようになりました。シンプルな次と前のコントロールも追加されました。

JavaScript:

function slider() {

    function animate_slider(){
        $('.slider #'+shown).animate({
            opacity:0 // fade out
        },1000);
        $('.slider #'+next_slide).animate({
            opacity:1.0 // fade in
        },1000);
        shown = next_slide;
    }

    function choose_next() {
        next_slide = (shown == sc)? 1:shown+1;
        animate_slider();
    }

    $('.slider #1').css({opacity:1}); //show 1st image
    var shown = 1;
    var next_slide;
    var sc = $('.slider img').length; // total images
    var iv = setInterval(choose_next,3500);
    $('.slider_nav').hover(function(){
        clearInterval(iv); // stop animation
    }, function() {
        iv = setInterval(choose_next,3500); // resume animation
    });
    $('.slider_nav span').click(function(e){
        var n = e.target.getAttribute('name');
        if (n=='prev') {
            next_slide = (shown == 1)? sc:shown-1;
        } else if(n=='next') {
            next_slide = (shown == sc)? 1:shown+1;
        } else {
            return;
        }
        animate_slider();
    });
}

window.onload = slider;

追加の HTML:

<div class="slider_nav">
    <span name="prev"> previous </span> /
    <span name="next"> next image </span>
</div>

デモ

于 2013-05-08T13:03:03.340 に答える
0

jQuery ではなく、常に純粋な js を使用します。しかし、私はあなたに何をする必要があるかを説明します（これが役立つことを願っています）

自分でそうするように、コードに画像名またはその ID 用の変数を配置する必要があります。ユーザーが要素をクリックしたときに id の数を変更するコードを作成する必要があります。その要素は何ですか？正確に次または前のボタン! このような ：

nextButton.onclick=function(){

$('.slider #'+count).fadeOut();
count=count+1
$('.slider #'+count).fadeIn(slow);

}

これは簡単な例です。あなたは自分のやり方でそれを行うことができます。幸運を ...

于 2013-05-08T10:33:30.967 に答える