自我介紹
Ben & Jean 的饗樂生活.....美食/旅遊/親子/生活日記 旅行的樂趣-在於用味蕾記錄回憶
邀稿/合作信箱: smilejean@gmail.com
網誌
名片
留言
RSS
紫色微笑首頁輪播效果
#abgne-block-20120804 {
width: 552px; /* 圖片寬度 + 縮圖寬度 + 間隔 8px */
height: 300px; /* 圖片高度 */
padding: 6px 10px;
position: relative;
border: 1px solid #ccc;
}
#abgne-block-20120804 ul, #abgne-block-20120804 li {
margin: 0;
padding: 0;
list-style: none;
}
#abgne-block-20120804 img {
border: none;
}
#abgne-block-20120804 .photo {
width: 450px; /* 圖片寬度 */
height: 300px; /* 圖片高度 */
position: absolute;
}
#abgne-block-20120804 .desc-block {
position: absolute;
bottom: 0;
left: 0;
width: 450px; /* 圖片寬度 */
height: 32px;
}
#abgne-block-20120804 .desc-bg, #abgne-block-20120804 .desc-title {
position: absolute;
width: 430px; /* 圖片寬度 - padding * 2 */
background: #000;
top: 0;
height: 24px;
padding: 4px 10px;
}
#abgne-block-20120804 .desc-title {
color: #fff;
background: none;
line-height: 24px;
}
#abgne-block-20120804 #playPause-btn { /* 播放/暫停鈕 */
position: absolute;
display: block;
right: 5px;
bottom: 5px;
width: 21px;
height: 21px;
width: 21px;
height: 21px;
text-indent: -999px;
}
#abgne-block-20120804 .playPause-btn-play {
background: url(http://farm6.staticflickr.com/5516/10953800365_c43196dd09_o.png) no-repeat 0px 0px;
}
#abgne-block-20120804 .playPause-btn-pause {
background: url(http://farm8.staticflickr.com/7453/10953969824_1835609754_o.png) no-repeat 0px 0px;
}
#abgne-block-20120804 .thumbs {
width: 94px;
height: 288px; /* 圖片高度 - padding-top */
padding-top: 12px;
right: 10px;
position: absolute;
}
#abgne-block-20120804 .carousel {
height: 280px;
position: relative;
overflow: hidden;
}
#abgne-block-20120804 .carousel .nav-bar {
float: left;
width: 2px;
height: 63px;
margin-right: 2px;
}
#abgne-block-20120804 .carousel img {
float: left;
width: 90px;
height: 63px;
}
#abgne-block-20120804 .carousel ul {
position: absolute;
}
#abgne-block-20120804 .carousel li {
width: 94px;
height: 72px;
}
#abgne-block-20120804 .carousel .current .nav-bar { /* 當被點選時，縮圖左邊的顏色 */
background: #ad5809;
}
#abgne-block-20120804 .thumbs .prev, #abgne-block-20120804 .thumbs .next { /* 縮圖上下的控制鈕 */
position: absolute;
left: 43px;
width: 12px;
height: 0px;
padding-top: 6px;
overflow: hidden;
display: block;
cursor: pointer;
}
#abgne-block-20120804 .thumbs .prev {
top: 0px;
background-position: 0 -21px;
background: url(http://farm6.staticflickr.com/5495/10953877906_013e3ecff5_o.png) no-repeat 0 0;
}
#abgne-block-20120804 .thumbs .next {
bottom: -2px;
background-position: 0 -27px;
background: url(http://farm8.staticflickr.com/7363/10953969904_7a4e948d70_o.png) no-repeat 0 0;
}
$(function(){
// 先一一取得相關的元素及高度
var $block = $('#abgne-block-20120804'),
$photo = $block.find('.photo'),
$photoA = $photo.find('a'),
$photoImg = $photoA.find('img'),
$photoDesc = $photoA.find('.desc-title'),
$thumbs = $block.find('.thumbs'),
$carousel = $block.find('.carousel'),
_carouselHeight = $carousel.height(),
$playPauseBtn = $photo.append('').find
('#playPause-btn'),
$ul = $thumbs.find('ul'),
$li = $ul.find('li'),
_liHeight = $li.height(),
_set = Math.ceil(_carouselHeight / _liHeight),
_count = Math.ceil($li.length / _set),
_height = _set * _liHeight * -1,
timer, speed = 3000, _animateSpeed = 400, // 分別設定輪播速度及動畫速度
_index = 0, _countIndex = 0;
// 先在縮圖前面都插入一個 .nav-bar, 主要是當點選到該縮圖時的效果
$('').insertBefore($li.find('img'));
// 先讓描述區塊的背景有透明度
$block.find('.desc-bg').css('opacity', 0.7);
// 如果圖片組數超出一次能顯示的數量時, 產生可以切換的上下鈕
var $controls = null;
if(_count>1){
$controls = $thumbs.append('').find('.prev, .next');
var $prev = $controls.eq(0).hide(),
$next = $controls.eq(1);
// 當點擊上下鈕時
$controls.click(function(e){
// 計算要顯示第幾組
_countIndex = Math.floor((e.target.className == 'prev' ? _countIndex - 1 + _count : _countIndex + 1) % _count);
// 進行動畫
$ul.stop().animate({
top: _countIndex * _height
}, _animateSpeed);
// 判斷上下鈕顯示與否
$prev.toggle(_countIndex>0);
$next.toggle(_countIndex!=_count-1);
return false;
});
}
// 如果縮圖 li 被點擊時
$li.click(function(){
var $this = $(this),
$a = $this.find('a'),
$img = $this.find('img');
clearTimeout(timer);
_index = $this.index();
// 分別改變左邊顯示區塊的超連結, 圖片, alt 及描述內容
$photoA.attr('href', $a.attr('href'));
$photoImg.attr({
src: $img.attr('src'),
alt: $img.attr('alt')
});
$photoDesc.html($img.attr('alt'));
$this.addClass('current').siblings('.current').removeClass('current');
// 如果目前的播放鈕並不是在播放樣式時, 就啟動計時器
if(!$playPauseBtn.hasClass('playPause-btn-play')) timer = setTimeout(auto, speed + _animateSpeed);
return false;
}).eq(_index).click();
// 當播放鈕被點擊時
$playPauseBtn.click(function(){
// 進行 .playPause-btn-pause 及 .playPause-btn-play 樣式切換
var $this = $(this).toggleClass('playPause-btn-pause playPause-btn-play'),
_hasPlay = $this.hasClass('playPause-btn-play'),
_txt = _hasPlay ? '播放' : '暫停';
// 如果目前的播放鈕並不是在播放樣式時, 就啟動計時器; 反之則停止計時器
if(_hasPlay) clearTimeout(timer);
else timer = setTimeout(auto, speed);
$this.attr('title', _txt).text(_txt);
return false;
});
// 自動輪播使用
function auto(){
_index = (_index + 1) % $li.length;
var $tmp = $li.eq(_index).click();
var _indexCount = Math.floor(_index / _set);
// 判斷是否要切換縮圖的顯示組數
if($controls != null && (_index == (_countIndex + 1) * _set || _index == 0) && _countIndex != _indexCount){
$next.click();
$tmp.animate({opacity: 1}, _animateSpeed, function(){
$tmp.addClass('current').siblings('.current').removeClass('current');
})
}
}
});
用 jQuery 幫圖片加上黑白效果
.black-div {background: #decec0;
width: 950px;
height: 90px;
}
$(function(){
// 預設的透明度值
var _opacity = 0.7;
// 讓 .black-div img 的透明度為預設的透明度值
// 接著加入 .hover() 事件
$('.black-div img').css('opacity', _opacity).hover(function(){
// 當滑鼠移入時設為不透明
$(this).stop(false, true).fadeTo(200, 1);
}, function(){
// 當滑鼠移出時設為透明度 0.3
$(this).stop(false, true).fadeTo(200, _opacity);
});
});
宜蘭民宿精選
驚艷澳門
蜜月長灘島
驚奇馬尼拉
日本京阪神
日本中部
日本四國
海南島三亞
崔記早點
部落格密技
