一个JavaScript版的图片幻灯切换特效，仿淘宝网的效果，内含详细的参数说明，引入了两个封闭好的Js函数库，使用前请先顺着地址自行下载。JS焦点图切换，左右滚动切换代码复制即可使用。
<!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 ">
<style type= " text/css ">
ul,li{margin: 0;padding: 0;}
img{border:none;}
ul li{list-style:none;}
#idSlider,#idSlider img{width:480px;height:280px;}
#idSlider{overflow:hidden;position:relative;}
#taobaolike{position:relative;width:480px;height:280px;overflow:hidden;}
#taobaolike #taobaopage{position:absolute;height:22px;bottom: 0;left: 0;width:481px;z-index: 19;}
#taobaolike #taobaopage a{display:block; float:left;width:160px;font-size:12px;color:# 000;text-align:center;text-decoration:none;line-height:22px;background-color:#fff;opacity: 0.5;filter:Alpha(Opacity= 50);}
#taobaolike #taobaopage a.on{opacity: 0.8;filter:Alpha(Opacity= 80);}
</style>
</head>
<body>
<div id= " taobaolike ">
<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>
</ul>
<div id= " taobaopage ">
<a href= " # " class= " on ">红叶传情</a>
<a href= " # ">野花绽放</a>
<a href= " # ">往事如茶</a>
</div>
</div>
<script type= " text/javascript " src= " http://www.CsrCode.cn/imagesforcode/201206/Tween.js "></script>
<script type= " text/javascript " src= " http://www.CsrCode.cn/imagesforcode/201206/XScroll.js "></script>
<script type= " text/javascript ">
// delay：自动滚动间隔时间，默认为4000
// how参数指定切换效果：0－淡入淡出，1－两张图片同时滚动，2－当前图片不动、下一张图片覆盖上来，3－当前图片飞走、显示出下一张
// direct参数指定方向：0123分别表示左上右下（当how不为0时有效）
var taobao=XScroll( ' idSlider ',{delay: 3000,direct: 1,how: 1,pager: ' taobaopage '});
</script>
</body>
</html>
<br><br><br>第一次运行本代码，请刷新一下页面先~~<br><br>所需js文件：<a href= " http://www.CsrCode.cn/imagesforcode/201206/Tween.js ">Tween.js</a> <a href= " http://www.CsrCode.cn/imagesforcode/201206/XScroll.js ">XScroll.js</a><br><hr><p align= " center "><font color=black>本特效由 <a target= " _blank " 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 ">
<style type= " text/css ">
ul,li{margin: 0;padding: 0;}
img{border:none;}
ul li{list-style:none;}
#idSlider,#idSlider img{width:480px;height:280px;}
#idSlider{overflow:hidden;position:relative;}
#taobaolike{position:relative;width:480px;height:280px;overflow:hidden;}
#taobaolike #taobaopage{position:absolute;height:22px;bottom: 0;left: 0;width:481px;z-index: 19;}
#taobaolike #taobaopage a{display:block; float:left;width:160px;font-size:12px;color:# 000;text-align:center;text-decoration:none;line-height:22px;background-color:#fff;opacity: 0.5;filter:Alpha(Opacity= 50);}
#taobaolike #taobaopage a.on{opacity: 0.8;filter:Alpha(Opacity= 80);}
</style>
</head>
<body>
<div id= " taobaolike ">
<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>
</ul>
<div id= " taobaopage ">
<a href= " # " class= " on ">红叶传情</a>
<a href= " # ">野花绽放</a>
<a href= " # ">往事如茶</a>
</div>
</div>
<script type= " text/javascript " src= " http://www.CsrCode.cn/imagesforcode/201206/Tween.js "></script>
<script type= " text/javascript " src= " http://www.CsrCode.cn/imagesforcode/201206/XScroll.js "></script>
<script type= " text/javascript ">
// delay：自动滚动间隔时间，默认为4000
// how参数指定切换效果：0－淡入淡出，1－两张图片同时滚动，2－当前图片不动、下一张图片覆盖上来，3－当前图片飞走、显示出下一张
// direct参数指定方向：0123分别表示左上右下（当how不为0时有效）
var taobao=XScroll( ' idSlider ',{delay: 3000,direct: 1,how: 1,pager: ' taobaopage '});
</script>
</body>
</html>
<br><br><br>第一次运行本代码，请刷新一下页面先~~<br><br>所需js文件：<a href= " http://www.CsrCode.cn/imagesforcode/201206/Tween.js ">Tween.js</a> <a href= " http://www.CsrCode.cn/imagesforcode/201206/XScroll.js ">XScroll.js</a><br><hr><p align= " center "><font color=black>本特效由 <a target= " _blank " href= " http://www.CsrCode.cn " target= " _blank ">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。</font></p>
516
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
