Javascript Jquery图像在幻灯片中从左向右过渡并淡入
我有一个幻灯片和6个图形。我想将前两个图形从左向右滑动,然后第三个图形淡入并粘住,然后将其余图形从左向右滑动。我可以用这两种效果中的任何一种来创建幻灯片,但是我如何才能为某些效果滑入,为某些效果淡入?下面是我的代码Javascript Jquery图像在幻灯片中从左向右过渡并淡入,javascript,jquery,html,css,slideshow,Javascript,Jquery,Html,Css,Slideshow,我有一个幻灯片和6个图形。我想将前两个图形从左向右滑动,然后第三个图形淡入并粘住,然后将其余图形从左向右滑动。我可以用这两种效果中的任何一种来创建幻灯片,但是我如何才能为某些效果滑入,为某些效果淡入?下面是我的代码 <div id='slider_container'> <div id="slides"> <img src='images/Team-Up-wTag_CMYK_Over-White.jpg' /> <
<div id='slider_container'>
<div id="slides">
<img src='images/Team-Up-wTag_CMYK_Over-White.jpg' />
<img src='images/Together-all-3-01.jpg' />
<img src='images/One-Team-One-Focus-RESIZED.jpg' />
<img src='images/Orlando_Seaworld_ExteriorSeaworldView.jpg' />
<img src='images/DSC_1465.JPG' />
<img src='images/DSC_1470.JPG' />
</div>
</div>
<script type="text/javascript">
$(window).load(function() {
var slideContainer = $('#slider_container'), slidesHolder = $(slideContainer).children(), slideWidth = slideContainer.width(), slidePos = 0, slides = $(slidesHolder).children(), slideTotal = slides.length, currentSlide = 0, delay = 3000, slideTime = 800;
$(slideContainer).css({
'overflow': 'hidden',
'position': 'relative'
});
$(slidesHolder).css({
'position': 'absolute'
});
for (var i = 0; i < slides.length; i++) {
$(slides[i]).css({
'position': 'absolute',
'top': '0',
'left': slidePos + 'px'
});
slidePos = slidePos + slideWidth;
}
$(slidesHolder).css('width', slidePos + slideWidth);
$(slides).first().clone().css({
'left': slidePos + 'px'
}).appendTo(slidesHolder);
function animate() {
$(slidesHolder).delay(delay).animate({
left: '-=' + slideWidth
}, slideTime, function() {
if (currentSlide < slideTotal - 1) {
currentSlide++;
animate();
} else {
$(slidesHolder).css({
'left': 0
});
currentSlide = 0;
animate();
}
});
}
animate();
});
</script>
$(窗口)。加载(函数(){
var slideContainer=$(“#slider_container”)、slideshalder=$(slideContainer.children()、slideWidth=slideContainer.width()、slidePos=0、slides=$(slideshalder.children()、slideTotal=slides.length、currentlide=0、delay=3000、slideTime=800;
$(slideContainer).css({
“溢出”:“隐藏”,
“位置”:“相对”
});
$(幻灯片文件夹).css({
“位置”:“绝对”
});
对于(变量i=0;i
好的,自从你发布这篇文章以来,我一直在做这篇文章,我想我已经找到了第一个剪辑
我有很多缺点,但我最大的缺点之一是。动画和动画的概念相互重叠。所以我找到了一些不错的代码,并对其进行了修改
这只是以完全相同的方式为四个图像设置动画
这允许您通过设置“距离=0”来选择停止哪一个
带“停止”的JS
var$imgs=$('img');
无功电流=0;
距离=75;
动画($imgs[当前]);
函数动画(元素)
{
$(元素)。设置动画(
{
不透明度:“1”,
左:'+='+距离
},
2000,
函数(){
$(元素)。设置动画(
{
不透明度:“0”,
左:'+='+距离
},
2000,
函数(){
如果(当前<$imgs.长度-1)
{
如果(当前==1)
{距离=0;}
其他的
{距离=75;}
++电流;
动画($imgs[当前]);
}
}
);
}
);
}
我的教学重点是,在最后一个函数调用中,必须对动画进行任何奇特的操作,否则动画将相互覆盖
很好的锻炼 为了什么?提供相关的问题代码你能提供更多的信息,并向我们展示你迄今为止的尝试吗?对不起,我忘记发布我的代码了。我基本上创建了一个幻灯片,从左到右滑动图形。但我不知道如何更新它,使其中一个过渡是淡入和坚持。在六个图形中,我试图让所有其他的幻灯片从左向右滑动,但第三个已经淡入效果。
var $imgs = $('img');
var current = 0;
distance = 75;
animate($imgs[current]);
function animate(element)
{
$(element).animate(
{
opacity: '1',
left: '+=' + distance
},
2000,
function() {
$(element).animate(
{
opacity: '0',
left: '+=' + distance
},
2000,
function(){
if (current < $imgs.length-1)
{
if (current == 1)
{distance = 0;}
else
{distance = 75;}
++current;
animate($imgs[current]);
}
}
);
}
);
}