jquery无限滑块图像 [英] jquery infinite slider images
问题描述
我试图使用jquery创建一个无限滑块。我的页面有一些标签，宽度等于窗口宽度。
我想在10秒后滑动每个图片，当最后一个图片出现时，
现在我创建了一个宽度为10000的div，用来保存我的无序图像列表他们有显示：无。我的问题是为什么当我给margin-left：-1000px一个列表项，图像看起来重叠一个在另一个之上，而不是一个接一个。我尝试截取屏幕截图，但我不知道我的Dropbox发生了什么。
这是我的CSS：
.slider {
position：relative;
height：498px;
/ * display：inline-block; * /
overflow：hidden;
}
.slider-list {
/ * display：inline-block; * /
float：left;
padding：0;
margin：0;
width：10000px
/ * height：496px; * /
}
.slider-list li {
display：inline-block;
/ * float：left; * /
/ * width：100％; * /
height：496px;
z-index：1;
这是我的HTML：
< div class =slider>
< ul class =slider-list>
< li>< img class =homepage-imgsrc =images / homepage.jpg>< / li>
< li>< img class =homepage-imgsrc =images / image1.jpg>< / li>
< li>< img class =homepage-imgsrc =images / image2.jpg>< / li>
< li>< img class =homepage-imgsrc =images / image3.jpg>< / li>
< li>< img class =homepage-imgsrc =images / image4.jpg>< / li>
< / ul>
具有类.slider的div将在更多元素后关闭。
UPDATE：
这是我写这篇文章后的jQuery代码：
$（document）.ready（function（）{
slide（）;
}）;
slide = function（）{
var img = $（'。homepage-img'）;
var content = $（'。slider-content'）;
var slider = $（'。slider-list'）;
var elements = $（'。slider-list li'）。children（）;
var auto_slide_speed = 100; // ms
var timer;
var i = 0;
img.width（$（window）.width（））;
$（li）。width（$（window）.width（））;
img.height（$（'。slider-list'）。height（））;
content.height（$（'。slider-list'）。height（））;
var img_width = $（'。slider-list li'）。outerWidth（）;
console.log（$（'。slider-list li'）。length）;
console.log（elements）;
// calculam margin-left = -latimea unei imagini
// while（1）
// {
var left = parseInt（slider.css（'margin-left' ）） - img_width;
for（i = 0; i <= $（'。slider-list li'）。length; i ++）
{
console.log（i）;
slider.animate（{
margin-left：+ =+ left}，
1500，
function（）{
/ / $（'。slider-list li：last'）。after（$（'。slider-list li：first'））;
// $（'slider'）。css '：'0px'}）;
}）;
// left = left + left;
// $（'slider li'）。append（$（elements [i]）。clone（））;
}
console.log（i）;
}
去。
这里是一个 FIDDLE ，让您开始使用。
-
将所有图片放在隐藏的div中
-
>
-
通过更改左边距来动画处理图像
-
您可以通过设置间隔功能调整图像之间的时间
-
您可以通过动画时间调整滑动时间。
JS
var pictxtnumber = 1;
loadpictxt（pictxtnumber）;
var fadeintime = 500;
animatediv（）;
function animatediv（）
{
var number = 0;
var interval = setInterval（function（）{
pictxtnumber = pictxtnumber + 1;
if（pictxtnumber> 6）
{
pictxtnumber = 1;
}
loadpictxt（pictxtnumber）;
$（'＃stopanim'）。on（'click'，function（）{
clearInterval（interval）;
}）;
}，1000）;
}
function loadpictxt（num）
{
$（'。picturediv'）。html（''）;
$（。hiddenimage img：nth-child（+ num +））.clone（）。appendTo（'。picturediv'）;
$（'。picturediv img'）。css（'margin-left'，'100px'）;
$（'。picturediv img'）。animate（{marginLeft：0}，100）;
}
I'm trying to create an infinite slider using jquery. My page has some tags, with the width equal to the window width.
I want to slide every image after 10 seconds, and when the last image comes up and it's time for the first image to show, I want it to come still from the right.
Now I created a div with a big width, 10000px to hold my unordered list of images and they have display:none. My question is why when I'm giving margin-left: -1000px for one list item, the images appear to overlap one above the other, instead of appearing one after the other. I tried to take a screenshot but I don't know what is happening with my dropbox.
This is my CSS:
.slider {
position: relative;
height: 498px;
/*display: inline-block;*/
overflow: hidden;
}
.slider-list {
/*display: inline-block;*/
float: left;
padding: 0;
margin: 0;
width: 10000px
/*height: 496px;*/
}
.slider-list li{
display: inline-block;
/*float: left;*/
/*width: 100%;*/
height: 496px;
z-index: 1;
And here is my HTML:
<div class="slider">
<ul class="slider-list">
<li><img class="homepage-img"src="images/homepage.jpg"></li>
<li><img class="homepage-img"src="images/image1.jpg"></li>
<li><img class="homepage-img"src="images/image2.jpg"></li>
<li><img class="homepage-img"src="images/image3.jpg"></li>
<li><img class="homepage-img"src="images/image4.jpg"></li>
</ul>
The div with the class .slider will close after some more elements.
UPDATE:
This is my jQuery code since I written this post:
$(document).ready(function(){
slide();
});
slide = function() {
var img = $('.homepage-img');
var content = $('.slider-content');
var slider = $('.slider-list');
var elements = $('.slider-list li').children();
var auto_slide_speed = 100;//ms
var timer;
var i = 0;
img.width($(window).width());
$("li").width($(window).width());
img.height($('.slider-list').height());
content.height($('.slider-list').height());
var img_width = $('.slider-list li').outerWidth();
console.log($('.slider-list li').length);
console.log(elements);
//calculam margin-left = -latimea unei imagini
// while(1)
// {
var left = parseInt(slider.css('margin-left')) - img_width;
for(i = 0; i <= $('.slider-list li').length; i++)
{
console.log(i);
slider.animate({
"margin-left": "+=" + left},
1500,
function() {
// $('.slider-list li:last').after($('.slider-list li:first'));
// $('slider').css({'margin-left' : '0px'});
});
// left = left + left;
// $('slider li').append($(elements[i]).clone());
}
console.log(i);
}
With this, my slider ony goes as far as my list goes. How do I append the first item after the last item and so on so it can be infinite?
Here is a FIDDLE that will get you started.
Put all your images in a hidden div
Clone them and put them in the visible div
Animate the image by changing the left margin
You can adjust the time between images by the set interval function
You can adjust the slidein time by the animate time.
Because it's an infinite loop, I put the button in to stop the animation any time you want.
JS
var pictxtnumber = 1;
loadpictxt(pictxtnumber);
var fadeintime = 500;
animatediv();
function animatediv()
{
var number = 0;
var interval = setInterval(function() {
pictxtnumber = pictxtnumber + 1;
if(pictxtnumber > 6)
{
pictxtnumber = 1;
}
loadpictxt(pictxtnumber);
$('#stopanim').on('click', function(){
clearInterval(interval);
});
}, 1000);
}
function loadpictxt(num)
{
$('.picturediv').html('');
$(".hiddenimage img:nth-child(" + num + ") ").clone().appendTo('.picturediv');
$('.picturediv img').css('margin-left', '100px');
$('.picturediv img').animate({marginLeft: "0"}, 100);
}
这篇关于jquery无限滑块图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
