我目前正在创建一个轮播,因此开发人员只需在页面中插入一个无序列表。然后,JS将使用相关的div包装UL以使轮播工作。我决定以这种方式接近它的原因有几个:
首先;所有开发人员都可以轻松地将UL复制并粘贴到页面中; 其次;最终,通过使用数据属性,开发人员将能够确定轮播将在什么断点处启动。例如,在桌面上,将没有轮播,只有4个图像以网格形式布局,但是通过使用数据attr等作为'data-carousel =“720”',旋转木马将以720px开始。
现在我有点工作了。我得到旋转木马包装,根据断点进行包装和展开。我也正在开始旋转木马,当它到达断点时,然而,当我回到桌面时,我不能为我的生活,删除应用旋转木马的功能。有人可以帮忙。
这是init脚本
$(function(){
function doneResizing() {
var width = $(window).width();
//getDataAttr = $car.data('carousel');
if (width <=767) {
carousel.createWrap();
carousel.beginCarousel();
} else {
carousel.removeWrap();
carousel.destroyCarousel();
}
}
var id;
$(window).on('load resize orientationchange', function() {
clearTimeout(id);
id = setTimeout(doneResizing, 500);
});
});
这是主要的脚本
var carousel = (function() {
var test;
return {
createWrap: function() {
var $carContainer = $('<div class="carousel-container" />')
$carViewer = $('<div class="carousel-viewer" />'),
$carBtnWrap = $('<div class="carousel-buttons" />'),
$carBtnUl = $('<ul />');
$carContainer.append($carViewer, $carBtnWrap);
$carBtnWrap.append($carBtnUl);
$('.carousel').wrap($carContainer);
},
removeWrap: function() {
$('.carousel-container .carousel-viewer').unwrap();
$('.carousel-viewer .carousel-group').unwrap();
$('.carousel-viewer .carousel').unwrap();
$('.carousel-buttons').remove();
},
beginCarousel: function() {
$('.carousel-container').each(function() {
var $this = $(this),
$group = $this.find('.carousel'),
$slides = $this.find('li'),
buttonArray = [],
currentIndex = 0,
timeout;
function move (newIndex) {
var animateLeft,
animateRight;
advance();
if ($group.is(':animated' || currentIndex === newIndex)) {
return;
}
buttonArray[currentIndex].removeClass('active');
buttonArray[newIndex].addClass('active');
if (newIndex > currentIndex) {
slideLeft = '100%';
animateLeft= '-100%';
} else {
slideLeft = '-100%';
animateLeft = '100%';
}
$slides.eq(newIndex).css({
left: slideLeft,
display: 'block'
});
$group.animate({
left: animateLeft
}, function () {
$slides.eq(currentIndex).css({
display: 'none'
});
$slides.eq(newIndex).css({
left: 0
});
$group.css({
left: 0
});
currentIndex = newIndex;
});
}
function advance () {
clearTimeout(timeout);
timeout = setTimeout(function() {
if (currentIndex < ($slides.length - 1)) {
move(currentIndex + 1);
} else {
move(0);
}
}, 5000);
}
$.each($slides, function(index) {
var $buttonWrap = $('.carousel-buttons ul'),
$buttonLi = $('<li />'),
$button = $('<a href="">•</a>');
$button.appendTo($buttonLi);
$buttonLi.appendTo($buttonWrap);
if (index === currentIndex) {
$button.addClass('active');
}
$button.on('click', function (e) {
e.preventDefault();
move(index);
});
buttonArray.push($button);
});
advance();
});
},
destroyCarousel: function() {
}
};
}());
任何人都可以帮忙,我是否正确地接近这个?