如何使交互式项目符号到我的jquery滑块

Question

我试图制作一个滑块与五个图片和下一个和上一个按钮（他们将被称为以后）。滑块自动工作，并且在悬停滑块时循环停止，因为它应该是。 我试图添加交互式子弹，它会响应其给定的图片。应始终突出显示一个点，这是与当前显示的图像对应的一个点。 但我不能得到这个工作。 任何人都可以帮忙吗？的jsfiddle link

HTML

<div id="quickslider"> 
<div class="quickslider"> 
    <img class="slide" id="1" src="Slider_images/gc_slide_1.png" alt="placeholder image"> 
    <img class="slide" id="2" src="Slider_images/gc_slide_2.png" alt="placeholder image"> 
    <img class="slide" id="3" src="Slider_images/gc_slide_3.png" alt="placeholder image"> 
    <img class="slide" id="4" src="Slider_images/gc_slide_4.png" alt="placeholder image"> 
    <img class="slide" id="5" src="Slider_images/gc_slide_5.png" alt="placeholder image"> 
</div><!--quickslider--> 

<nav class="slider-nav"> 
    <a href="#1" class="active">1</a> 
    <a href="#2" >2</a> 
    <a href="#3" >3</a> 
    <a href="#4" >4</a> 
    <a href="#5" >5</a> 
</nav> 

<div class="quickslider-nav"> 
    <a href="#" class="left"onclick="prev(); return false;">Prev</a> 
    <a href="#" class="right" onclick="next(); return false;">Next</a> 
</div> 
</div> 

CSS

#quickslider{ 
    width:350px; 
    margin:0 auto; 
    position: relative; 
    height: 380px; 
} 

.quickslider{ 
    position: relative; 
    float: left; 
    display: block; 
    width: 350px; 
    height:350px; 
} 

.quickslider img{ 
    display: none; 
    margin: 0; 
    padding: 0; 
    position: absolute; 
} 

#1 { 
    background-image: url(Slider_images/gc_slide_1.png); 
} 

# 2 { 
    background-image: url(Slider_images/gc_slide_2.png); 
} 

.slider-nav { 
    text-align: center; 
    margin: 10px 0 0 0; 
} 

.slider-nav a { 
    width: 10px; 
    height: 10px; 
    display: inline-block; 
    background: #ddd; 
    overflow: hidden; 
    text-indent: -9999px; 
    border-radius: 50%; 
} 

.slider-nav a.active { 
    background: #999; 
} 

JavaSript

sliderint= 1; 
sliderNext = 2; 

$(document).ready(function(){ 
    $('.quickslider>img#1').fadeIn(300); 
    startSlider(); 
}) 

function startSlider(){ 
    count=$(".quickslider>img").size(); 

    loop = setInterval(function(){ 
     if(sliderNext>count){ 
      sliderNext=1; 
      sliderint=1; 
     } 

     $('.quickslider>img').fadeOut(300); 
     $('.quickslider>img#'+sliderNext).fadeIn(300); 

     sliderint=sliderNext; 
     sliderNext=sliderNext + 1; 
    },5000) 
} 

function prev(){ 
    newSlide = sliderint-1; 
    showSlide(newSlide); 
} 

function next(){ 
    newSlide = sliderint+1; 
    showSlide(newSlide); 
} 

function stopLoop(){ 
    window.clearInterval(loop); 
} 

function showSlide(id){ 
    stopLoop(); 
    if(id>count){ 
     id=1; 
    } 
    else if(id<1){ 
     id=count; 
    } 

    $('.quickslider>img').fadeOut(300); 
    $('.quickslider>img#'+id).fadeIn(300); 

    sliderint=id; 
    sliderNext=id + 1; 
    startSlider(); 
} 

$(document).ready(function(){ 
    $(".quickslider > img").hover(
     function() 
     { 
      stopLoop(); 
     }, 
     function() { 
      startSlider(); 
     } 
    ); 
}); 

Answer 1

演示：http://jsfiddle.net/Lu2cqnjo/

所以，因为你只是问交互式子弹。我只专注于他们，并没有触及其他地方。

我在$（document）.ready（）内添加了一个onclick事件处理程序来检测用户点击的项目符号，并从那里调用showSlide（）。

$('body').on('click', ".slider-nav a", function(e){ 
    e.preventDefault(); 
    var href = $(e.target).attr("href"); 

    showSlide(href.substring(1, href.length)); 
    }); 

showSlide()因此成为每当你想改变幻灯片时调用的函数。因此，我已经更改了startSlider()中的代码，以利用showSlide()而不是当前的实现。

希望这有助于。

Answer 2

我已经在您的HTML输出中创建了新的jQuery代码库，因为您的旧代码看起来有点混乱。你可以修改下一个功能，以前的功能和项目符号功能来为你的显示设置动画效果，或者更好地使用纯CSS如变换，平移或过渡来设置它的动画效果，整个概念是在点击事件的基础上在子弹和图像上添加active类。我还修改了一下你的CSS代码

可以检查JSFiddle

(function($){ 

    $('.nav-thumbs li:first-of-type, .quickslider img:first-of-type').addClass('active'); 

    //Previous function 
    $('.quickslider-nav').on('click', '.left', function(e){ 
    e.preventDefault(); 
    showPrevious(); 
    }); 
    function showPrevious() { 
    if (!$('.nav-thumbs li:first-of-type').hasClass('active')) { 
     $('.active').removeClass('active').prev().addClass('active'); 
    } else { 
     $('.nav-thumbs li, .quickslider img').removeClass('active'); 
     $('.nav-thumbs li:last-of-type, .quickslider img:last-of-type').addClass('active'); 
    } 
    } 

    //Next function 
    $('.quickslider-nav').on('click', '.right', function(e){ 
    e.preventDefault(); 
    showNext(); 
    }); 
    function showNext() { 
    if (!$('.nav-thumbs li:last-of-type').hasClass('active')) { 
     $('.active').removeClass('active').next().addClass('active'); 
    } else { 
     $('.nav-thumbs li, .quickslider img').removeClass('active'); 
     $('.nav-thumbs li:first-of-type, .quickslider img:first-of-type').addClass('active'); 
    } 
    } 

    // Bullets 
    $('.nav-thumbs').on('click', 'li', function(){ 
    $('.nav-thumbs li, .quickslider img').removeClass('active'); 
    $(this).addClass('active'); 
     $('.quickslider img').removeClass('active').eq($(this).index()).addClass('active'); 
    return false; 
    }); 

    // Autoplay every 3 seconds 
    setInterval(function(){ 
     if(!$('#quickslider').is(':hover')) { 
      showNext(); 
     } 
    }, 3000); 
})(jQuery); 

忘记了CSS的重要组成部分

这个CSS代码需要显示的图像

.quickslider img.active { 
    display: block; 
}