Question

大家好，我无法让这个脚本运行起来。以下是示例网址http://codepen.io/anon/pen/emLHq

我尝试做的是根据文字的幻灯片位置隐藏控制箭头。

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', '');
        return false;
    });   
    if ('#firstf') {
        $('a.control_prev').css('display', 'none'); }
        else {
            $(this).css('display', 'block');
        };

};

function moveRight() {
    $('#slider ul').animate({
        left: - slideWidth
    }, 200, function () {
        $('#slider ul li:first-child').appendTo('#slider ul');
        $('#slider ul').css('left', '');
        return false;
    });
    if ('#lastf' ) {
        $('a.control_next').css('display', 'none'); }
        else {
            $(this).css('display', 'block');
        }
};

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

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

谢谢..

Answer 1

$(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');
firstf="firstf";
lastf="lastf";
firstorlast="";
 function moveLeft() {
    $('#slider ul').animate({ left: + slideWidth }, 200, function () {
        $('#slider ul li:last-child').prependTo('#slider ul');
        $('#slider ul').css('left', '');
      firstorlast=  $(this).find('li').attr('id');


      if(firstorlast  ==firstf)
     {   $('a.control_prev').css('display', 'none');$('a.control_next').css('display', 'blok'); }
     else if(firstorlast  ==lastf){ $('a.control_next').css('display', 'none'); }
  else{$('a.control_prev').css('display', 'blok');$('a.control_next').css('display', 'blok');}

        return false;
    });   




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

           firstorlast=  $(this).find('li').attr('id');

      if(firstorlast  ==firstf)
     {   $('a.control_next').css('display', 'none');$('a.control_prev').css('display', 'blok'); }
     else if(firstorlast  ==lastf){ $('a.control_next').css('display', 'none'); }
      else{$('a.control_prev').css('display', 'blok');$('a.control_next').css('display', 'blok');}
      return false;
    });


};

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

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

});

和html

 <div id="slider">
                                    <a href="#" class="control_next"></a>
                                    <a href="#" class="control_prev"></a>
                                    <ul>
                                      <li id="firstf"><input value="£1000"></li>
                                      <li><input value="£900"></li>
                                      <li><input value="£800"></li>
                                      <li><input value="£700"></li>
                                      <li><input value="£600"></li>
                                      <li><input value="£500"></li>
                                      <li><input value="£400"></li>
                                      <li><input value="£300"></li>
                                      <li><input value="£200"></li>

                                    <li id="lastf"><input value="£100"></li></ul>

在我的旋转木马上隐藏箭头的问题

1 个答案: