<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> <div id="abgneBlock"> <div id="player"> <ul class="list"> <li><a target="_blank" href="#"><img src="http://abgne.tw/wp-content/uploads/2010/09/jquery_up_and_down_vertical_ad_2.png"></a></li> <li><a target="_blank" href="#"><img src="http://abgne.tw/wp-content/uploads/2010/09/jquery_up_and_down_vertical_ad_1.png"></a></li> <li><a target="_blank" href="#"><img src="http://abgne.tw/wp-content/uploads/2010/09/jquery_up_and_down_vertical_ad_0.png"></a></li> <li><a target="_blank" href="#"><img src="http://abgne.tw/wp-content/uploads/2010/09/jquery_up_and_down_vertical_ad_2.png"></a></li> <li><a target="_blank" href="#"><img src="http://abgne.tw/wp-content/uploads/2010/09/jquery_up_and_down_vertical_ad_1.png"></a></li> <li><a target="_blank" href="#"><img src="http://abgne.tw/wp-content/uploads/2010/09/jquery_up_and_down_vertical_ad_0.png"></a></li> </ul> </div> </div> </div> </div> <a class="btn" href="http://abgne.tw/jquery/apply-jquery/jquery-up-and-down-vertical-ad.html">go</a>

#abgneBlock { padding: 5px; width: 450px; height: 286px; border: 1px solid #ccc; } #abgneBlock #player { position: relative; overflow: hidden; height: 100%; } #abgneBlock ul.list { padding: 0; margin: 0; list-style: none; position: absolute; width: 100%; height: 100%; } #abgneBlock ul.list li { float: left; width: 100%; height: 100%; } #abgneBlock .list img{ width: 100%; height: 100%; border: 0; } #abgneBlock ul.playerControl { margin: 0; padding: 0; list-style: none; position: absolute; bottom: 5px; right: 5px; height: 20px; } #abgneBlock ul.playerControl li { float: left; color: #ff99cc; text-align: center; line-height: 20px; width: 20px; height: 20px; font-family: Arial; font-size: 12px; cursor: pointer; margin: 0px 2px; background: url(images/control_ico.gif) no-repeat -21px 0; } #abgneBlock ul.playerControl li.current { color: #fff; font-weight: bold; background-position: 0 0; } #abgneBlock ul.playerControl li { color: #ff99cc; text-align: center; line-height: 20px; width: 20px; height: 20px; font-family: Arial; font-size: 12px; cursor: pointer; margin: 2px 2px; text-indent: -9999px; background: url(images/control_ico2.gif) no-repeat; } #abgneBlock ul.playerControl li.current { background-position: 0 -21px; } #abgneBlock ul.playerControl li.playerControl_2 { background-position: -21px 0; } #abgneBlock ul.playerControl li.playerControl_2.current { background-position: -21px -21px; } #abgneBlock ul.playerControl li.playerControl_3 { background-position: -42px 0; } #abgneBlock ul.playerControl li.playerControl_3.current { background-position: -42px -21px; } #abgneBlock ul.playerControl li.playerControl_4 { background-position: -63px 0; } #abgneBlock ul.playerControl li.playerControl_4.current { background-position: -63px -21px; } #abgneBlock ul.playerControl li.playerControl_5 { background-position: -84px 0; } #abgneBlock ul.playerControl li.playerControl_5.current { background-position: -84px -21px; } #abgneBlock ul.playerControl li.playerControl_6 { background-position: -105px 0; } #abgneBlock ul.playerControl li.playerControl_6.current { background-position: -105px -21px; }

$(function(){ // 先取得必要的元素並用 jQuery 包裝 // 再來取得 $slides 的高度及設定動畫時間 var $block = $('#abgneBlock'), $slides = $('#player ul.list', $block), _height = $slides.find('li').height(), $li = $('li', $slides), _animateSpeed = 400, timer, _speed = 4000; // 產生 li 選項 var _str = ''; for(var i=0, j=$li.length;i<j;i++){ // 每一個 li 都有自己的 className = playerControl_號碼 _str += '<li class="playerControl_' + (i+1) + '">' + (i+1) + '</li>'; } // 產生 ul 並把 li 選項加到其中 // 並幫 li 加上 mouseover 事件 var $controlLi = $('<ul class="playerControl"></ul>').html(_str).appendTo($slides.parent()).find('li'); $controlLi.mouseover(function(){ clearTimeout(timer); var $this = $(this); $this.addClass('current').siblings('.current').removeClass('current'); // 移動位置到相對應的號碼 $slides.stop().animate({ top: _height * $this.index() * -1 }, _animateSpeed, function(){ if(!_isOver) timer = setTimeout(moveNext, _speed); }); return false; }).eq(0).mouseover(); // 當滑鼠移到 $block 時則停止輪播 // 移出時則繼續輪播 var _isOver = false; $block.mouseenter(function(){ clearTimeout(timer); _isOver = true; }).mouseleave(function(){ _isOver = false; timer = setTimeout(moveNext, _speed); }); // 用來控制移動的函式 function moveNext(){ var _now = $controlLi.filter('.current').index(); $controlLi.eq((_now+1) % $controlLi.length).mouseover(); } });