图片切换效果(基于jquery)
<p ><strong>chenjmdgjl</strong> 发表于 2010-1-12 11:40</p>
<h3>图片切换效果(基于jquery)</h3>完全是为了效果而写的代码，大家觉得有用就拿去用。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>杂学</title>
<style type="text/css">
<!--
*{padding:0; margin:0;}
body{font:12px Arial, Helvetica, sans-serif; background:#fff;}
img{border:0;}
ul{list-style-type:none;}
.switch{margin:20px auto; position:relative; width:704px; height:185px; border:solid 4px #ECEEED; background:#ECEEED;}
.switch_button{position:absolute; top:164px; right:4px; z-index:12; width:363px; height:17px;}
.switch_button dl{float:left; margin-right:6px;}
.switch_button dl dt{overflow:hidden; display:none; float:left; padding-left:8px; height:17px; line-height:17px; width:0; background:#F5F4F2;}
.switch_button dl dt a{color:#CA4B04; text-decoration:none;}
.switch_button dl dt a:hover{color:#900; text-decoration:underline;}
.switch_button dl dt,.switch_button dl dd{float:left; margin-left:6px;}
.switch_button dl dd{display:inline; overflow:hidden; height:13px; width:13px; line-height:14px; color:#f00; font-family:"宋体"; text-align:center; cursor:pointer; border:solid 2px #FFFDFE; background:#D5D7D4;}
.switch_button dl dd.current{font-weight:700; color:#F8F4F1; background:#f00;}
.l_button,.r_button{overflow:hidden; float:left; margin-top:3px; width:6px; height:11px; cursor:pointer;}
.l_button{background:url(http://www.cnblogs.com/images/cnblogs_com/chenjmdg/20100112/switch_button_bg.gif) no-repeat left top;}
.r_button{background:url(http://www.cnblogs.com/images/cnblogs_com/chenjmdg/20100112/switch_button_bg.gif) no-repeat left -11px;}
.swith_bg{position:absolute; z-index:11; height:26px; width:704px; top:159px; left:0; background:#000;}
.switch_img{position:relative; overflow:hidden; width:704px; height:185px;}
.switch_img ul li{position:absolute; overflow:hidden; z-index:0; left:704px; width:704px; height:185px; background:#fff;}
-->
</style>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
<!--
var DDSwitch = function(options){
this.SetOptions(options);
this.oSwithBg = this.options.oSwithBg;
this.oSwithButton = this.options.oSwithButton;
this.oSwithImg = this.options.oSwithImg;
this.oSwithRbutton = this.options.oSwithRbutton;
this.oSwithLbutton = this.options.oSwithLbutton;
this.oSwithClear = this.options.oSwithClear;
this.iSwithBg = $(this.oSwithBg);
this.iSwithButton = $("#" + this.oSwithButton + " > dd");
this.iSwithTitle = $("#" + this.oSwithButton + " > dt");
this.iSwithImg = $(this.oSwithImg + " > ul > li");
this.iSwithRbutton = $(this.oSwithRbutton);
this.oSwithLbutton = $(this.oSwithLbutton);
this.iSwithClear = $(this.options.oSwithClear)
this.timer = null;
this.init();
this.ClickButton();
var _this = this;
this.iSwithClear.bind("mouseover", function(){
_this.Stop();
}).bind("mouseout", function(){
_this.AutoButton("auto");
});
this.AutoButton("auto");
this.ClickRLbutton();
};
DDSwitch.prototype = {
SetOptions: function(options){
this.options = {
oSwithBg: ".swith_bg",
oSwithButton: "switchButton",
oSwithImg: ".switch_img",
oSwithRbutton: ".r_button",
oSwithLbutton: ".l_button",
oSwithClear: ".switch_button"
};
$.extend(this.options, options || {});
},
init: function(){
this.iSwithBg.css({ opacity: 0.3 });
$(this.iSwithButton).addClass("current");
$(this.iSwithTitle).css({ display: "block", width: "208px" });
$(this.iSwithImg).css({ "z-index": 1, left: 0 });
},
ClickButton: function(){
var _this = this;
for(var i = 0; i < this.iSwithButton.length; i++){
(function(){
var index = i;
$(_this.iSwithButton).click(function(){
if($(_this.iSwithButton).attr("class") == "current") return;
for(var j = 0; j < i; j++){
if(index == j){
$(this).addClass("current");
$(_this.iSwithTitle).css({ display: 'block' });
$(_this.iSwithTitle).animate({ width: "+=208px" }, 500);
$(_this.iSwithImg).css({ "z-index": 3 });
$(_this.iSwithImg).animate({ left: "-=704px" }, {
duration: 500,
complete: function(){
for(var k = 0; k < j; k++){
k == index ? $(this).css({ "z-index": 1 }) : $(_this.iSwithImg).css({ "z-index": 0, left: "704px" });
}
}
});
} else {
$(_this.iSwithTitle).stop(true, true);
$(_this.iSwithImg).stop(true, true);
$(_this.iSwithTitle).css({ display: "none", width: 0 });
$(_this.iSwithButton).removeClass();
}
}
})
})();
}
},
Pointer: function(){
for(var i = 0; i < this.iSwithButton.length; i++){
if($(this.iSwithButton).attr("class") == "current"){
return i;
}
}
},
Action: function(state, direction){
var _this = this, pointer = this.Pointer();
switch(state.toLowerCase()){
case "right":
if(pointer >= (_this.iSwithButton.length - 1)) { pointer = -1 }
break;
case "left":
if(pointer <= 0) { pointer = _this.iSwithButton.length }
break;
}
var index = pointer + direction;
for(var i = 0; i < _this.iSwithButton.length; i++){
if( i == (index)){
$(_this.iSwithButton).addClass("current");
$(_this.iSwithTitle).css({ display: 'block' });
$(_this.iSwithTitle).animate({ width: "+=208px" }, 500);
$(_this.iSwithImg).css({ "z-index": 3 });
$(_this.iSwithImg).animate({ left: "-=704px" }, {
duration: 500,
complete: function(){
for(var k = 0; k < i; k++){
k == (index) ? $(this).css({ "z-index": 1 }) : $(_this.iSwithImg).css({ "z-index": 0, left: "704px" });
}
}
});
} else {
$(_this.iSwithTitle).stop(true, true);
$(_this.iSwithImg).stop(true, true);
$(_this.iSwithTitle).css({ display: "none", width: 0 });
$(_this.iSwithButton).removeClass();
}
}
},
Stop: function(){
clearTimeout(this.timer);
},
AutoButton: function(){
var _this = this;
if(arguments == "auto"){
this.timer = window.setTimeout(function(){ _this.AutoButton("auto"); _this.Action("right", 1); }, 3000);
}
},
ClickRLbutton: function(){
var _this = this;
this.iSwithRbutton.click(function(){ _this.Action("right", 1); });
this.oSwithLbutton.click(function(){ _this.Action("left", -1); });
}
};
$(document).ready(function(){
var zz = new DDSwitch();
});
//-->
</script>
</head>
<body>
<div id="debug"></div>
<div class="switch">
<div class="switch_img">
<ul>
<li><img src="http://www.cnblogs.com/images/cnblogs_com/chenjmdg/20100112/img1.jpg" /></li>
<li><img src="http://www.cnblogs.com/images/cnblogs_com/chenjmdg/20100112/img2.jpg" /></li>
<li><img src="http://www.cnblogs.com/images/cnblogs_com/chenjmdg/20100112/img3.jpg" /></li>
<li><img src="http://www.cnblogs.com/images/cnblogs_com/chenjmdg/20100112/img4.jpg" /></li>
<li><img src="http://www.cnblogs.com/images/cnblogs_com/chenjmdg/20100112/img5.jpg" /></li>
</ul>
</div>
<div class="switch_button">
<div class="l_button"></div>
<dl id="switchButton">
<dd>1</dd>
<dt><a href="http://bbs.pqshow.com/#">2010百货直减总动员</a></dt>
<dd>2</dd>
<dt><a href="http://bbs.pqshow.com/#">当当网商店街年终回馈 免运费</a></dt>
<dd>3</dd>
<dt><a href="http://bbs.pqshow.com/#">当当网商店街年终回馈 免运费</a></dt>
<dd>4</dd>
<dt><a href="http://bbs.pqshow.com/#">名品冬鞋均价99元、199元、299元</a></dt>
<dd>5</dd>
<dt><a href="http://bbs.pqshow.com/#">品牌手机限时疯抢 最低128元！</a></dt>
</dl>
<div class="r_button"></div>
</div>
<div class="swith_bg"></div>
</div>
</body>
</html><p ><strong>秋心</strong> 发表于 2010-1-12 12:31</p>
代码有错，看看我的 http://www.einsun.cn<p ><strong>chenjmdgjl</strong> 发表于 2010-1-12 13:06</p>
原帖由 秋心 于 2010-1-12 12:31 发表 http://bbs.blueidea.com/images/common/back.gif
代码有错，看看我的 http://www.einsun.cn
什么地方有错，请指明，谢谢。<p ><strong>cxlan2002</strong> 发表于 2010-1-12 14:18</p>
原帖由 秋心 于 2010-1-12 12:31 发表 http://bbs.blueidea.com/images/common/back.gif
代码有错，看看我的 http://www.einsun.cn
真是有心人
打广告你也不能误导别人吧:o<p ><strong>qloog</strong> 发表于 2010-1-14 17:12</p>
楼主的效果不错！<p ><strong>lzr174</strong> 发表于 2010-1-15 10:34</p>
效果不错，谢谢楼主了。<p ><strong>edu9811</strong> 发表于 2010-1-15 10:40</p>
代码的却有错误！<p ><strong>waitfly</strong> 发表于 2010-1-15 14:28</p>
请问要实现这种效果是不是一定要上网啊？不上网能实现这种效果不？
我只想在我们内部的局域网上使用！<p ><strong>chenjmdgjl</strong> 发表于 2010-1-15 18:02</p>
原帖由 waitfly 于 2010-1-15 14:28 发表 http://bbs.blueidea.com/images/common/back.gif
请问要实现这种效果是不是一定要上网啊？不上网能实现这种效果不？
我只想在我们内部的局域网上使用！
不需要上网，你把文件都下载到本地即可。<p ><strong>chenjmdgjl</strong> 发表于 2010-1-15 18:03</p>
原帖由 edu9811 于 2010-1-15 10:40 发表 http://bbs.blueidea.com/images/common/back.gif
代码的却有错误！
你把代码考到本地看看还有没有错误，要是还有请描述一下是什么错误，谢谢。<p ><strong>declachen</strong> 发表于 2010-1-20 15:08</p>
在本地就可以预览了
:D 谢谢楼主了<p ><strong>classic99</strong> 发表于 2010-2-1 10:24</p>
不是把！推荐的帖子也是这样的？？？？<p ><strong>woliuni</strong> 发表于 2010-2-1 10:27</p>
我这一直没看图片出来 傲游 ie7。下载到本地就没事。。。
[ 本帖最后由 woliuni 于 2010-2-1 10:30 编辑 ]<p ><strong>sLvyi</strong> 发表于 2010-2-5 00:23</p>
google js库引用的问题，刷新一下就没问题了
看后感悟了点，收下了
static/image/common/sigline.gif
http://img2081.poco.cn/mypoco/myphoto/20110719/00/6035253720110719001722089.png
页:
[1]