Javascript css滑块一行5个项目
我正在制作一个缩略图滑块。 我想在任何时候显示其中的5个,如果用户单击右键或左键,它们将移动一个缩略图,以显示下一个缩略图。 我尝试从另一个滑块开始,一次只对一个项目执行此操作,但我对JS是新手,我还没有足够好的能力来修复它。 原来的代码运行得很好,但我所做的更改把它搞砸了 有人能帮我修一下吗?下面是jfiddle处理我的代码: 这里还有我的源代码HTML:Javascript css滑块一行5个项目,javascript,css,slider,Javascript,Css,Slider,我正在制作一个缩略图滑块。 我想在任何时候显示其中的5个,如果用户单击右键或左键,它们将移动一个缩略图,以显示下一个缩略图。 我尝试从另一个滑块开始,一次只对一个项目执行此操作,但我对JS是新手,我还没有足够好的能力来修复它。 原来的代码运行得很好,但我所做的更改把它搞砸了 有人能帮我修一下吗?下面是jfiddle处理我的代码: 这里还有我的源代码HTML: <section class="image-menu"> <div id="project" style="width:
<section class="image-menu">
<div id="project" style="width:1150px;height:150px;">
<a href="#" class="control_next" style="color:#aaa;">></a>
<a href="#" class="control_prev" style="color:#aaa;"><</a>
<ul>
<li><a href="#"><img src="#" alt="" width="170" height="106" border="0" />
<div>Item 1</div></a>
</li>
<li><a href="#"><img src="#" alt="" width="170" height="106" border="0" />
<div>Item 2</div></a>
</li>
<li><a href="#"><img src="#" alt="" width="170" height="106" border="0" />
<div>Item 3</div></a>
</li>
<li><a href="#"><img src="#" alt="" width="170" height="106" border="0" />
<div>Item 4</div></a>
</li>
<li><a href="#"><img src="#" alt="" width="170" height="106" border="0" />
<div>Item 5</div></a>
</li>
<li><a href="#"><img src="#" alt="" width="170" height="106" border="0" />
<div>Item 6</div></a>
</li>
</ul>
</div>
JS:
您的代码似乎工作正常。您需要确保在JSFIDLE中包含jQuery。我设置了它,并添加了一些占位符图像,它开始工作了。我看到的唯一问题是你的CSS,因为你的左箭头在你的拇指上。这不是javascript问题
按钮的箭头未居中,但它们应该。。不知何故,按钮认为滑块高于实际值。拇指不在滑块空间的中心,但它们应该。我不知道如何解决这些问题,我认为它们与js有关。
.image-menu {
width:1160px;
text-align:center;
margin:0 auto;
position:relative;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
}
.image-menu a {
color: black;
font-weight:bold;
}
.image-menu a:hover {
text-decoration:none;
color:#B22222;
}
.image-menu a img {
border: 3px solid #FFFFFF;
}
.image-menu a:hover img {
border: 3px solid #B22222;
}
.image-menu ul {
padding-left:40px;
}
#project {
position: relative;
overflow: hidden;
margin: 3px auto 0 auto;
border-radius: 4px;
}
#project ul {
position: relative;
margin: 0;
padding: 0;
height: 200px;
list-style: none;
}
#project ul li {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 170px;
height: 150px;
background: #ccc;
text-align: center;
/*line-height: 170px;*/
}
#project ul li div {
width: 170px;
height: 20px;
line-height: 20px;
}
a.control_prev, a.control_next {
position: absolute;
top: 0%;
z-index: 999;
display: block;
padding: 9% 2%;
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;
}
jQuery(document).ready(function ($) {
var slideCount = $('#project ul li').length;
var slideWidth = $('#project ul li').width();
var slideHeight = $('#project ul li').height();
var sliderUlWidth = slideWidth * slideCount;
$('#project').css({
width: sliderUlWidth,
height: slideHeight
});
$('#project ul').css({
width: sliderUlWidth,
marginLeft: -slideWidth
});
$('#project ul li:last-child').prependTo('#project ul');
function moveLeft() {
$('#project ul').animate({
left: +slideWidth
}, 200, function () {
$('#project ul li:last-child').prependTo('#project ul');
$('#project ul').css('left', '');
});
};
function moveRight() {
$('#project ul').animate({
left: -slideWidth
}, 200, function () {
$('#project ul li:first-child').appendTo('#project ul');
$('#project ul').css('left', '');
});
};
$('a.control_prev').click(function () {
moveLeft();
});
$('a.control_next').click(function () {
moveRight();
});
});
<section class="image-menu">
<div id="project" style="width:1150px;height:150px;"> <a href="#" class="control_next" style="color:#aaa;">></a>
<a href="#" class="control_prev" style="color:#aaa;"><</a>
<ul>
<li><a href="#"><img src="http://placehold.it/170x106" alt="" width="170" height="106" border="0" /><div>Item 1</div></a>
</li>
<li><a href="#"><img src="http://placehold.it/170x106" alt="" width="170" height="106" border="0" /><div>Item 2</div></a>
</li>
<li><a href="#"><img src="http://placehold.it/170x106" alt="" width="170" height="106" border="0" /><div>Item 3</div></a>
</li>
<li><a href="#"><img src="http://placehold.it/170x106" alt="" width="170" height="106" border="0" /><div>Item 4</div></a>
</li>
<li><a href="#"><img src="http://placehold.it/170x106" alt="" width="170" height="106" border="0" /><div>Item 5</div></a>
</li>
<li><a href="#"><img src="http://placehold.it/170x106" alt="" width="170" height="106" border="0" /><div>Item 6</div></a>
</li>
</ul>
</div>
</section>