JavaScript图像滑块在图像之间不褪色
在YouTube的帮助下,我使用JavaScript制作了一个图像滑块,当图像发生变化时,它们不会相互消失,而是显示为“跳跃”,如下所示: 有人能解释/更新代码,让它们彼此消失吗 谢谢 代码:JavaScript图像滑块在图像之间不褪色,javascript,html,css,slider,Javascript,Html,Css,Slider,在YouTube的帮助下,我使用JavaScript制作了一个图像滑块,当图像发生变化时,它们不会相互消失,而是显示为“跳跃”,如下所示: 有人能解释/更新代码,让它们彼此消失吗 谢谢 代码: //此简单函数按ID返回元素的对象引用 函数ux){ “严格使用”; 返回文档.getElementById(x);} //气泡数组、气泡索引和setInterval()变量的变量 var ba,bi=0,intrvl; //bca-气泡内容数组。把你的内容放在这里。 变量bca=[ '', '',
//此简单函数按ID返回元素的对象引用
函数ux){
“严格使用”;
返回文档.getElementById(x);}
//气泡数组、气泡索引和setInterval()变量的变量
var ba,bi=0,intrvl;
//bca-气泡内容数组。把你的内容放在这里。
变量bca=[
'',
'',
'
这不是引导项目符号,但它可以在单击和滑动时工作。也许是一个解决方案
这里有一个
$(文档).ready(函数(){
$('#rotator>a.arrow.left')。单击(函数(e){
e、 防止违约;
var rotator=$(“#rotator.images”);
rotator.children('.imageHolder').first().animate({marginLeft:“-=310px”},function(){
$(this).appendTo(rotator).removeAttr(“样式”);
});
});
$('#rotator>a.arrow.right')。单击(函数(e){
e、 防止违约;
var rotator=$(“#rotator.images”);
rotator.children('.imageHolder').last().prependTo(rotator.removeAttr(“style”).css(“左边距”),“-310px”).animate({marginLeft:“0”});
});
});
旋转器{宽度:310px;高度:220px;位置:相对;溢出:隐藏;位置:相对;}
#图像{宽度:1000%;位置:相对;z索引:1;}
#旋转器a.箭头{宽度:18px;高度:41px;显示:块;z索引:2;文本缩进:-50000em;位置:绝对;顶部:89px;}
#旋转器a.arrow.left{left:0;背景图像:url(“http://www.rachelgallen.com/images/leftarrow.png“”;背景重复:无重复;背景大小:包含;}
#rotator a.arrow.right{right:0;背景图像:url(“http://www.rachelgallen.com/images/rightarrow.png“”;背景重复:无重复;背景大小:包含;}
#rotator.images.imageHolder{宽度:310px;浮动:左;高度:220px;位置:相对;}
#rotator.images.imageHolder跨距{宽度:290px;边距:10px;颜色:#FFF;字体大小:18px;位置:绝对;顶部:0;左侧:0;z索引:4;}
#旋转器.图像.图像支架img{宽度:310px;高度:220px;位置:绝对;显示:块;顶部:0;左侧:0;z索引:3;}
雏菊
雪花莲
山
黄花
您想要这样或这样的东西吗?两者都很好,但仍希望将项目符号导航放置在底部的图像上。看了之后,“滑动”过渡将是最好的!不完全是我想要的,但帮助我实现了我的解决方案:)