地图		广告招租 ←—
订阅
投稿

您的位置：网站首页 > 特效代码 > 网页图片特效 > 正文：一款很实用的左右滑动图片幻灯切换效果

一款很实用的左右滑动图片幻灯切换效果

日期：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">

<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>

<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打造的非常不错的图片…
非常不错的图片导航菜单效果…