新手提问想要背景图片自动滑动切换应该如何实现？

Sevenky 2013-06-07 02:10:31

如题最后能给个能用的例子！

...全文

240 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

未知数 2013-06-12

打赏
举报

引用 10 楼 u010107080 的回复:

[quote=引用 8 楼 wzs_xyz 的回复:]

再问下哈我现在代码是这样的 <html> <head> <title>bgchange</title> <script language="javascript" src="jquery.js"></script> <script type="text/javascript"> var index = 0; var imgs = [ 'Desert.jpg','Lighthouse.jpg' ]; setInterval(function(){ $('#back').hide(2000,function(){ index++; if(index>=imgs.length) index = 0; $('#back').attr('src',imgs[index]).show(2000); }); },6000); </script> </head> <body> <div style="width:100%; height:100%; position:absolute;"> <img id="back" height = "100%" width = "100%" src="Desert.jpg" style="display:none; position:fixed;"></img> </div> </body> </html> 这样的效果是图片从左上角出现，填充满整个屏幕之后又缩小回去换下一张图。有什么办法可以让他平移进来在平移出去？[/quote] 你可以用animate函数，具体看jquery的API

Sevenky 2013-06-12

打赏
举报

引用 11 楼 wzs_xyz 的回复:

[quote=引用 10 楼 u010107080 的回复:] [quote=引用 8 楼 wzs_xyz 的回复:]

Sevenky 2013-06-12

打赏
举报

引用 8 楼 wzs_xyz 的回复:

Sevenky 2013-06-12

打赏
举报

引用 8 楼 wzs_xyz 的回复:

var index = 0; var imgs = [ 'Desert.jpg','Lighthouse.jpg' ]; setInterval(function(){ $('#back').hide(2000,function(){ index++; if(index>=imgs.length) index = 0; $('#back').attr('src',imgs[index]).show(2000); }); },6000);

谢谢~

未知数 2013-06-11

打赏
举报

var index = 0; var imgs = [ 'Desert.jpg','Lighthouse.jpg' ]; setInterval(function(){ $('#back').hide(2000,function(){ index++; if(index>=imgs.length) index = 0; $('#back').attr('src',imgs[index]).show(2000); }); },6000);

Sevenky 2013-06-09

打赏
举报

引用 6 楼 wzs_xyz 的回复:

[quote=引用 5 楼 u010107080 的回复:] [quote=引用 3 楼 wzs_xyz 的回复:] <div style="width:100%;height:300px;"> <img id="back" src="img/xxx.png" style="display:none;"></img> </div> <div style="position:absolute;margin-top:-300px;">内容</div> <script type="text/javascript"> $('#back').show(3000); </script> 就这样就行，然后用jquery写动画效果

jq的动画怎么写呢，实现多幅图片自动循环播放？[/quote] var imgs = [ 'img/img1.png','img/img2.png','img/img3.png' ]; setInterval(function(){ $('#back').hide(2000,function(){ index++; if(index>=imgs.length) index = 0; $('#back').attr('src',imgs[index]).show(2000); }); },6000); [/quote] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>bgchange</title> <script language="javascript" src="jquery.js"></script> <script type="text/javascript"> var imgs = [ 'Desert.jpg','Lighthouse.jpg' ]; setInterval(function(){ $('#back').hide(2000,function(){ index++; if(index>=imgs.length) index = 0; $('#back').attr('src',imgs[index]).show(2000); }); },6000); </script> </head> <body> <div style="width:100%; height:100%;"> <img id="back" src="Desert.jpg" style="display:none;"></img> </div> </body> </html> 这样吗？没有显示东西。。您看看哪里错了~

未知数 2013-06-09

打赏
举报

引用 5 楼 u010107080 的回复:

[quote=引用 3 楼 wzs_xyz 的回复:] <div style="width:100%;height:300px;"> <img id="back" src="img/xxx.png" style="display:none;"></img> </div> <div style="position:absolute;margin-top:-300px;">内容</div> <script type="text/javascript"> $('#back').show(3000); </script> 就这样就行，然后用jquery写动画效果

Sevenky 2013-06-09

打赏
举报

引用 3 楼 wzs_xyz 的回复:

<div style="width:100%;height:300px;"> <img id="back" src="img/xxx.png" style="display:none;"></img> </div> <div style="position:absolute;margin-top:-300px;">内容</div> <script type="text/javascript"> $('#back').show(3000); </script> 就这样就行，然后用jquery写动画效果

jq的动画怎么写呢，实现多幅图片自动循环播放？

未知数 2013-06-07

打赏
举报

引用 3 楼 wzs_xyz 的回复:

<div style="width:100%;height:300px;"> <img id="back" src="img/xxx.png" style="display:none;"></img> </div> <div style="position:absolute;margin-top:-300px;">内容</div> <script type="text/javascript"> $('#back').show(3000); </script> 就这样就行，然后用jquery写动画效果

未知数 2013-06-07

打赏
举报

<div style="width:100%;height:300px;"> <img id="back" src="img/xxx.png" style="display:none;"></img> </div> <div style="position:absolute;margin-top:-300px;">内容</div> <script type="text/javascript"> $('#back').show(3000); </script> 就这样就行，然后用jquery写动画效果

Sevenky 2013-06-07