Question

我在a tutorial from 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>

我还想知道如何消除淡入淡出图像之间的差距，以便在转换过程中看不到背景。这将使滑块更流畅。

请参阅demo in JS Fiddle。

Answer 1

修改代码以调整图像不透明度，将所有图像绝对定位到公共位置，因此现在可以对两个图像之间的过渡进行动画处理。还添加了简单的下一个和上一个控件。

的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>

DEMO

Answer 2

我总是使用纯js，而不是jQuery;但我向你解释，你需要做什么（希望这有帮助）

就像你自己那样，你应该在你的代码中为图像名称或它们的id添加一个变量。现在你应该创建一个代码来改变id的数量，当用户点击一个元素时！这个元素是什么？完全是下一个或上一个按钮！像这样：

nextButton.onclick=function(){

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

}

这是一个简单的例子;你可以按自己的方式去做。祝你好运......

Answer 3

看到这个 http://jsfiddle.net/rKzxk/19/

<body onload="slider()">
    <div class="slider">
        <img id="1" src="http://top-frog.com/stuff/slider/images/slider-test-image-1.gif" border="0" alt="">
        <img id="2" src="http://top-frog.com/stuff/slider/images/slider-test-image-2.gif" border="0" alt="">
        <img id="3" src="http://top-frog.com/stuff/slider/images/slider-test-image-3.gif" border="0" alt="">
    </div>
    <input type=button id="prev" value="Prev">
    <input type=button id="next" value="Next">
</body>

脚本

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

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


     myTimer = setInterval(slide, 6500);

     function slide() {
         slideActual();
         if (count == sc) {
             count = 1;
         } else {
             count = count + 1;
         }
     }

     function slideActual() {
         $('#' + count).fadeIn(100);
         $('#' + count).delay(5500).fadeOut(100);

     }
     $("#next").click(function () {

         clearInterval(myTimer);
         if(count==1){
            $('#' + sc).fadeOut(100);
         }else{
                $('#' + count-1).fadeOut(100);
         }
         slideActual();
         if (count == sc) {
             count = 1;
         } else {
             count = count + 1;
         }
         myTimer = setInterval(slide, 6500);
     });
     $("#prev").click(function () {
           if(count==1){
            $('#' + sc).fadeOut(100);
         }else{
                $('#' + count-1).fadeOut(100);
         }

         if (count == 1) {
             count = sc-1;
         } else if (count == 2) {
             count = sc;
         } else {
             count = count - 2;
         }
         clearInterval(myTimer);

         slideActual();
         if (count == sc) {
             count = 1;
         } else {
             count = count + 1;
         }
         myTimer = setInterval(slide, 6500);
     });
 }

CSS

.slider {
    position: relative;
    width:80%;
    height:350px;
    overflow: hidden;
    margin: 30px auto;
}
.slider img {
    width: 100%;
    height: inherit;
    display: none;
}

如何在我的jQuery滑块上添加prev和next按钮？

3 个答案: