当前位置：首页 > 资讯 > 技术文档

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

时间：2022-10-20 13:00 编辑：来源：阅读：
扫一扫，手机访问

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

前2个星期看到一位朋友说如何用JS实现http://women.sohu.com/这个页中FLASH图片切换效果，这两天有空，做了一个，大家评评：
【加载图片慢点请等会】

www.1sucai.cn 编程素材网 JS图片切换 :: 
<meta content="text/html; charset=gb2312" http-equiv="Content-Type"></meta> 
<meta content="editplus" name="generator"></meta> 
<meta content="eLore" name="author"></meta> 
<meta content="" name="keywords"></meta> 
<meta content="" name="description"></meta> 
 
 
 
<div id="js_F"> 
    <div class="div_img" id="div_img_0">[url=http://www.1sucai.cn/article/13517.htm#][img]http://files.jb51.net/upload/20080130202743347.jpg[/img]
</img>[/url][img]http://files.jb51.net/upload/20080130202744253.gif[/img]
</img></div> 
    <div class="div_img" id="div_img_1">[url=http://www.1sucai.cn/article/13517.htm#][img]http://files.jb51.net/upload/20080130202744477.jpg[/img]
</img>[/url][img]http://files.jb51.net/upload/20080130202744253.gif[/img]
</img></div> 
    <div class="div_img" id="div_img_2">[url=http://www.1sucai.cn/article/13517.htm#][img]http://files.jb51.net/upload/20080130202744721.jpg[/img]
</img>[/url][img]http://files.jb51.net/upload/20080130202744253.gif[/img]
</img></div> 
    <div class="div_img" id="div_img_3">[url=http://www.1sucai.cn/article/13517.htm#][img]http://files.jb51.net/upload/20080130202744468.jpg[/img]
</img>[/url][img]http://files.jb51.net/upload/20080130202744253.gif[/img]
</img></div> 
    <div class="div_img" id="div_img_4">[url=http://www.1sucai.cn/article/13517.htm#][img]http://files.jb51.net/upload/20080130202744674.jpg[/img]
</img>[/url][img]http://files.jb51.net/upload/20080130202744253.gif[/img]
</img></div> 
</div>

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

这个是有一点问题的，就是鼠标在移动的图片上滑过时，图片会停顿一下，解决方法是增加一个图片位置标记：-1为左边；0为移动中；1为右边，也可以增加一个移动方向的参数，具体就懒得写了。
下面再给一个自己写的图片切换效果：

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

全部评论(0)

上一篇：Bootstrap modal使用及点击外部不消失的解决方法
下一篇：js+div实现文字滚动和图片切换效果代码

资讯排行榜
更多>>