地图
广告
招租
←—
订阅
投稿
网站首页
特效代码
素材资源
seo优化
网络营销
网站建设
免费空间
工具软件
您的位置:
网站首页
>
特效代码
>
网页图片特效
> 正文:
一款很实用的左右滑动图片幻灯切换效果
网页图片特效
一款很实用的左右滑动图片幻灯切换效果
日期:2011-12-25 12:45:00 标签:
图片特效
图片切换
切换效果
滑动效果
幻灯片
∷
PC蛋蛋 赚积分 换Q币!>>>更多礼品兑换
<!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"> <head> <title>一款很实用的左右滑动图片幻灯切换效果丨芯晴网页特效丨CsrCode.Cn</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <!--把下面代码加到<head>与</head>之间--> <style type="text/css"> * { margin: 0; padding: 0; } body { text-align: center; } img { border: 0; } #slide { position: relative; overflow: hidden; margin: 10px auto 5px; background-color: #f5f5f5; border: #E7E7E7 solid 1px; width: 600px; height: 250px; } #slide table { border-collapse: collapse; } #slide td .container { position: relative; overflow: hidden; height: 250px; } #slide .container div { position: absolute; background: #000; filter: alpha(opacity=50); opacity: 0.5; cursor: pointer; line-height: 250px; text-align: center; font-size: 20px; font-weight: bold; color: #fff; width: 40px; height: 250px; } #slide .on .container div { display: none; } </style> </head> <body> <!--把下面代码加到<body>与</body>之间--> <div id="slide"> <table> <tr> <td class="on"> <div class="container"> <div onmouseover="slmShow(this.parentNode.parentNode);">></div> <a href="http://www.CsrCode.cn" title="1"><img src="/images/m01.jpg" width="440" height="250" alt="1"></a> </div> </td> <td> <div class="container"> <div onmouseover="slmShow(this.parentNode.parentNode);">></div> <a href="http://www.7caidy.com" title="2"><img src="/images/m02.jpg" width="440" height="250" alt="2"></a> </div> </td> <td> <div class="container"> <div onmouseover="slmShow(this.parentNode.parentNode);">></div> <a href="http://www.33567.cn" title="3"><img src="/images/m03.jpg" width="440" height="250" alt="3"></a> </div> </td> <td> <div class="container"> <div onmouseover="slmShow(this.parentNode.parentNode);">></div> <a href="http://changshi.csrcode.cn" title="4"><img src="/images/m04.jpg" width="440" height="250" alt="4"></a> </div> </td> <td> <div class="container"> <div onmouseover="slmShow(this.parentNode.parentNode);">></div> <a href="http://ww.33567.cn" title="5"><img src="/images/m05.jpg" width="440" height="250" alt="5"></a> </div> </td> </tr> </table> </div> <script type="text/javascript"> /* Author: AngusYoung Version: 20090724 */ function getCnter(oObj) { //为了减少几个字符写了这个函数 return oObj.getElementsByTagName('div')[0]; } function slmShow(oObj) { //触发滑动的 var oPrevObj=oCurrObj; oCurrObj=oObj; oPrevObj.className=''; oCurrObj.className='on'; slmPlay(oPrevObj); } function slmPlay(oObj) { //“播放”滑动效果的 getCnter(oCurrObj).style.width=getCnter(oCurrObj).offsetWidth+30+'px'; if (getCnter(oObj).offsetWidth>40) { getCnter(oObj).style.width=getCnter(oObj).offsetWidth-30+'px'; } if (getCnter(oCurrObj).offsetWidth<nTdwid) { setTimeout(function(){ slmPlay(oObj); },20); } else { getCnter(oObj).style.width='40px'; getCnter(oCurrObj).style.width=nTdwid+'px'; } } //得到幻灯所有的TD var oSlmO=document.getElementById('slide').getElementsByTagName('td'); //600是整宽,40是那个半透明的宽 var nTdwid=600-40*(oSlmO.length-1),oCurrObj=oSlmO[0]; //初始化一下各图的大小 for (i=1;i<oSlmO.length;i++) { oSlmO[i].className=''; getCnter(oSlmO[i]).style.width='40px'; } getCnter(oSlmO[0]).style.width=nTdwid+'px'; </script> </body> </html> <br><br><hr><p align="center"><font color=black>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网,只为兴趣与学习交流,不作商业用途。来源:中国站长天空</font></p>
提示:您可以先修改代码后再运行,复制和保存代码功能在Firefox下无效。
(
本站已开启防盗链,请根据代码中对应的url地址下载保存特效所需的图片、flash和js文件,请见谅,谢谢.
)
(本文由
CsrCode.CN
|
芯晴网页特效
收集丨
www.CsrCode.cn
)
本文网址:
上一篇:
实用的四种不同风格的jQuery版图片幻灯切换效果
下一篇:
简单实用的图片放大镜效果
评论信息
抱歉,本文暂停评论留言。
栏目分类
·
菜单导航特效
·
图层样式特效
·
链接文本特效
·
网页图片特效
·
日期时间特效
·
页面窗口特效
·
鼠标特效代码
·
网页背景特效
·
表格表单特效
·
状态栏特效
·
页面搜索特效
·
其他特效代码
热门排行
一款常用的漂亮的JS图片滑动…
jQuery 循环图片滚动切换效果…
JS实现伪3D轮播图片幻灯片切…
一款可控制切换的图片幻灯切…
JS横向带停顿的图片滚动特效…
JS图片滤镜 焦点图片自动切换…
JS模拟FLASH幻灯片图片切换效…
JS+CSS打造的非常漂亮的图片…
一款兼容所有浏览器的js图片…
JS实现的图片横向滚动展示效…
推荐信息
【荐】JS+CSS打造的黑色风格…
又一款图片的淡出淡入隐现效…
[酷] 图片的水韵效果,水中涟…
非常经典的图片相册展示效果…
jQuery版可控的图片滚动切换…
可选择的五种不同风格的图片…
九宫格图片半透明渐显效果
Js版淘宝图片切换,类似相册…
CSS+JS打造的非常不错的图片…
非常不错的图片导航菜单效果…
相关信息
状态栏文字来回出现
JS实现网页顶部会自动收缩的…
页面上浮动飞舞的xml动画效果…
CSS+jQuery版实用的图片放大…
背景不停变换颜色
芯晴网页特效
:
菜单导航特效
图形图像特效
图层样式特效
链接文本特效
日期时间特效
页面窗口特效
网页背景特效
鼠标特效代码
表格表单特效
状态栏特效
搜索特效
其他特效
网站首页
丨
网站地图
© Copyright 2009
CsrCode
-
芯晴网页特效
丨备案号:
浙ICP备15010075号-2
Alex排名
页面执行时间1.0625 s