0
我正在做一個幻燈片放映項目，我想要做的事情就像點擊右側的箭頭一樣顯示，我的意思是當我們去下一個項目時，左邊的那個只是回去。到目前爲止，我的代碼是這樣的： 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>強大的文本