<style>
div,ul, ol, li, h1,h2, p{margin:0;padding:0}
body{font-size:0.8em;letter-spacing:1px;font-family:"微軟雅黑"; line-height:1.2}
a{color:#047;text-decoration:none}
a:hover{color:#a40000;text-decoration:none}
h1{font-size:1em; font-weight:normal; line-height:1.8em}
h1 a{background:#CFF; padding:2px 3px; text-decoration:none}
h1 a:hover{background:#eee; text-decoration:underline}
h2,h3{font-size:1em; font-weight:normal; color:#a40000; margin:1em auto; position:relative}
h3{color:#888; font-weight:bold}
ul,li{list-style:none}
/*第一個幻燈樣式[email protected]*/
#i_focus{width:460px; height:231px;background:#eee; padding:5px 5px 0 5px; margin:0 auto }
#i_focus_pic{width:376px; height:226px;display:inline; position:relative;float:left;overflow:hidden}
#i_focus_piclist { position:absolute}
#i_focus_piclist li { width:378px; height:226px; overflow:hidden; display:none}
#i_focus_piclist img { width:374px; height:224px; border:1px solid #fff}
#i_focus_btn {float:right; width:77px}
#i_focus_btn li {cursor:pointer; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)}
#i_focus_btn img { width:75px; height:70px; border:1px solid #fff; margin-bottom:2px}
#i_focus_btn .i_cur {opacity:1; -moz-opacity:1; filter:alpha(opacity=100)}
#i_focus_opdiv { position:absolute; left:0; bottom:0; width:374px; height:40px; background:#000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); border:1px solid #fff; border-top:0}
#i_focus_tx span{font-family:"微軟雅黑"; font-size:16px; font-weight:bold; line-height:22px; display:block}
#i_focus_tx { position:absolute; left:8px; bottom:2px; color:#FFF}
#i_focus_tx .normal {display:none}
/*第二個幻燈樣式[email protected]*/
.slides { position:relative; overflow:hidden; width:704px; height:250px; border:5px solid #eee; margin:0 auto }
.slide-pic{ overflow:hidden;width:703px}
.slide-pic img{ width:701px; height:248px;border:1px solid #E4E4E4}
.slide-pic li { display:none}
.slide-pic li.cur { display:block}
.slide-li { position:absolute; left:0; bottom:0; }
.slide-li li { float:left; width:175px; height:30px; line-height:30px; margin-right:1px; text-align:center}
.slide-li a:visited,.slide-li a:link { display:block; width:174px; height:30px; font-size:14px; color:#FFF}
.slide-li .cur a:visited, .slide-li .cur a:link, .slide-li a:hover { color:#333; text-decoration:none}
.op li { background:#666; opacity: 0.6; filter:alpha(opacity=60)}
.op li.cur { background:#FFF}
.slide-txt span { display:none}
</style>
</head>
<body class="box">
<h1><a href="http://mrthink.net/">Mr.Think的個人博客</a><br />@專注前端技術,熱愛PHP,崇尚簡單生活.</h1>
<h2>兩個基於jQuery的漸隱漸顯圖片輪換幻燈片,比如實用的[email protected]@www.MrThink.net</h2>
<h3>返回文章頁:<a href="http://mrthink.net/jquery-jqueryslide-twomethods/">http://mrthink.net/jquery-jqueryslide-twomethods/</a></h3>
<!--*第一個幻燈*-->
<div id="i_focus">
<div id="i_focus_pic">
<ul id="i_focus_piclist" style="left:0; top:0;">
<li><a href="http://mrthink.net/" target="_blank"><img src="http://img.ffffound.com/static-data/assets/6/e9a920bea5486e6e46bdcf249f6eec6fa20d4c21_m.jpg" alt="www.MrThink.net" /></a></li>
<li><a href="http://mrthink.net/" target="_blank"><img src="http://img.ffffound.com/static-data/assets/6/a5ab9199c2e8cf2d608134ebbed8e110c5447597_m.jpg" alt="www.MrThink.net" /></a></li>
<li><a href="http://mrthink.net/" target="_blank"><img src="http://img.ffffound.com/static-data/assets/6/a42d5ab0d6ed4d87c4e3ea262363519173e1068b_m.jpg" alt="www.MrThink.net" /></a></li>
</ul>
<div id="i_focus_opdiv"></div>
<!--slide大圖374*224-->
<ul id="i_focus_tx">
<li class="normal"><span>Springs Best Accessories</span>The 7 key trends for the season b2</li>
<li class="normal"><span>HAHAHAHAAH HAHA haha OHOH</span>THINK EVERY DAY</li>
<li class="normal"><span>Okay okay okay okay</span>scrip jquery ue seo</li>
</ul>
</div>
<!--slide右側小縮略圖75*70-->
<ul id="i_focus_btn">
<li class="i_cur" id="p0"><img src="http://img.ffffound.com/static-data/assets/6/e9a920bea5486e6e46bdcf249f6eec6fa20d4c21_m.jpg" alt="www.MrThink.net" /></li>
<li id="p1"><img src="http://img.ffffound.com/static-data/assets/6/a5ab9199c2e8cf2d608134ebbed8e110c5447597_m.jpg" alt="www.MrThink.net" /></li>
<li id="p2"><img src="http://img.ffffound.com/static-data/assets/6/a42d5ab0d6ed4d87c4e3ea262363519173e1068b_m.jpg" alt="www.MrThink.net" /></li>
</ul>
</div>
<!--//end-->
<br />
<!--*第二個幻燈*-->
<div class="slides">
<ul class="slide-pic">
<li><a href="http://mrthink.net/"><img src="http://img.ffffound.com/static-data/assets/6/b2431f3432bcee4c0358fcb3bf8103c1288e70c3_m.jpg" alt="[email protected]" /></a></li>
<li class="cur"><a href="http://mrthink.net/"><img src="http://img.ffffound.com/static-data/assets/6/0d3a093594c71b7c969a247b7a18306abd6175f2_m.jpg" alt="專注前端技術" /></a></li>
<li><a href="http://mrthink.net/"><img src="http://img.ffffound.com/static-data/assets/6/0d3a093594c71b7c969a247b7a18306abd6175f2_m.jpg" alt="天邊夕陽再次映上" /></a></li>
<li><a href="http://mrthink.net/"><img src="http://img.ffffound.com/static-data/assets/6/c80f38277bc3cf89be3c76cefebdc608c6fe512d_m.jpg" alt="曾夢想仗劍走天涯" /></a></li>
</ul>
<ul class="slide-li op">
<li></li>
<li class="cur"></li>
<li></li>
<li></li>
</ul>
<ul class="slide-li slide-txt">
<li><a href="http://mrthink.net/">[email protected]</a></li>
<li class="cur"><a href="http://mrthink.net/">專注前端技術</a></li>
<li><a href="http://mrthink.net/">天邊夕陽再次映上</a></li>
<li><a href="http://mrthink.net/">曾夢想仗劍走天涯</a></li>
</ul>
</div>
<!--//end-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
//第一個漸隱幻燈開始***[email protected]@wwww.MrThink.net
$(document).ready(function() {
var i_curIndex = 0;
var beauBeauSlide; //函數對象
var i_curID = 0; //取得鼠標下方的對象ID
var pictureID = 0; //索引ID
$("#i_focus_piclist li").eq(0).show(); //默認
autoScroll();
$("#i_focus_btn li").hover(function() {
StopScrolll();
$("#i_focus_btn li").removeClass("i_cur") //所有的li去掉當前的樣式加上正常的樣式
$(this).addClass("i_cur"); //而本身則加上當前的樣式去掉正常的樣式
i_curID = $(this).attr("id"); //取當前元素的ID
pictureID = i_curID.substring(i_curID.length - 1); //取最後一個字符
$("#i_focus_piclist li").eq(pictureID).fadeIn("slow"); //本身顯示
$("#i_focus_piclist li").not($("#i_focus_piclist li")[pictureID]).hide(); //除了自身別的全部隱藏
$("#i_focus_tx li").hide();
$("#i_focus_tx li").eq(pictureID).show();
},
function() {
//當鼠標離開對象的時候獲得當前的對象的ID以便能在啓動自動時與其同步
i_curID = $(this).attr("id"); //取當前元素的ID
pictureID = i_curID.substring(i_curID.length - 1); //取最後一個字符
i_curIndex = pictureID;
autoScroll();
});
//自動滾動
function autoScroll() {
$("#i_focus_btn li:last").removeClass("i_cur");
$("#i_focus_tx li:last").hide();
$("#i_focus_btn li").eq(i_curIndex).addClass("i_cur");
$("#i_focus_btn li").eq(i_curIndex - 1).removeClass("i_cur");
$("#i_focus_tx li").eq(i_curIndex).show();
$("#i_focus_tx li").eq(i_curIndex - 1).hide();
$("#i_focus_piclist li").eq(i_curIndex).fadeIn("slow");
$("#i_focus_piclist li").eq(i_curIndex - 1).hide();
i_curIndex++;
i_curIndex = i_curIndex >= 3 ? 0 : i_curIndex;
beauBeauSlide = setTimeout(autoScroll, 2000);
}
function StopScrolll() //當鼠標移動到對象上面的時候停止自動滾動
{
clearTimeout(beauBeauSlide);
}
});
//第二個漸隱幻燈開始***[email protected]@wwww.MrThink.net
var defaultOpts = {
interval: 3000,
fadeInTime: 300,
fadeOutTime: 200
};
//Iterate over the current set of matched elements
var _titles = $("ul.slide-txt li");
var _titles_bg = $("ul.op li");
var _bodies = $("ul.slide-pic li");
var _count = _titles.length;
var _current = 0;
var _intervalID = null;
var stop = function() {
window.clearInterval(_intervalID);
};
var slide = function(opts) {
if (opts) {
_current = opts.current || 0;
} else {
_current = (_current >= (_count - 1)) ? 0 : (++_current);
};
_bodies.filter(":visible").fadeOut(defaultOpts.fadeOutTime,
function() {
_bodies.eq(_current).fadeIn(defaultOpts.fadeInTime);
_bodies.removeClass("cur").eq(_current).addClass("cur");
});
_titles.removeClass("cur").eq(_current).addClass("cur");
_titles_bg.removeClass("cur").eq(_current).addClass("cur");
}; //endof slide
var go = function() {
stop();
_intervalID = window.setInterval(function() {
slide();
},
defaultOpts.interval);
}; //endof go
var itemMouseOver = function(target, items) {
stop();
var i = $.inArray(target, items);
slide({
current: i
});
}; //endof itemMouseOver
_titles.hover(function() {
if ($(this).attr('class') != 'cur') {
itemMouseOver(this, _titles);
} else {
stop();
}
},
go);
//_titles_bg.hover(function() { itemMouseOver(this, _titles_bg); }, go);
_bodies.hover(stop, go);
//trigger the slidebox
go();
var slideX = {
_this: $('.catalog .imgbox'),
_btnLeft: $('.catalog .left'),
_btnRight: $('.catalog .right'),
init: function() {
slideX._btnLeft.click(slideX.slideLeft);
slideX._btnRight.click(slideX.slideRight);
},
slideLeft: function() {
slideX._btnLeft.unbind('click', slideX.slideLeft);
for (i = 0; i < 2; i++) {
slideX._this.find('li:last').prependTo(slideX._this);
}
slideX._this.css('marginLeft', -224);
slideX._this.animate({
'marginLeft': 0
},
500,
function() {
slideX._btnLeft.bind('click', slideX.slideLeft);
});
return false;
},
slideRight: function() {
slideX._btnRight.unbind('click', slideX.slideRight);
slideX._this.animate({
'marginLeft': -224
},
500,
function() {
slideX._this.css('marginLeft', '0');
for (i = 0; i < 2; i++) {
slideX._this.find('li:first').appendTo(slideX._this)
}
slideX._btnRight.bind('click', slideX.slideRight);
});
return false;
}
}
$(document).ready(function() {
slideX.init();
})
$(document).ready(function() {
var newTime = new Date();
var newTime = newTime.getTime();
var $imgTmp = $('#topromotion').find('img:first');
var osrc = $imgTmp.attr('src');
$imgTmp.attr('src', osrc + '?' + newTime);
});
</script>