Плагин jQuery + slider: непрерывный слайдер фиксированной ширины с изображениями различной ширины
У меня есть с набором изображений, все из которых имеют одинаковую высоту, но разную ширину. Мне нужно, чтобы остаться на фиксированной ширине, и мне нужно, чтобы изображения скользили влево в бесконечном цикле. Мне также нужны изображения для заполнения ширины контейнера, чтобы отображались даже частичные изображения. Прокрутка будет происходить поэтапно (например, 200 пикселей) и с заданным интервалом.
Я просмотрел большое количество плагинов для слайдшоу jQuery, в том числе Cycle, NivoSlider, EasySlider и полдюжины других. Но ни одно из того, что я видел, похоже, не позволяет мне точно знать, чего хочет клиент. Мне не нужна кликабельная навигация или центрирование. Просто непрерывная кинолента, которая прокручивается с шагом заданной ширины и заданным интервалом.
Что касается части с непрерывной петлей, я думал, что могу подождать, пока крайнее левое изображение не исчезнет из поля зрения. Первоначально я пытался просто с помощью append(), но слайды прыгали, когда крайний левый был перемещен до конца. Тогда я попытался append() clone() это до конца $('#slides').children(), затем remove() это с самого начала $('#slides'),
Пока что у меня есть:
<div id="outer" style="width:300px;">
<div id="slides">
<img src="/images/slide1.jpg" alt="" style="height:150px;width:200px;" />
<img src="/images/slide2.jpg" alt="" style="height:200px;width:200px;" />
<img src="/images/slide3.jpg" alt="" style="height:150px;width:200px;" />
<img src="/images/slide4.jpg" alt="" style="height:300px;width:200px;" />
</div>
</div>
а также
/* some code ideas taken from easySlider */
(function($){
$.fn.stepSlider = function() {
var slideInterval;
this.each(function() {
// this will be the width of $('#slides')
var width = 0;
// shortcut I saw in easySlider code; liked it, used it.
var o = $(this);
// set width of $('#slides') based on total width of child images
o.children().each(function(){width+=$(this).width();});
function scroll() {
o.children().each(
function(index){
// slide each of the children to the left by 150px
$(this).animate({'left':'-=150'}, 2000);
}
);
// after children have been animated() left, check to see
// if the left-most child has gone out of sight
if (o.children(':first-child').position().left + o.children(':first-child').width() < 0) {
// cloning the first child now
var el = o.children(':first-child').clone(true);
// removing the first child
o .children(':first-child').remove();
// trying to reset the css('left') of all of the children now that the first
// element is supposed to be gone
o.children().css('left', o.children(':first-child').position().left + o.children(':first-child').width());
// appending the clone()
o.append(el);
}
}
slideInterval = setInterval(function(){scroll();}, 2000);
});
}
})(jQuery);
Скользящие работы. Но смещение первого изображения в конец заставляет слайды прыгать. И тогда вещь просто начинает разрушаться до такой степени, что полностью останавливается.
Любое понимание очень ценится. Нет, я не совсем новичок в jQuery, но да: это моя первая попытка плагина.
Спасибо и всего наилучшего
2 ответа
Я бы посоветовал вам использовать плагин scrollTo (или написать свой). Далее будет прокручиваться область на 300 пикселей, поэтому не имеет значения, что вы в нее положите. Вам придется управлять положением и шириной области, чтобы остановиться в конце или сделать так, как вам нужно.
ScrolTo: http://demos.flesler.com/jquery/scrollTo/
JSFiddle: http://jsfiddle.net/YZ9vA/2/
$(document).ready(function(){
var areaWidth = 0, x=0;
$('#slideshow img').each(function() {
areaWidth = areaWidth + $(this).width();
});
$('#slideshow').width(areaWidth);
function ScrollMe() {
x += 300;
$('#sliders').scrollTo({top:0, left:x},800);
}
setInterval(ScrollMe,1000);
});
Оригинальный ответ:
Я предлагаю вам использовать цикл jquery, который будет повторяться вечно. Вместо циклического перемещения изображений делите цикл на div так, чтобы вы могли установить ширину в 200 пикселей и изображения внутри, которые вы можете разместить так, как вам нужно (по центру, ширина 100% и т. Д.).
http://jquery.malsup.com/cycle/
#slides, #slides div {width:200px;height:300px}
#slides img {width:100%;height:100%}
<div id="slides">
<div><img src="/images/slide1.jpg" alt="" style="" /></div>
<div><img src="/images/slide2.jpg" alt="" style="" /></div>
<div><img src="/images/slide3.jpg" alt="" style="" /></div>
<div><img src="/images/slide4.jpg" alt="" style="height:300px;width:200px;" /></div>
<!-- I left the last inline style on, you can use that to override or use css externally -->
</div>
$('#slides').cycle({fx:'scrollHorz',
continuous: 1,
easeIn: 'linear',
easeOut: 'linear'});
Так что, благодаря помощи Лукумы, у меня что-то работает.
CSS:
<style type="text/css">
#outer {height: 250px; width: 760px; overflow:hidden;}
#mid {height: 250px; width: 760px; overflow:hidden;}
#slides {height: 250px; width: auto; overflow:hidden;}
#slides img {float: left; height: 250px;} /* height specified just for clarity */
</style>
HTML:
Я должен был обернуть div #slides в два других div вместо одного. С помощью всего лишь одной оболочки плагин scrollTo в итоге установил div на 100% ширины вместо того, чтобы соблюдать мое ограничение в 760px. Из-за нехватки времени я больше не исследовал это. Я только добавил дополнительный div и назвал это днем.
<div id="outer">
<div id="mid">
<div id="slides">
<img src="images/image1.jpg" alt="" style="width:760px;" />
<img src="images/image2.jpg" alt="" style="width:529px;" />
<img src="images/image3.jpg" alt="" style="width:720px;" />
<img src="images/iamge4.jpg" alt="" style="width:563px;" />
<!-- my live version has 16 total images -->
</div>
</div>
</div>
JavaScript:
<script type="text/javascript" src="scripts/jquery.scrollTo.min.js"></script>
<script type="text/javascript">
$(function(){
var areaWidth = 0, x = 0, lelements=$('#slides img').length * -1;
/* This is the same essential functionality that I had in my original post
* to set the width of the images container
*/
function setWidth() {
$('#slides img').each(function() {
areaWidth = areaWidth + $(this).width();
});
$('#slides').width(areaWidth);
}
/* This is also essentially what I was doing before: checking
* to see if an image is no longer viewable. It appends a clone
* to the $('#slides'), but it differs from my original idea by
* not trying to remove any :first element.
* So $('#slides img').length will continue to increase as the
* program runs. I was trying to avoid this, but in reality, it
* probably doesn't matter a ton unless someone is watching the
* same page for quite a long time.
*/
function checkIt() {
$('#slides img').slice(lelements).each(function() {
if ($(this).position().left + $(this).width() < 0) {
$(this).clone().appendTo($('#slides'));
}
});
}
/* This is where we use Flesler's scrollTo plugin to handle the motion.
* I changed scrollTo({}, 3000) to scrollTo({}, {duration: 1000})
* to slow the transition speed.
*/
function scrollMe() {
$('#outer').scrollTo({top:0, left:x}, {duration:1000});
/* x += 300 was the first line in scrollMe(), but ended up
* resulting in a 600px slide for the first transition,
* so I moved it here. The first transition takes longer
* to occur, but all other transitions are fine
*/
x += 300;
checkIt();
setWidth();
}
setInterval(scrollMe, 3000);
});
</script>
Еще одна вещь, которую я должен был сделать, - убедиться, что мой первый слайд был полной ширины (760 пикселей). Если бы оно было меньше этого, то второе изображение изначально было бы невидимым, затем оно внезапно появилось бы в левом пространстве контейнера, и тогда бы произошла прокрутка. Все последующие изображения были в порядке. Очевидно, что заполнение первого изображения на всю ширину устраняет этот артефакт.
Еще раз спасибо lucuma - вы были ТОННА помощи!