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;

	    // 設定 $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');

	    // 並幫 .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 () {
	    ...