给大家分享一款图片的轮换效果,其实通过这个例子,你可以自己稍加点改动,就可以做出另外很多的效果的,先简单介绍一下构思:在图片轮换的时候,让前一张左移,同时让接下来展示的那一张右移,各移动一半的时候,两张图片就反方向移动,只是前一张变到后面,后一张变到前面了。实现原理看一下代码就明白了,如果你想做成其它效果,只需要改变js里面的移动方法就行了,比如把移动效果换成透明效果等。 看下面的例子吧:
CODE <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>picmove</title> <link type="text/css" rel="stylesheet" href="http://www.uideas.cn/download/20100524.css"> <script language="javascript" type="text/javascript" src="http://www.uideas.cn/download/20100524.js"></script> </head> <body> <div id="picScroll"> <div class="picCov"> <div id="picB"> <a href=""><img src="" width="600" height="270" border="0"></a> </div> <div id="picF"> <a href=""><img src="" width="600" height="270" border="0"></a> </div> <div id="picNumBg"><img src="http://www.uideas.cn/download/images/img/bg.png"></div> <div id="picNameBg"><img src="http://www.uideas.cn/download/images/img/picName.png"></div> <div id="picName"><a href=""></a></div> <div id="picNum"> <div id="picCount"></div> </div> <div id="picStr" style="display:none;"> <a href="#" title="累么"><img src="http://www.uideas.cn/download/images/img/1.jpg" border="0"></a> <a href="#" title="酷么"><img src="http://www.uideas.cn/download/images/img/2.jpg" border="0"></a> <a href="#" title="背影"><img src="http://www.uideas.cn/download/images/img/3.jpg" border="0"></a> <a href="#" title="帅么"><img src="http://www.uideas.cn/download/images/img/4.jpg" border="0"></a> <a href="#" title="秀么"><img src="http://www.uideas.cn/download/images/img/5.jpg" border="0"></a> <a href="#" title="疯了"><img src="http://www.uideas.cn/download/images/img/6.jpg" border="0"></a> </div> </div> </div> </body> </html> [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
相关下载: 完整演示实例下载:20100524.rar
Genial fill someone in on and this fill someone in on helped me alot in my college assignement. Say thank you you for your information.
Genial fill someone in on and this fill someone in on helped me alot in my college assignement. Say thank you you for your information.