CSS组件之滑动门/轮播（slider）样式1

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>三十课 - CSS组件之滑动门/轮播（slider）样式1</title>
    <style>
        #slider {
            position: relative;
            overflow: hidden;
            margin: 20px;
            border-radius: 4px;
        }
        #slider ul {
            position: relative;
            margin: 0;
            padding: 0;
            height: 200px;
            list-style: none;
        }
        #slider ul li {
            position: relative;
            display: block;
            float: left;
            margin: 0;
            padding: 0;
            min-width: 300px;
            max-width:100%;
            height: 200px;
            background: #ccc;
            text-align: center;
            line-height: 200px;
        }
        a.control_prev, a.control_next {
            position: absolute;
            top: 40%;
            z-index: 999;
            display: block;
            padding: 4% 3%;
            width: auto;
            height: auto;
            background: #2a2a2a;
            color: #fff;
            text-decoration: none;
            font-weight: 600;
            font-size: 18px;
            opacity: 0.8;
            cursor: pointer;
        }
        a.control_prev:hover, a.control_next:hover {
            opacity: 1;
            -webkit-transition: all 0.2s ease;
        }
        a.control_prev {
            border-radius: 0 2px 2px 0;
        }
        a.control_next {
            right: 0;
            border-radius: 2px 0 0 2px;
        }
    </style>
</head>
<body>
<div id="slider">
    <a class="control_next">></a>
    <a class="control_prev"><</a>
    <ul>
        <li>思否</li>
        <li style="background: #aaa;">30ke.cn</li>
        <li>sf.gg</li>
        <li style="background: #aaa;">三十课</li>
    </ul>
</div>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        var intervalId;
        var slideCount = $('#slider ul li').length;
        var slideWidth = $('#slider ul li').width();
        var slideHeight = $('#slider ul li').height();
        var sliderUlWidth = slideCount * slideWidth;
        $('#slider').css({ width: slideWidth, height: slideHeight });
        $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
        $('#slider ul li:last-child').prependTo('#slider ul');
        function moveLeft() {
            $('#slider ul').animate({
                left: + slideWidth
            }, 200, function () {
                $('#slider ul li:last-child').prependTo('#slider ul');
                $('#slider ul').css('left', '');
            });
        };
        function moveRight() {
            $('#slider ul').animate({
                left: - slideWidth
            }, 200, function () {
                $('#slider ul li:first-child').appendTo('#slider ul');
                $('#slider ul').css('left', '');
            });
        };
        function start() {
            intervalId = setInterval(function () {
                moveRight();
            }, 3000);
        }
        $('a.control_prev').click(function () {
            moveLeft();
        });
        $('a.control_next').click(function () {
            moveRight();
        });
        $("#slider").mouseenter(function () {
            clearInterval(intervalId);
        });
        $("#slider").mouseleave(function () {
            start();
        });
        start();
    });
</script>
</body>
</html>