使用 jquery 的简单滑块 [英] Simple slider using jquery

问题描述

我想实现简单的滑块.

JSFiddle

问题是如果有两张以上的幻灯片，它会正常工作.但如果有两张幻灯片，就会导致问题.

如果有两张幻灯片，我们点击上一个箭头，那么它会正常工作，但是当我们点击下一个箭头时，图像会在一段时间后出现，看起来不太好.

我想通过点击下一个箭头来实现同样的事情，因为它适用于上一个箭头.

HTML:

<a href="#" class="control_next">></a><a href="#" class="control_prev"><</a><ul><li>幻灯片 1</li><li style="background: #aaa;">幻灯片 2</li>

CSS:

#slider {位置:相对；溢出:隐藏；边距:20px 自动 0 自动；边框半径:4px；}#slider ul {位置:相对；边距:0；填充:0；高度:200px；列表样式:无；}#slider ul li {位置:相对；显示:块；向左飘浮;边距:0；填充:0；宽度:500px；高度:300px；背景:#ccc;文本对齐:居中；行高:300px；}a.control_prev, a.control_next {位置:绝对；顶部:40%；z-索引:999；显示:块；填充:4% 3%；宽度:自动；高度:自动；背景:#2a2a2a；颜色:#fff;文字装饰:无；字体粗细:600；字体大小:18px；不透明度:0.8；光标:指针；}a.control_prev:hover, a.control_next:hover {不透明度:1；-webkit-transition:所有 0.2 秒轻松；}a.control_prev {边界半径:0 2px 2px 0;}a.control_next {右:0;边界半径:2px 0 0 2px；}

JS:

jQuery(document).ready(function ($) {var slideCount = $('#slider ul li').length;var slideWidth = $('#slider ul li').width();var slideHeight = $('#slider ul li').height();var sliderUlWidth = slideCount * slideWidth;$('#slider').css({ width: slideWidth, height: slideHeight });$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });$('#slider ul li:last-child').prependTo('#slider ul');函数 moveLeft() {$('#slider ul').animate({左:+ 幻灯片宽度}, 200, 函数 () {$('#slider ul li:last-child').prependTo('#slider ul');$('#slider ul').css('left', '');});};函数 moveRight() {$('#slider ul').animate({左:-slideWidth}, 200, 函数 () {$('#slider ul li:first-child').appendTo('#slider ul');$('#slider ul').css('left', '');});};$('a.control_prev').click(function () {向左移动();});$('a.control_next').click(function () {向右移();});});

请帮帮我.提前致谢

解决方案

你在这里得到的不同之处在于:

function moveLeft() {$('#slider ul').animate({左:slideWidth}, 200, 函数 () {$('#slider ul li:last-child').prependTo('#slider ul');$('#slider ul').css('left', '');});};函数 moveRight() {$('#slider ul').animate({左:slideWidth}, 200, 函数 () {$('#slider ul li:first-child').appendTo('#slider ul');$('#slider ul').css('left', '');});};

您可以删除left"选项中的那些+"和-".不一样

I want to implement simple slider.

JSFiddle

The problem is that if there will be more than two slides than it will works fine. But if there are two slides then it cause a issue.

If there are two slides , and we click on previous arrow then it will works fine but when we click on next arrow image will comes after some time thats not look good.

I want to implement same thing by clicking next arrow as it works with previous arrow.

HTML:

<div id="slider">
  <a href="#" class="control_next">></a>
  <a href="#" class="control_prev"><</a>
  <ul>
    <li>SLIDE 1</li>
    <li style="background: #aaa;">SLIDE 2</li>
  </ul>  
</div>

CSS:

#slider {
  position: relative;
  overflow: hidden;
  margin: 20px auto 0 auto;
  border-radius: 4px;
}

#slider ul {
  position: relative;
  margin: 0;
  padding: 0;
  height: 200px;
  list-style: none;
}

#slider ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 500px;
  height: 300px;
  background: #ccc;
  text-align: center;
  line-height: 300px;
}

a.control_prev, a.control_next {
  position: absolute;
  top: 40%;
  z-index: 999;
  display: block;
  padding: 4% 3%;
  width: auto;
  height: auto;
  background: #2a2a2a;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  opacity: 0.8;
  cursor: pointer;
}

a.control_prev:hover, a.control_next:hover {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
}

a.control_prev {
  border-radius: 0 2px 2px 0;
}

a.control_next {
  right:0;
  border-radius: 2px 0 0 2px;
}

JS:

jQuery(document).ready(function ($) {

    var slideCount = $('#slider ul li').length;
    var slideWidth = $('#slider ul li').width();
    var slideHeight = $('#slider ul li').height();
    var sliderUlWidth = slideCount * slideWidth;

    $('#slider').css({ width: slideWidth, height: slideHeight });

    $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

    $('#slider ul li:last-child').prependTo('#slider ul');

    function moveLeft() {
        $('#slider ul').animate({
            left: + slideWidth
        }, 200, function () {
            $('#slider ul li:last-child').prependTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    function moveRight() {
        $('#slider ul').animate({
            left: - slideWidth
        }, 200, function () {
            $('#slider ul li:first-child').appendTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    $('a.control_prev').click(function () {
        moveLeft();
    });

    $('a.control_next').click(function () {
        moveRight();
    });

});  

Please help me. Thank in advance

解决方案

The difference you get here is :

function moveLeft() {
    $('#slider ul').animate({
        left: slideWidth
    }, 200, function () {
        $('#slider ul li:last-child').prependTo('#slider ul');
        $('#slider ul').css('left', '');
    });
};

function moveRight() {
    $('#slider ul').animate({
        left: slideWidth
    }, 200, function () {
        $('#slider ul li:first-child').appendTo('#slider ul');
        $('#slider ul').css('left', '');
    });
};

You can remove those '+' and '-' in "left" Option. It makes the difference

这篇关于使用 jquery 的简单滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！