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

2016-02-19 09:02 13 1 收藏

岁数大了，QQ也不闪了，微信也不响了，电话也不来了，但是图老师依旧坚持为大家推荐最精彩的内容，下面为大家精心准备的纯js无flash仿搜狐女人频道FLASH图片切换效果代码，希望大家看完后能赶快学习起来。

【 tulaoshi.com - Web开发】

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"> <head> <title>www.jb51.net 脚本之家 JS图片切换 ::</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="generator" content="editplus" /> <meta name="author" content="eLore" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <style type="text/css"> * { 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; } </style> </head> <body>  <img src="http://img.tulaoshi.com/image/20160219/b6b19de9c3f7b3a47112b2e6f3fc6c59.jpg" /><img src="http://img.tulaoshi.com/image/20160219/00f437e4bfaf82c3376b4754ef0f93e5.gif" onmouseover="jsf_mmove(0)" /> <img src="http://img.tulaoshi.com/image/20160219/ca6d437346957bc401d2e0be98f6bac4.jpg" /><img src="http://img.tulaoshi.com/image/20160219/00f437e4bfaf82c3376b4754ef0f93e5.gif" onmouseover="jsf_mmove(1)" /> <img src="http://img.tulaoshi.com/image/20160219/2afcc0582c8f49c58433124f05390c42.jpg" /><img src="http://img.tulaoshi.com/image/20160219/00f437e4bfaf82c3376b4754ef0f93e5.gif" onmouseover="jsf_mmove(2)" /> <img src="http://img.tulaoshi.com/image/20160219/639a1c7d6c7060389ed57c9398990e19.jpg" /><img src="http://img.tulaoshi.com/image/20160219/00f437e4bfaf82c3376b4754ef0f93e5.gif" onmouseover="jsf_mmove(3)" /> <img src="http://img.tulaoshi.com/image/20160219/9c90a879349c1aece97d5c06878378c7.jpg" /><img src="http://img.tulaoshi.com/image/20160219/00f437e4bfaf82c3376b4754ef0f93e5.gif" onmouseover="jsf_mmove(4)" />   </body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
这个是有一点问题的，就是鼠标在移动的图片上滑过时，图片会停顿一下，解决方法是增加一个图片位置标记：-1为左边；0为移动中；1为右边，也可以增加一个移动方向的参数，具体就懒得写了。
下面再给一个自己写的图片切换效果：

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

来源:http://www.tulaoshi.com/n/20160219/1589236.html

上一篇： Ubuntu Unity更改程序图标的步骤
下一篇： javascript replace方法与正则表达式

看过《纯js无flash仿搜狐女人频道FLASH图片切换效果代码》的人还看了以下文章更多>>

Flash教程：运用遮罩制作仿3D效果

标签： flash教程

本文由中国 wytan 原创，转载请保留此信息！效果演示： [next] 简单制作方法：一、把几幅图裁剪同样大的正方形图片导入到库。二、把每张图拖到主场景，各自转换成图片元件。三、插入一个电影剪辑，命名为遮照。拖出一幅图，让其全居中。执行视图－标尺，拉出4条辅助线，对齐图片边缘。删除图片用任意颜色画一个无边线...

嘟嘟语音怎样在频道公告内插入图片、flash、视频等内容？

嘟嘟语音怎样在频道公告内插入图片、flash、视频等内容？首先，频道积分需要达到3000积分。当频道积分满3000之后，既可以在频道公告当中插入图片、Flash或音频及视频文件了。具体操作方法：由频道创建者(OW)或者频道管理点击该频道的名称，用鼠标右键选择频道信息。在弹出的频道设置窗口中选择频道公告标签。...

Flash教程：制作漂亮流动的图片效果

标签： flash教程

本文由中国 sanbos 原创，转载请保留此信息！本系列Flash教程由中国Flash互助课堂专为Flash新手制作，更多教程和练习请点击这里，在这里有系列的教程、练习，并有老师对练习进行点评与指导，欢迎朋友们的光临！效果演示： [next] 现在开始制作： 1. 新建一flash文档,550x400。 2. 导入几张图片，几张就随你高兴...

一段非常简单的让图片自动切换js代码

标签： Web开发

1script language =javascript 2var curIndex=0; 3//时间间隔单位毫秒 4var timeInterval=1000; 5var arr=new Array(); 6arr[0]="1.jpg"; 7arr[1]="2.jpg"; 8arr[2]="3.jpg"; 9arr[3]="4.jpg"; 10arr[4]="5.jpg"; 11arr[5]="6.jpg"; 12arr[6]="7.jpg"; 13setInterval(changeImg,timeInterval...

特漂亮的JS图片排列旋转效果代码

标签： Web开发

了下代码,感觉用数组模拟有些僵硬,自己重新写了一个,请大家来pp! body{background:black} .point{position:absolute;height:75px;border:1px silver solid} #round{position:absolute;background:red;width:200px;height:200px;} var r=200,dv=0.01,w=100,x=400;y=100,pn=8 var pi=3.1415926575,d=pi/2; var pd=Math.asin(w/2/r);ed=pi*...

查看更多精彩>>