3

我有带有数字的图像。这些数字是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>
4

2 回答 2

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

虽然它没有经过测试，但我不太明白你想要什么。如果您有一个带有幻灯片的包装器，并且只有一个可见，固定宽度和高度，则此示例适合

于 2013-04-26T15:41:11.087 回答
0 
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

于 2016-03-16T16:07:22.977 回答