如何創建一個使用4個圖像來導航而不是文本的JQuery內容滑塊？

Question

我有圖片上有數字。 這些數字是1-4。 我想以數字方式放置它們，當用戶點擊1時，我希望它們轉到幻燈片1，如果它們單擊2，則滑動2.這也需要具有滑動效果。

我在下面使用這個特定的javascript代碼左右選項，但我不確定我是否可以為我的目的重新使用它：

HTML將類似於：

<img src="#" class="image_one">
<img src="#" class="image_two">
<img src="#" class="image_three">
<img src="#" class="image_four">

<div class="content_for_image_One" id="slide1">
You see this when you click on image 1
</div>

<div class="content_for_image_two" id="slide2">
You see this when you click on image 2
</div>

<div class="content_for_image_three" id="slide3">
You see this when you click on image 3
</div>

<div class="content_for_image_four" id="slide4">
You see this when you click on image 4
</div>

<script type="text/javascript">
            $(document).ready(function () {

                var $sliderMask = $('#slider_mask');
                var $slideContainer = $('#slide_container');

                var $slides = $slideContainer.find('.slide');

                var slideCount = $slides.length;
                var slideWidth = $sliderMask.width();

                $slideContainer.width(slideCount * slideWidth);
                $slides.width(slideWidth);

                var currentSlide = 0;

                function animate() {
                    $slideContainer.stop().animate({ marginLeft: -(currentSlide * slideWidth) + 'px' }, 'slow');
                }

                $('#left_button').on('click', function () {
                    currentSlide = (currentSlide - 1 + slideCount) % slideCount;
                    animate();
                });

                $('#right_button').on('click', function () {
                    currentSlide = (currentSlide + 1) % slideCount;
                    animate();
                });

                $('#click_left').on('click', function () {
                    currentSlide = (currentSlide - 1 + slideCount) % slideCount;
                    animate();
                });

                $('#click_right').on('click', function () {
                    currentSlide = (currentSlide + 1) % slideCount;
                    animate();
                });


            });

</script>

Answer 1

您提供的html不適合您的代碼，但我們假設您擁有以下html：

<div id="slidesWrapper">

    <div id="slidesContainer">

        <div class="slide"><!-- your html --></div>
        <div class="slide"><!-- your html --></div>
        <div class="slide"><!-- your html --></div>
        <div class="slide"><!-- your html --></div>

    </div>

</div>

<div id="thumbnails">
    <img src="#" class="thumb" />
    <img src="#" class="thumb" />
    <img src="#" class="thumb" />
    <img src="#" class="thumb" />
</div>

使用以下css：

#slidesWrapper {
    width: 1000px;
    height: 400px;
    overflow: hidden;
    position: relative;
}

#slidesContainer {
    width: auto;
    position: aboslute;
}

.slide {
    float: left;
    height: 400px;
}

你可以使用類似的東西：

(function($){
    $(function() {
        var wrapper = $('#slidesWrapper'),
            container = $('#slidesContainer'),
            slides = container.children(),
            thumbs = $('#thumbnails').children();

        container.css('left', '0');

        thumbs.click(function() {
            var index = $('thumbnails').children().index(this);

            container.stop().animate({
                left: '-' + slides.eq(index).position().left + 'px'
            }, 1000);
        });
    });
})(jQuery);

它沒有經過測試，我也沒有得到你想要的東西。 如果您有一個帶有幻燈片的包裝器，並且只有一個可見，固定寬度和高度，則此示例適合

Answer 2

function next()
{
var mar=$("#img_ul").css("margin-left");
var nm=mar.replace("px","");
if(nm==0)
{
  $("ul").animate({"marginLeft":"-500px"},"slow");
}
else if(nm>0 || nm!=-2000)
{
  nm=nm-500;
  $("ul").animate({"marginLeft":nm+"px"},"slow");
}
else if(nm==-2000)
{
  $("ul").animate({"marginLeft":"0px"},"slow");
}
}

function previous()
{
var mar=$("#img_ul").css("margin-left");
var nm=mar.replace("px","");
if(nm==0)
{
  $("ul").animate({"marginLeft":"-2000px"},"slow");
}
else
{
  nm=+nm + +500;
  $("ul").animate({"marginLeft":nm+"px"},"slow");
}
}
</script>
</head>

<body>

 <div id="slide_wrapper">
 <ul id="img_ul">

 <li>
  <q>
    Learn everything you can, anytime you can, from anyone you can there will always come a time when you will be grateful 
    you did.
  </q>
 </li>

 <li>
  <q>
    Make it simple. Make it memorable. Make it inviting to look at. Make it fun to read.
  </q>
 </li>

 <li>
  <q>
    If plan A fails, remember there are 25 more letters.
  </q>
 </li>

 <li>
  <q>
    Do not go where the path may lead, go instead where there is no path and leave a trail.
  </q>
 </li>

 <li>
  <q>
    A journey of a thousand miles must begin with a single step.
  </q>
 </li>


 </ul>
 </div>

 <input type="button" id="previous" value="Previous" onclick="previous();">
 <input type="button" id="next" value="Next" onclick="next();">

來自TalkersCode的代碼完整教程http://talkerscode.com/webtricks/content-slider-using-jquery-and-css.php

如何創建一個使用4個圖像來導航而不是文本的JQuery內容滑塊？

問題描述

2 個解決方案

解決方案1
1 已采納 2013-04-26 15:41:11

解決方案2
0 2016-03-16 16:07:22

如何創建一個使用4個圖像來導航而不是文本的JQuery內容滑塊？

問題描述

2 個解決方案

解決方案1 1 已采納 2013-04-26 15:41:11

解決方案2 0 2016-03-16 16:07:22

解決方案1
1 已采納 2013-04-26 15:41:11

解決方案2
0 2016-03-16 16:07:22