Question

我正在做一个幻灯片放映我喜欢的项目，如点击右边的左箭头，我的意思是当我们去下一个项目时左边的那个只是要回去。到目前为止我的代码是这样的： http://codepen.io/xhepigerta/pen/NNOKaX

$(document).ready(function() {
        //move the last list item before the first item. The purpose of this is if the user clicks to slide left he will be able to see the last item.
        $('#category li:first').before($('#category li:last')); 
        
        
        //when user clicks the image for sliding right        
        $('#right_scroll').click(function(){
        
            //get the width of the items ( i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too ) '
            var item_width = $('#category li').outerWidth() + 10;
          $('this').css('opacity','0.5')
            
            //calculae the new left indent of the unordered list
            var left_indent = parseInt($('#category').css('left')) - item_width;
            
            //make the sliding effect using jquery's anumate function '
            $('#category:not(:animated)').animate({'left' : left_indent},500,function(){    
                
                //get the first list item and put it after the last list item (that's how the infinite effects is made) '
                $('#category li:last').after($('#category li:first')); 
                
                //and get the left indent to the default -210px
                $('#category').css({'left' : '-210px'});
            }); 
        });
        
        //when user clicks the image for sliding left
        $('#left_scroll').click(function(){
            
            var item_width = $('#category li').outerWidth() + 10;
            
            /* same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width) */
            var left_indent = parseInt($('#category').css('left')) + item_width;
            
            $('#category:not(:animated)').animate({'left' : left_indent},500,function(){    
            
            /* when sliding to left we are moving the last item before the first list item */            
            $('#category li:first').before($('#category li:last')); 
            
            /* and again, when we make that change we are setting the left indent of our unordered list to the default -210px */
            $('#category').css({'left' : '-210px'});
            });
            
            
        });
  });

.user-category{
    position: fixed;
    width: 100%;
    height: auto;
    background: #232323;
    padding:20px 0;
    
    top: 0;
    overflow: hidden;
    z-index: 1;
    border-bottom: 1px solid #232323;
}
.user-category-inner{
  /* float: left; */
  /* width: 98%; */
  left: 20px;
}


.user-category-inner  ul{
    position: relative;
    left: -30px;
    /* margin:0; */
    /* padding: 0; */
    width: 9999px;
}


.user-category-inner ul li{
  display: inline;
  list-style: none;
  padding: 28px 20px;
  margin: 0 15px;
}

.user-category-inner li a{
  line-height:1.6rem;
  text-decoration: none;
  font-size: 1.2rem;
  color: #fff;
  border-radius: 5px;
  background: #6D6E71; /* For browsers that do not support gradients */
   /*Safari 5.1-6*/
   /*Opera 11.1-12*/
   /*Fx 3.6-15*/
   /*Standard*/
  padding: 20px 25px;
}


.arrow-left{
  position: absolute;
    left: 0;
    cursor: pointer;
    z-index: 999;
   padding: 0 60px;
    top: 0;
  height:100%;
  rsor: pointer;
    background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(90%, #222));
    background-image: -webkit-linear-gradient(left, transparent 0%, #222 90%);
    background-image: linear-gradient(to right, transparent 0%, #3B17A5 90%);

}
.arrow-left i{
  font-size: 4rem;
  color:#fff;
  line-height: 80px;
}

.arrow-right{
 position: absolute;
    right: 0;
    height: 100%;
    padding: 0 60px;
    top: 0;
    cursor: pointer;
    background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(90%, #222));
    background-image: -webkit-linear-gradient(left, transparent 0%, #222 90%);
    background-image: linear-gradient(to right, transparent 0%, #3B17A5 90%);

}
.arrow-right i{
  font-size: 4rem;
  color:#fff;
  line-height:80px;
}

<div class="user-category">
<div class="arrow-left" id="left_scroll"><i class="fa fa-angle-left" aria-hidden="true"></i></div>
<div class="user-category-inner">
    <ul id="category">
               <li><a style="background-image:url('http://www.tvweek.com/wp-content/uploads/2014/09/taylor-swift.jpg)" href="#">Zbavitje</a></li>
                 <li><a href="#">Zbavitje Zbavitj Zbavitj Zbavitj</a></li>
                 <li><a href="#">Zbavitje</a></li>
              <li><a href="#">Zbavitje</a></li>
                <li><a href="#">Zbavitje</a></li>
       <li><a href="#">Zbavitje</a></li>
                 <li><a href="#">Zbavitje</a></li>
                 <li><a href="#">Zbavitje</a></li>
              <li><a href="#">Zbavitje</a></li>
                <li><a href="#">Zbavitje</a></li>
       <li><a href="#">Zbavitje</a></li>
                 <li><a href="#">Zbavitje</a></li>
                 <li><a href="#">Zbavitje</a></li>
              <li><a href="#">Zbavitje</a></li>
                <li><a href="#">Zbavitje</a></li>
            </ul>
    </div>
    <div class="arrow-right" id="right_scroll"><i class="fa fa-angle-right" aria-hidden="true"></i></div>
</div>

强文

Answer 1

$(document).ready(function() {
    //move the last list item before the first item. The purpose of this is if the user clicks to slide left he will be able to see the last item.
    $('#category li:first').before($('#category li:last')); 
    
    
    //when user clicks the image for sliding right        
    $('#right_scroll').click(function(){
    
        //get the width of the items ( i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too ) '
        var item_width = $('#category li').outerWidth() + 10;
      $('this').css('opacity','0.5')
        
        //calculae the new left indent of the unordered list
        var left_indent = parseInt($('#category').css('left')) - item_width;
        
        //make the sliding effect using jquery's anumate function '
        $('#category:not(:animated)').animate({'left' : left_indent},500,function(){    
           $('#category').data('back', true); 
            //get the first list item and put it after the last list item (that's how the infinite effects is made) '
            $('#category li:last').after($('#category li:first')); 
            
            //and get the left indent to the default -210px
            $('#category').css({'left' : '-210px'});
        }); 
    });
    
    //when user clicks the image for sliding left
    $('#left_scroll').click(function(){
        var isBack = $('#category').data('back'); 
      if (isBack){
        var item_width = $('#category li').outerWidth() + 10;
        
        /* same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width) */
        var left_indent = parseInt($('#category').css('left')) + item_width;
        
        $('#category:not(:animated)').animate({'left' : left_indent},500,function(){    
        
        /* when sliding to left we are moving the last item before the first list item */            
        $('#category li:first').before($('#category li:last')); 
        
        /* and again, when we make that change we are setting the left indent of our unordered list to the default -210px */
        $('#category').css({'left' : '-210px'});
        
        $('#category').data('back', false);                                       
        });
        
    }
         $('#category').data('back', false);                   
    });
  });

.user-category{
    position: fixed;
    width: 100%;
    height: auto;
    background: #232323;
    padding:20px 0;
    
    top: 0;
    overflow: hidden;
    z-index: 1;
    border-bottom: 1px solid #232323;
}
.user-category-inner{
  /* float: left; */
  /* width: 98%; */
  left: 20px;
}


.user-category-inner  ul{
    position: relative;
    left: -30px;
    /* margin:0; */
    /* padding: 0; */
    width: 9999px;
}


.user-category-inner ul li{
  display: inline;
  list-style: none;
  padding: 28px 20px;
  margin: 0 15px;
}

.user-category-inner li a{
  line-height:1.6rem;
  text-decoration: none;
  font-size: 1.2rem;
  color: #fff;
  border-radius: 5px;
  background: #6D6E71; /* For browsers that do not support gradients */
   /*Safari 5.1-6*/
   /*Opera 11.1-12*/
   /*Fx 3.6-15*/
   /*Standard*/
  padding: 20px 25px;
}


.arrow-left{
  position: absolute;
    left: 0;
    cursor: pointer;
    z-index: 999;
   padding: 0 60px;
    top: 0;
  height:100%;
  rsor: pointer;
    background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(90%, #222));
    background-image: -webkit-linear-gradient(left, transparent 0%, #222 90%);
    background-image: linear-gradient(to right, transparent 0%, #3B17A5 90%);

}
.arrow-left i{
  font-size: 4rem;
  color:#fff;
  line-height: 80px;
}

.arrow-right{
 position: absolute;
    right: 0;
    height: 100%;
    padding: 0 60px;
    top: 0;
    cursor: pointer;
    background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(90%, #222));
    background-image: -webkit-linear-gradient(left, transparent 0%, #222 90%);
    background-image: linear-gradient(to right, transparent 0%, #3B17A5 90%);

}
.arrow-right i{
  font-size: 4rem;
  color:#fff;
  line-height:80px;
}

<div class="user-category">
<div class="arrow-left" id="left_scroll"><i class="fa fa-angle-left" aria-hidden="true"></i></div>
<div class="user-category-inner">
    <ul id="category">
               <li><a style="background-image:url('http://www.tvweek.com/wp-content/uploads/2014/09/taylor-swift.jpg)" href="#">Zbavitje</a></li>
                 <li><a href="#">Zbavitje Zbavitj Zbavitj Zbavitj</a></li>
                 <li><a href="#">Zbavitje</a></li>
              <li><a href="#">Zbavitje</a></li>
                <li><a href="#">Zbavitje</a></li>
       <li><a href="#">Zbavitje</a></li>
                 <li><a href="#">Zbavitje</a></li>
                 <li><a href="#">Zbavitje</a></li>
              <li><a href="#">Zbavitje</a></li>
                <li><a href="#">Zbavitje</a></li>
       <li><a href="#">Zbavitje</a></li>
                 <li><a href="#">Zbavitje</a></li>
                 <li><a href="#">Zbavitje</a></li>
              <li><a href="#">Zbavitje</a></li>
                <li><a href="#">Zbavitje</a></li>
            </ul>
    </div>
    <div class="arrow-right" id="right_scroll"><i class="fa fa-angle-right" aria-hidden="true"></i></div>
</div>

如何在旋转木马中留下箭头，只有在点击右边时才显示项目

1 个答案: