JSFiddle - React, Tailwind, and code Playground

by danny8376

HTML

<div id="abgne-block-20110317">
    <div class="abgne-player">
        <ul class="abgne-list">
            <li><a href="http://lbear.pixnet.net/blog/post/50448306" target="_top"><img src="https://googledrive.com/host/0BxWXwD7kbAvvSmVtQ0czUC1FeU0/08.jpg"></a>
            </li>
            <li><a href="http://lbear.pixnet.net/blog/post/50467989" target="_top"><img src="https://googledrive.com/host/0BxWXwD7kbAvvSmVtQ0czUC1FeU0/07.jpg"></a>
            </li>
            <li><a href="http://lbear.pixnet.net/blog/post/51072650" target="_top"><img src="https://googledrive.com/host/0BxWXwD7kbAvvSmVtQ0czUC1FeU0/06.jpg"></a>
            </li>
            <li><a href="http://lbear.pixnet.net/blog/post/51238360" target="_top"><img src="https://googledrive.com/host/0BxWXwD7kbAvvSmVtQ0czUC1FeU0/05.jpg"></a>
            </li>
            <li><a href="http://lbear.pixnet.net/blog/post/51854770" target="_top"><img src="https://googledrive.com/host/0BxWXwD7kbAvvSmVtQ0czUC1FeU0/04.jpg"></a>
            </li>
            <li><a href="http://lbear.pixnet.net/blog/post/51888090" target="_top"><img src="https://googledrive.com/host/0BxWXwD7kbAvvSmVtQ0czUC1FeU0/03.jpg"></a>
            </li>
            <li><a href="http://lbear.pixnet.net/blog/post/52017912" target="_top"><img src="https://googledrive.com/host/0BxWXwD7kbAvvSmVtQ0czUC1FeU0/02.jpg"></a>
            </li>
            <li><a href="http://lbear.pixnet.net/blog/post/52117548" target="_top"><img src="https://googledrive.com/host/0BxWXwD7kbAvvSmVtQ0czUC1FeU0/01.jpg"></a>
            </li>
        </ul>
    </div>
    <div class="abgne-control">
        <ul class="arrows">
            <li class="prev">&lt;</li>
            <li class="next">&gt;</li>
        </ul>
    </div>
</div>
<BR>
<p><span style="color: red; font-size: 12pt;">如果你是 Android 新手，請務必先看&nbsp;<a title="阿公阿嫲都學得會怎麼用 Android" href="http://lbear.pixnet.net/blog/post/49854606" 

target="_blank">阿公阿嫲都學得會怎麼用 Android</a>&nbsp;</span>
    <br>
    <hr>
<span style="color:...

CSS

ul, li {
	    padding: 0;
	    margin: 0;
	    list-style: none;
	}
	#abgne-block-20110317 {
	    width: 580px;
	    /* 圖片的寬 */
	    height: 308px;
	    /* 圖片的高 + 30 */
	    border: 10px solid #ddd;
	}
	.abgne-player {
	    width: 580px;
	    /* 圖片的寬 */
	    height: 280px;
	    /* 圖片的高 */
	    position: relative;
	    overflow: hidden;
	}
	.abgne-player ul.abgne-list {
	    position: absolute;
	    width: 9999px;
	    height: 100%;
	}
	.abgne-player ul.abgne-list li {
	    float: left;
	    width: 580px;
	    /* 圖片的寬 */
	    height: 100%;
	}
	.abgne-player ul.abgne-list img {
	    width: 100%;
	    height: 100%;
	    border: 0;
	}
	.abgne-control {
	    height: 24px;
	    padding: 3px;
	    color: #fff;
	    font-size: 13px;
	    background: #333;
	}
	.abgne-control ul {
	    float: left;
	}
	.abgne-control ul li {
	    float: left;
	    padding: 0 5px;
	    line-height: 20px;
	    margin: 2px;
	    background: #666;
	    cursor: pointer;
	}
	.abgne-control ul.numbers {
	    margin-left: 13px;
	}
	.abgne-control ul li.current {
	    background: #fff;
	    color:#000;
	}
	.abgne-control ul li.hover {
	    background: #fff;
	    color:#000;
	}

JavaScript

$(function () {
	    // 先取得必要的元素並用 jQuery 包裝
	    // 再來取得 $block 的高度及設定動畫時間
	    var $block = $('#abgne-block-20110317'),
	        $slides = $block.find('ul.abgne-list'),
	        _width = $block.width(),
	        $li = $slides.find('li'),
	        $control = $block.find('.abgne-control'),
	        _animateSpeed = 600,
	        // 加入計時器, 輪播時間及控制開關
	        timer, _showSpeed = 4000,
	        _stop = false;
        
        
        
        /* 後續輪播時確認最後一個用的 */
        var slides_len = $slides.children().length;
        
        
        

	    // 設定 $slides 的寬(為了不讓 li 往下擠)
	    $slides.css('width', ($li.length + 1) * _width);
	    // 產生 li 選項
	    var _str = '';
	    for (var i = 0, j = $li.length; i < j; i++) {
	        // 每一個 li 都有自己的 className = playerControl_號碼
	        _str += '<li class="abgne-player-control_' + (i + 1) + '">' + (i + 1) + '</li>';
	    }

	    // 產生 ul 並把 li 選項加到其中
	    var $number = $('<ul class="numbers"></ul>').html(_str).appendTo($control),
	        $numberLi = $number.find('li');
        
        
        
        /* 為達成不回滾的效果 所以這邊把第一個複製一份到最後面來做準備
           讓他能繼續向右輪播 並且結束時跳到第一個 來製造無回滾的錯覺 */
        $slides.append($slides.children().first().clone());
        
        
        

	    // 並幫 .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);
	        });
            */
            
            
            
            
            /* 實際修改輪播效果 */
            var slide_idx = $this.index();
	        $slides.stop().animate({
                /* 當要滾到第一個的時候改成滾到新增的那個假的複製品(? */
                left: _width * (slide_idx == 0 ? slides_len :...