使用jQuery创建简单，全角，无限轮播 [英] Creating a simple, full-width, infinite carousel with jQuery
问题描述
我正在用jquery创建一个滑块.我可以在线查看是否可以使用任何已经制成的插件，但没有一个可以做我需要做的事情.
I'm creating a slider with jquery. I've looked on line if I could use any of the already made plugins, but none could do what I need to.
在我正在工作的网站上，我有一个1260px的内容所在的容器.
On a site I'm working on, I have a 1260px container where the content is.
滑块为全角，中间为活动幻灯片，侧面为上一张和下一张幻灯片，应作为上一次和下一次单击.
The slider is fullwidth, and in the center is the active slide, and on the sides are previous and next slides that should serve as a previous and next click.
我打算在该滑块上进行扩展，以便在其下方具有缩略图，但是现在我需要使该滑块正常工作.
I plan to expand on that slider so that I have thumbnails beneath it, but for now I need to make the slider working.
HTML是(图像为1260x520px)
HTML is (the images are 1260x520px)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Fullwidth Slider</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="init.js"></script>
</head>
<body>
<div class="slider clearfix" data-autoplay="0" data-items="1" data-easing="linear" data-duration="750" data-height="520">
<div class=" single_slide" style="height: 520px; background-image: url('image.jpg'); background-size: cover; background-position: 0% 0%; background-repeat: no-repeat;">
<div class="slider_text">
</div>
</div>
<div class="single_slide active" style="height: 520px; background-image: url('image.jpg'); background-size: cover; background-position: 0% 0%; background-repeat: no-repeat;">
<div class="slider_text">
</div>
</div>
<div class=" single_slide" style="height: 520px; background-image: url('image.jpg'); background-size: cover; background-position: 0% 0%; background-repeat: no-repeat;">
<div class="slider_text">
</div>
</div>
<div class=" single_slide" style="height: 520px; background-image: url('image.jpg'); background-size: cover; background-position: 0% 0%; background-repeat: no-repeat;">
<div class="slider_text">
</div>
</div>
<div class=" single_slide" style="height: 520px; background-image: url('image.jpg'); background-size: cover; background-position: 0% 0%; background-repeat: no-repeat;">
<div class="slider_text">
</div>
</div>
</div>
</body>
</html>
样式css是:
/***************** Image Slider ****************/
.slider{
list-style: none;
display: block;
width: 100%;
overflow: hidden;
position: relative;
}
.slider .single_slide{
float: left;
display: block;
margin: 0;
padding: 0;
border-radius: 0px;
overflow: hidden;
opacity: 0.15;
width: 1260px;
cursor: pointer;
-webkit-transition: opacity 800ms ease-in-out;
transition: opacity 800ms ease-in-out;
}
.slider .single_slide.active{
opacity: 1;
cursor: default;
-webkit-transition: opacity 800ms ease-in-out;
transition: opacity 800ms ease-in-out;
}
jQuery代码:
jQuery(document).ready(function($) {
$('.slider').each(function () {
var $slider = $(this);
var autoplay = $slider.data("autoplay");
var items = $slider.data("items");
var easing = $slider.data("easing");
var duration = $slider.data("duration");
var $single_slide = $slider.find('.single_slide');
var slider_height = $single_slide.css('height', $slider.data('height')+'px');
var left_offset = ($(window).width()-1260)/2;
$slider.css({'width' : $single_slide.length*1260+'px', 'left':- 1260+left_offset + 'px'});
$single_slide.eq(1).addClass('active');
var $prev = $('.active').prev();
var $next = $('.active').next();
function moveLeft() {
var $a = $('.active');
$a.removeClass('active').prev().addClass('active');
$slider.animate({
left: parseInt($slider.css('left'), 10) + $single_slide.outerWidth(true),
easing: easing,
step: items,
}, duration, function () {
$('.single_slide:first').before($('single_slide:last'));
});
}
function moveRight() {
var $a = $('.active');
$a.removeClass('active').next().addClass('active');
$slider.animate({
left: parseInt($slider.css('left'), 10) - $single_slide.outerWidth(true),
easing: easing,
step: items,
}, duration, function () {
$('.single_slide:last').after($('single_slide:first'));
});
}
$prev.click(function () {
moveLeft();
});
$next.click(function () {
moveRight();
});
if (autoplay == 1) {
setInterval(function () {
moveRight();
}, duration);
}
});
});
我还创建了 git存储库，因此您可以下载html文件.
I've created a git repository as well, so you can download the html files.
我本来是为wordpress做的，但是工作方式是一样的.
I'm originally doing this for wordpress, but the workings is the same.
问题在于，单击上一个或下一个图像后，似乎无法添加图像.类的切换是可行的，但是当您单击它们时，下一个和上一个图像没有改变(我做过类似的操作，但是prev/next按钮是固定元素，因此我可以一直以它们为目标，但是在这里正在改变)-
The problem is that it doesn't seem like the appending of the images once you click previous or next images works. Switching of the classes works, but the next and previous images are not changing when you click on them (I've done something similar but the prev/next buttons were fixed elements, so I could just target them all the time, but here they are changing)-
推荐答案
我认为我使用上一个和下一个选择器都可以解决问题.它们作为变量被缓存了一次，但是当active类更改到另一张幻灯片时从未被更新-因此事件侦听器将坚持最初设置为活动幻灯片的同级元素:
I think I got to the root of the issue with the previous and next selectors. They got cached once as a variable but were never updated when the active class changes to another slide - so the event listeners would stick to the elements that were initially set as siblings of the active slide :
var $prev = $('.active').prev();
var $next = $('.active').next();
不幸的是，这似乎不起作用:
Unfortunately this doesn't seem to work :
$('.active').prev().click(function() { ... });
但是这个几乎可以达到目的:
But this almost does the trick :
$('.slider').find($('.single_slide').eq($('.active').index()+2)).click(function() {
moveLeft();
});
$('.slider').find($('.single_slide').eq($('.active').index()-1)).click(function() {
moveRight();
});
更新-使用.detach()方法和委派的事件侦听器使功能和无限性得以实现:
Update - made functional and infinite with the .detach() method and a delegated event listener :
http://codepen.io/anon/pen/aOoPgZ?editors=001
$('.slider').each(function() {
var slider = $(this);
var autoplay = slider.data('autoplay');
var items = slider.data('items');
var easing = slider.data('easing');
var duration = slider.data('duration');
var single_slide = slider.find('.single_slide');
var slider_height = single_slide.css('height', slider.data('height'));
var offset = ($(window).width()-1260)/2-1260;
$.each(single_slide, function(index) {
if (index == 0) $(this).addClass('img' + single_slide.length);
else $(this).addClass('img' + index);
});
slider.css({'width': single_slide.length*1260, 'left': offset});
single_slide
.eq(0).addClass('prev').end()
.eq(1).addClass('active').end()
.eq(2).addClass('next');
function moveLeft() {
$('.active').removeClass('active').prev().addClass('active');
slider.animate({
left: slider.position().left+single_slide.outerWidth(true),
easing: easing,
step: items
}, duration, function() {
$('.single_slide:last').detach().prependTo(slider);
slider.css('left', offset);
newNav();
});
}
function moveRight() {
$('.active').removeClass('active').next().addClass('active');
slider.animate({
left: slider.position().left-single_slide.outerWidth(true),
easing: easing,
step: items
}, duration, function() {
$('.single_slide:first').detach().appendTo(slider);
slider.css('left', offset);
newNav();
});
}
function newNav() {
$('.prev').removeClass('prev');
$('.next').removeClass('next');
$('.single_slide')
.eq(0).addClass('prev').end()
.eq(2).addClass('next');
}
$(document).on('click', '.prev', function() {
moveLeft();
});
$(document).on('click', '.next', function() {
moveRight();
});
if (autoplay == 1) {
setInterval(function() {
moveRight();
}, duration);
}
});
我确定还有一些优化的余地，但这似乎可以解决问题.具有跟踪不需要的图像的功能(但对于调试很方便).
I'm sure there's room for some optimisation but it seems to do the trick. Has a feature to keep track of the images that may not be needed (but it's handy for debugging).
现在获得一些滑动支持. :-D
Now for some swipe support. :-D
这篇关于使用jQuery创建简单，全角，无限轮播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
