自我介紹
◀
▶
ul, li {
padding: 0;
margin: 0;
list-style: none;
}
#PhotoShow {
width: 100%; /* 圖片的寬 */
position: relative;
}
.player {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.player ul.list {
position: absolute;
height: 100%;
}
.player ul.list li {
float: left;
height: 100%;
}
.player ul.list img{
width: 100%;
height: auto;
border: 0;
}
.control .numbers{
padding: 5px;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
text-align: center;
}
.control .numbers li {
color: #ddd;
display: inline-block;
width: 10px;
height: 10px;
line-height: 10px;
text-align: center;
margin: 5px;
background: #777;
border-radius: 50%;
}
.control .numbers {
text-align: center;
}
.control .numbers li.current {
background: #fa3362;
}
.control .numbers li.hover {
background: #4388ca;
}
.control .arrows li{
font-size: 30px;
font-weight: bold;
display: inline-block;
color: #ffffff;
text-shadow: 1px 1px #000;
text-align: center;
line-height: 50px;
opacity: 0.7;
}
.control .arrows li:hover{
opacity: 1;
}
.control .arrows .prev{
position: absolute;
margin-top: -25px;
top: 50%;
left: 10px;
}
.control .arrows .next{
position: absolute;
margin-top: -25px;
top: 50%;
right: 10px;
}
$(function(){
// 先取得必要的元素並用 jQuery 包裝
// 再來取得 $block 的高度及設定動畫時間
var $block = $('#PhotoShow'),
$slides = $block.find('ul.list'),
_width = $block.width(),
$li = $slides.find('li'),
$control = $block.find('.control'),
_animateSpeed = 600,
// 加入計時器, 輪播時間及控制開關
timer, _showSpeed = 3000, _stop = false;
// 設定長寬比固定
$block.css('height', _width/2.13);
// 設定 $slides 的寬(為了不讓 li 往下擠)
$slides.css('width', ($li.length) * _width);
// 設定每張圖片寬度
$li.css('width', _width);
// 產生 li 選項
var _str = '';
for(var i=0, j=$li.length;i' + ' ' + '';
}
// 產生 ul 並把 li 選項加到其中
var $number = $('').html(_str).appendTo($control),
$numberLi = $number.find('li');
// 並幫 .numbers li 加上 click 事件
$numberLi.click(function(){
var $this = $(this);
$this.addClass('current').siblings('.current').removeClass('current');
clearTimeout(timer);
// 移動位置到相對應的號碼
$slides.stop().animate({
left: _width * $this.index() * -1
}, _animateSpeed, function(){
// 當廣告移動到正確位置後, 依判斷來啟動計時器
if(!_stop) timer = setTimeout(move, _showSpeed);
});
return false;
}).eq(0).click();
// 幫 .arrows li 加上 click 事件
$control.find('ul.arrows li').click(function(){
var _index = $numberLi.filter('.current').index();
$numberLi.eq((this.className.indexOf('next')>-1?_index+1:_index-1+$numberLi.length)%$numberLi.length).click();
return false;
});
// 當滑鼠移到 $control li 上時, 加上 .hover 效果
// 反之則移除
$control.find('li').hover(function(){
$(this).addClass('hover');
}, function(){
$(this).removeClass('hover');
});
// 如果滑鼠移入 $slides 時
$slides.hover(function(){
// 關閉開關及計時器
_stop = true;
clearTimeout(timer);
}, function(){
// 如果滑鼠移出 $block 時
// 開啟開關及計時器
_stop = false;
timer = setTimeout(move, _showSpeed);
});
// 計時器使用
function move(){
$control.find('ul.arrows li.next').click();
}
});
