JavaScript技巧——轮播图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>当当网首页轮播图-By小黑</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        
        #wrap {
            margin: 50px auto;
            /* 图片的宽和高 */
            width: 800px;
            height: 330px;
            /* 超出的影藏 */
            overflow: hidden;
            position: relative;
        }
        
        #list {
            position: absolute;
            bottom: 15px;
            right: 250px;
        }
        
        #list li {
            float: left;
            margin-right: 15px;
            cursor: pointer;
            width: 23px;
            height: 23px;
            line-height: 23px;
            text-align: center;
            background: #ADA79D;
            color: #FFF;
            border-radius: 50%;
        }
        
        #list .on {
            background: red;
        }
        /* 左箭头有箭头 */
        
        #bar_left,
        #bar_right {
            width: 33px;
            height: 80px;
            line-height: 80px;
            position: absolute;
            top: 130px;
            background: rgba(0, 0, 0, 0.3);
        }
        
        #bar_left {
            left: -33px;
        }
        
        #bar_right {
            right: -35px;
        }
        /*下面利用伪元素实现左侧和右侧的小箭头*/
        
        #bar_left:after,
        #bar_left:before,
        #bar_right:before,
        #bar_right:after {
            content: "";
            border-top: 15px solid transparent;
            border-bottom: 15px solid transparent;
            position: absolute;
            top: 25px;
        }
        /*左边箭头*/
        
        #bar_left:before {
            border-left: 15px solid transparent;
            border-right: 15px solid #FFF;
            right: 10px;
        }
        
        #bar_left:after {
            border-left: 15px solid transparent;
            border-right: 15px solid rgba(0, 0, 0, 0.3);
            right: 7px;
        }
        /*右边箭头*/
        
        #bar_right:before {
            border-right: 15px solid transparent;
            border-left: 15px solid #FFF;
            left: 10px;
        }
        
        #bar_right:after {
            border-right: 15px solid transparent;
            border-left: 15px solid rgba(0, 0, 0, 0.3);
            left: 7px;
        }
        
        #wrap:hover #bar_left {
            left: 0;
            cursor: pointer;
            transition: left 0.5s;
        }
        
        #wrap:hover #bar_right {
            /* display: block; */
            right: 5px;
            cursor: pointer;
            transition: right 0.5s;
        }
        
        .tex {
            margin: 20px auto;
            width: 400px;
        }
        
        .tex ul li {
            list-style-type: circle;
            color: red;
            font-weight: bold;
            margin-bottom: 5px;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <ul id="pic">
            <li><img src="images/dang1.jpg" alt=""></li>
            <li><img src="images/dang2.jpg" alt=""></li>
            <li><img src="images/dang3.jpg" alt=""></li>
            <li><img src="images/dang4.jpg" alt=""></li>
            <li><img src="images/dang5.jpg" alt=""></li>
            <li><img src="images/dang6.jpg" alt=""></li>
            <li><img src="images/dang7.jpg" alt=""></li>
            <li><img src="images/dang8.jpg" alt=""></li>
        </ul>
        <div id="bar_left"></div>
        <div id="bar_right"></div>
        <ol id="list">
            <li class="on">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ol>
    </div>
    <div class="tex">
        <ul>
            <li>功能如下：</li>
            <li>图片会自动播放，鼠标放上面会暂停播放</li>
            <li>点击左右出现的箭头可以切换到上一张/下一张图片</li>
            <li>点击序号会跳转到对应图片</li>
        </ul>
    </div>
    <script>
        var wrap = document.getElementById('wrap');
        var pics = document.getElementById('pic');
        var lists = document.getElementById('list').getElementsByTagName('li');
        var point_l = document.getElementById('bar_left');
        var point_r = document.getElementById('bar_right');
        var index = 0;
        var counter = null;

        function change() { //计时器
            counter = setInterval(function() {
                index++;
                if (index === lists.length) {
                    index = 0;
                }
                img(index);
            }, 2000)
        }
        change();

        function img(curIndex) { //切换图片
            for (var i = 0; i < lists.length; i++) {
                if (curIndex === i) {
                    lists[i].className = 'on';
                } else {
                    lists[i].className = '';
                }
            }
            index = curIndex;
            pics.style.marginTop = -330 * curIndex + 'px'; //图片上移
            wrap.οnmοuseοver = function() { //鼠标放到图片上时图片停止播放
                pics.style.cursor = "pointer";
                clearInterval(counter); //清除计时器
            }
            pics.οnmοuseοut = change;
        }
        //鼠标放到指定序号切换到指定图片
        for (var i = 0; i < lists.length; i++) {
            lists[i].id = i;
            lists[i].οnmοuseοver = function() {
                img(this.id);
                this.className = 'on';
            }
        }
        //当鼠标放在箭头上时，点击箭头切换到下一张图片
        point_l.οnmοusedοwn = function() { //点击左边箭头
            if (index <= 0) {
                index = lists.length;
            }
            img(index - 1);
        }
        point_r.οnmοusedοwn = function() { //点击右边箭头
            if (index >= lists.length - 1) {
                index = -1;
            }
            img(index + 1);
        }
    </script>
</body>

</html>
JavaScript技巧——轮播图

猜你喜欢
