JS+CSS打造的交错式图片幻灯切换效果丨芯晴网页特效丨CsrCode.Cn
<!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>JS+CSS打造的交错式图片幻灯切换效果丨芯晴网页特效丨CsrCode.Cn</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
ul,li{margin:0;padding:0;}
img{border:none;}
ul li{list-style:none;}
#idSlider,#idSlider img{width:450px;height:296px;}
#idSlider{overflow:hidden;position:relative;}
.num{position:absolute;right:5px;bottom:5px;z-index:20;}
.num li{float:left;list-style:none;color:#fff;text-align:center;line-height:20px;width:20px;height:20px;font-family:Arial;font-size:12px;cursor:pointer;margin:1px;background-color:#060a0b;}
.num li.on{font-size:14px;background-color:#ce0609;font-weight:bold;}
#idContainer{width:450px;height:296px;overflow:hidden;position:relative;}
</style>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div class="container" id="idContainer">
<ul id="idSlider">
<li><a href="#"><img src="http://www.csrcode.cn/images/m01.jpg"></a></li>
<li><a href="#"><img src="http://www.csrcode.cn/images/m02.jpg"></a></li>
<li><a href="#"><img src="http://www.csrcode.cn/images/m03.jpg"></a></li>
<li><a href="#"><img src="http://www.csrcode.cn/images/m04.jpg"></a></li>
</ul>
<ul id="slider2p" class="num">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script type="text/javascript" src="http://www.csrcode.cn/imagesforcode/201207/Tween.js"></script>
<script type="text/javascript" src="http://www.csrcode.cn/imagesforcode/201207/XScroll.js"></script>
<script type="text/javascript">
//delay：自动滚动间隔时间，默认为4000
//how参数指定切换效果：0－淡入淡出，1－两张图片同时滚动，2－当前图片不动、下一张图片覆盖上来，3－当前图片飞走、显示出下一张
//direct参数指定方向：0123分别表示左上右下（当how不为0时有效）
var xscroll=XScroll('idSlider',{delay:3000,how:4,direct:1,Tween:Tween.QuartOut,pager:'slider2p'});
</script>
</body>
</html>
<br>第一次运行本代码，请刷新一下本页面先~~~<br>所需js文件：<a href="http://www.csrcode.cn/imagesforcode/201207/Tween.js">Tween.js</a> 、 <a href="http://www.csrcode.cn/imagesforcode/201207/XScroll.js">XScroll.js</a><br><br><hr><p align="center"><font color=black>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。</font></p>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS+CSS打造的交错式图片幻灯切换效果丨芯晴网页特效丨CsrCode.Cn</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
ul,li{margin:0;padding:0;}
img{border:none;}
ul li{list-style:none;}
#idSlider,#idSlider img{width:450px;height:296px;}
#idSlider{overflow:hidden;position:relative;}
.num{position:absolute;right:5px;bottom:5px;z-index:20;}
.num li{float:left;list-style:none;color:#fff;text-align:center;line-height:20px;width:20px;height:20px;font-family:Arial;font-size:12px;cursor:pointer;margin:1px;background-color:#060a0b;}
.num li.on{font-size:14px;background-color:#ce0609;font-weight:bold;}
#idContainer{width:450px;height:296px;overflow:hidden;position:relative;}
</style>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div class="container" id="idContainer">
<ul id="idSlider">
<li><a href="#"><img src="http://www.csrcode.cn/images/m01.jpg"></a></li>
<li><a href="#"><img src="http://www.csrcode.cn/images/m02.jpg"></a></li>
<li><a href="#"><img src="http://www.csrcode.cn/images/m03.jpg"></a></li>
<li><a href="#"><img src="http://www.csrcode.cn/images/m04.jpg"></a></li>
</ul>
<ul id="slider2p" class="num">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script type="text/javascript" src="http://www.csrcode.cn/imagesforcode/201207/Tween.js"></script>
<script type="text/javascript" src="http://www.csrcode.cn/imagesforcode/201207/XScroll.js"></script>
<script type="text/javascript">
//delay：自动滚动间隔时间，默认为4000
//how参数指定切换效果：0－淡入淡出，1－两张图片同时滚动，2－当前图片不动、下一张图片覆盖上来，3－当前图片飞走、显示出下一张
//direct参数指定方向：0123分别表示左上右下（当how不为0时有效）
var xscroll=XScroll('idSlider',{delay:3000,how:4,direct:1,Tween:Tween.QuartOut,pager:'slider2p'});
</script>
</body>
</html>
<br>第一次运行本代码，请刷新一下本页面先~~~<br>所需js文件：<a href="http://www.csrcode.cn/imagesforcode/201207/Tween.js">Tween.js</a> 、 <a href="http://www.csrcode.cn/imagesforcode/201207/XScroll.js">XScroll.js</a><br><br><hr><p align="center"><font color=black>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。</font></p>
网页特效：www.CsrCode.cn 快播电影：www.33567.cn丨www.7caidy.com
