如何创建一个使用4个图像来导航而不是文本的JQuery内容滑块？

Question

I have for images with a number on it. Those numbers are 1-4. I want to place them numerically and when the user clicks on 1, i want them to go to slide 1 and if they click on 2, then slide 2. This also needs to have a sliding effect.

I am using this particular javascript code below for left and right options but i am not sure if I can re-use this for my purpose:

HTML would be something like:

<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

Your provided html does not fit to your code, but let's assume you have the following 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>

with the following css:

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

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

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

you could use something like:

(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);

its not tested though and I dont quite get what you want. This example fits if you have a wrapper with slides in it and only one can be visible, fixed width and height

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();">

code from TalkersCode complete tutorial here http://talkerscode.com/webtricks/content-slider-using-jquery-and-css.php