你好呀，
我尝试使用Jquery scrollLeft（）方法创建非常简单的滑块。我找到了一些答案，我在这里尝试了这个..但是没有用....我还是jquery的初学者，不知道为什么。
的HTML
<div class="gallery-slider ">
<div class="images-preview">
<img alt="" class="img-responsive" src="http://placehold.it/300">
<img alt="" class="img-responsive" src="http://placehold.it/300">
<img alt="" class="img-responsive" src="http://placehold.it/300">
<img alt="" class="img-responsive" src="http://placehold.it/300">
<img alt="" class="img-responsive" src="http://placehold.it/300">
<img alt="" class="img-responsive" src="http://placehold.it/300">
<img alt="" class="img-responsive" src="http://placehold.it/300">
<img alt="" class="img-responsive" src="http://placehold.it/300">
<img alt="" class="img-responsive" src="http://placehold.it/300">
<img alt="" class="img-responsive" src="http://placehold.it/300">
<img alt="" class="img-responsive" src="http://placehold.it/300">
<img alt="" class="img-responsive" src="http://placehold.it/300">
</div>
<div class="controls">
<div class="right-arrow"><i class="fa fa-angle-left fa-3x"></i></div>
<div class="left-arrow"><i class="fa fa-angle-right fa-3x"></i></div>
</div>
</div>
的CSS
.gallery-slider {
position: relative;
}
.gallery-slider .images-preview {
margin: auto;
height: 230px;
overflow: hidden;
}
.gallery-slider .images-preview img {
display: inline-block;
overflow: visible;
width: 410px;
margin: 10px 17px;
}
.gallery-slider .images-preview img, .controls {
height: 200px;
width: 26%;
}
/* Controls */
.controls {
position: absolute;
top: 10px;
width: 100%;
}
.right-arrow, .left-arrow {
display: inline-block;
padding: 62px;
background-color: rgba(255, 255, 255, 0.76);
position: absolute;
height: 100%;
cursor: pointer;
}
.right-arrow i, .left-arrow i{
margin: 23px 20px;
}
.left-arrow {
right: 0px;
}
.right-arrow {
left: 0px;
text-align: right;
}
jQuery的
$(".left-arrow").click(function () {
var leftPos = $('.images-preview img').scrollLeft();
$(".images-preview img").animate({scrollLeft: leftPos - 100}, 1000);
});
$(".right-arrow").click(function () {
var leftPos = $('.images-preview img').scrollLeft();
$(".images-preview img").animate({scrollLeft: leftPos + 100}, 1000);
});
所以有帮助吗？
提前致谢
更新：我也需要它scrollleft():0在滚动结束时返回
您要的是简单但充满问题的东西。这些问题使事情变得复杂。
javascript：
var target = $('.images-preview');
//get the total number of images
var total = $('.images-preview img').length;
//calculate the width of the image-preview
var width = total * 300 + total * 40;
var c = 1;
// 80 is to center the image-preview
var originalLeft = 80;
// 300 is the image size, 40 is the total margin (this is how many px image-preview
// would have to move left for one image
var totalImg = 300 + 40;
// startToEnd is the total width when you click left(arrow-right) on first image
var startToEnd = width -originalLeft -340;
var a = '';
//need this to prevent multiple clicks
var active = false;
//put in the width at page rendering
$(document)function(){
target.css('width', width);
});
$(".left-arrow").click(function () {
if (active === false){
if (c === total){
a = originalLeft;
c = 1;
}else{
a = '-='+totalImg;
c++;
}
//turn the active to true to prevent another animation from activating
active = true;
target.animate(
{left: a},
{duration:500,
//turn the active off after animation is complete
complete: function(){
active = false;
}
});
}
});
$(".right-arrow").click(function () {
if (active === false){
if (c === 1){
a = '-'+startToEnd;
c = total;
}else{
a = '+='+totalImg;
c--;
}
active = true;
target.animate(
{left: a},
{duration:500,
complete: function(){
active = false;
}
});
}
});
CSS：
.gallery-slider{
width:500px;
height:300px;
position:relative;
overflow:hidden;
}
.images-preview{
width:300px;
height:300px;
position:absolute;
left:80px;
}
.images-preview img{
width:300px;
height:300px;
position:relative;
float:left;
margin:0 20px;
}
.control{
width:100%;
height:100%;
position:relative;
}
.right-arrow, .left-arrow{
position:absolute;
padding:0 26px;
}
.right-arrow i, .left-arrow i{
line-height:300px;
}
.right-arrow{
left:0;
}
.left-arrow{
right:0;
}
这是演示：https : //jsfiddle.net/ood26n7b/1/
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句