Question

<div id="Slider-First Slider-Common">

    <div class="Slider-Item Slider-First">
        <img src="img/pet1.jpg"/>
    </div>
    <div class="Slider-Item Slider-Second">
        <img src="img/pet2.jpg"/>
    </div>

</div>

<div class="Bottom-Button">

<a href="">Click</a>

</div>

这里我喜欢上面... onclik滑块 - 首先应该打开，然后如果我点击该页面滑块 - 第二应该打开如何...我需要jquery解决方案。每页只有一个滑块项

Answer 1

试试这个：

$(document).ready(function() {
    $('[id="Slider-First Slider-Common"]').hide();

    $(".Bottom-Button a").click(function() {
        $('[id="Slider-First Slider-Common"]').show(); 
        return false;
    });
});

P.S。你不应该在元素id中使用空格。

编辑再次阅读您的问题，需要做出一些修改。

$('.Slider-Item').hide();


$('.Bottom-Button a').on('click',function(){
    $(this).hide();
    $('.Slider-First').show();
    return false;
});

$('.Slider-First').on('click',function(){
    $('.Slider-First').hide();
    $('.Slider-Second').show();
    return false;
});

进一步编辑

$('.Slider-Item').hide();


$('.Bottom-Button a').on('click',function(){
    $(this).hide();
    $('.Slider-First').show();
    return false;
});

$('.Slider-Item').on('click',function(){
    if ($(this).next().length > 0) {
        $(this).hide();
        $(this).next().show();
    }

    return false;
});

小提琴：http://jsfiddle.net/9p9sg/

Answer 2

根据我的理解，JQ应该适合你......我想你想在点击时显示图像......对吗？

你可以尝试这个：

$('.Slider-Item').on('click',function(){
 $('.Slider-Item:visible').slideUp(200);
 $(this).slideDown(200);
});

如果你还想要其他任何评论......

Answer 3

你可以这样做

HTML

<div id="Slider-First Slider-Common">

    <div class="Slider-Item Slider-First">
        <img src="img/pet1.jpg"/>
    </div>
    <div class="Slider-Item Slider-Second">
        <img src="img/pet2.jpg"/>
    </div>

</div>

<div class="Bottom-Button">

<a href="#" class="click_me">Click</a>

</div>

Jquery Part

$(document).ready(function(){
 $(".Slider-Item Slider-First").hide();
 $(".Slider-Item Slider-Second").hide();
 $(".click_me").click(function(){
  $(".Slider-Item Slider-First").show(); 
 });
 $(".Slider-Item Slider-First").click(function(){
  $(".Slider-Item Slider-Second").show(); 
 });
});

希望这有帮助

Answer 4

以下是参考资料，您可以随意更新此代码，只需将这些文字替换为<img src="...."/>。

<强>的CSS：

#slider{list-style-type:none}
.slider-item{display:none;}
.slider-show{display:block;}

<强> HTML：

<ul id="slider">
    <li class="slider-item">a</li>
    <li class="slider-item">b</li>
    <li class="slider-item">c</li>
    <li class="slider-item">d</li>
    <li class="slider-item slider-show">e</li>
</ul>
<a href="">Click</a>

<强> jquery的：

$('a').click(function(){
    var indexLength = $('.slider-item').length-1;
    var currentIndex = $('.slider-item:visible').index();
    var log = $('#log');
    $('.slider-item:visible').hide();    
    if(currentIndex<indexLength){         
         currentIndex = currentIndex + 1;
    }
    else{
        currentIndex = currentIndex - indexLength;        
    }
    log.append(currentIndex);
    $('.slider-item:eq('+currentIndex+')').show();
    return false;
});

我为你创造了一个小提琴，click here。

Answer 5

<ul id="slider">
<li class="slider-item">a</li>
<li class="slider-item">b</li>
<li class="slider-item">c</li>
<li class="slider-item">d</li>
<li class="slider-item slider-show">e</li>

单击

上面的代码是我的flexslider.Slider工作得很好但是对于这个滑块我需要制作底部控件以跳过特定的滑块，如波纹管（滑块寻呼机）

<ul><li>1</li><li>2</li><li>3</li></ul>

Jquery打开div onclick底部按钮

5 个答案: