作家
登录

纯js无flash仿搜狐女人频道FLASH图片切换效果代码

作者: 来源:www.28hudong.com 2013-03-30 03:10:06 阅读 我要评论

前2个星期看到一位朋友说如何用JS实现http://women.sohu.com/这个页中FLASH图片切换效果,这两天有空,做了一个,大家评评: 【加载图片慢点请等会】 www.jb51.net 脚本之家 JS图片切换 :: * { margin:0; padding:0; } body { margin:0; color:#88c; background:#333; } img { margin:0; padding:0; border:0; } #js_F { position:relative; top:10px; left:10px; overflow:hidden; width:395px; height:185px; background:#33c; } .div_img { position:absolute; top:0; width:295px; height:185px; cursor:pointer; } #div_img_0 { z-index:5; left:0; } #div_img_1 { z-index:4; left:25px; } #div_img_2 { z-index:3; left:50px; } #div_img_3 { z-index:2; left:75px; } #div_img_4 { z-index:1; left:100px; } [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]这个是有一点问题的,就是鼠标在移动的图片上滑过时,图片会停顿一下,解决方法是增加一个图片位置标记:-1为左边;0为移动中;1为右边,也可以增加一个移动方向的参数,具体就懒得写了。 下面再给一个自己写的图片切换效果: 脚本之家 www.jb51.net JS图片切换 :: * { margin:0; padding:0; } body { margin:0; color:#88c; background:#333; } img { margin:0; padding:0; border:0; } #js_F { position:relative; top:10px; left:10px; overflow:hidden; width:270px; height:185px; background:#33c; } #js_F img{ position:absolute; top:0; left:0; width:270px; height:185px; } [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  推荐阅读

  用JavaScript 判断用户使用的是 IE6 还是 IE7

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]js判断IE6/IE7/FF 复制代码 代码如下:if (window.XMLHttpRequest) { //Mozilla, Safari,IE7 alert('Mozilla, Safari,IE7 '); if(!window.ActiveXObject){ // M>>>详细阅读


本文标题:纯js无flash仿搜狐女人频道FLASH图片切换效果代码

地址:http://www.17bianji.com/kaifa2/JS/29844.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)