javaScript学习笔记之轮播图案例

javaScript 学习笔记之轮播图案例

样例功能：

0、加载页面之后自动循环轮播图片；

1、鼠标经过展示图片窗口时，自动轮播停止；鼠标离开，自动轮播又开始；

2、然后点击左按钮、右按钮手动轮播。

1、css代码

<在这个案例中，我的图片都是高度和宽度153px，展示div大小也是153px；放置图片的div宽度是根据图片定死，没有做灵活的扩展和转换，属于基础的案例>

 1        * {
 2            margin: 0;
 3            padding: 0;
 4        }
 5        /* 播放轮播图的div */
 6        #rotation {
 7            position: relative;
 8            width: 153px;
 9            height: 153px;
10            overflow: hidden;
11            background-color: antiquewhite;
12            margin: 0 auto;
13        }
14        /* @keyframes rotationmap {
15            0% {
16                margin-left: 0px;
17            }
18            50% {
19                margin-left: -153px;
20            }
21            100% {
22                margin-left: -306px;
23            }
24        } */
25        /* 放置图片的div */
26        .phote {
27            position: absolute;
28            top: 0;
29            left: 0;
30            height: 153px;
31            width: 612px;
32            /* background-color: aquamarine; */
33            /* animation: rotationmap 2s 1; */
34        }
35        /* 图片样式 */
36        .phote img {
37            float: left;
38        }
39         /* 坐按钮 */
40        .leftArrow {
41            position: absolute;
42            top: 65px;
43            left: 0px;
44        }
45        /* 右按钮 */
46        .rightArrow {
47            position: absolute;
48            top: 65px;
49            left: 131px;
50        }
51        /* 图下面的小圆点 */
52        .dots {
53            margin: 0 auto;
54            width: 153px;
55            height: 20px;
56            /* background-color: rgba(35, 160, 83, 0.137); */
57        }
58        
59        .dots ul {
60            margin-left: 40px;
61        }
62        
63        .dots ul li {
64            list-style: none;
65            width: 20px;
66            height: 20px;
67            float: left;
68            margin-right: 6px;
69            border-radius: 20px;
70            background-color: rgba(216, 132, 132, 0.842);
71            text-align: center;
72        }

2、javaScript代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="网站首页.css" type="text/css" rel="stylesheet" />
    <title>首页</title>
    <style></style>
</head>

<body>
    <div>导航栏</div>
    <!-- 轮播图 播放框-->
    <div id="rotation">
        <!-- 用div模拟精灵图 -->
        <div class="phote">
            <!-- 图片的宽高一样 -->
            <img src="images/1.png">
            <img src="images/2.jpg">
            <img src="images/3.jpg">
            <img src="images/纯黑.jpg">
        </div>
        <!-- 设置两个按钮 -->
        <div class="leftArrow"><img src="images/left.jpg"></div>
        <div class="rightArrow"><img src="images/right.jpg"></div>
    </div>
    <!-- 图片下面的小圆圈 -->
    <div class="dots">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>

    <script>
        //var 获取元素
        // 左按钮
        var leftArrow = document.querySelector('.leftArrow');
        // 右按钮
        var rightArrow = document.querySelector('.rightArrow');
        // 精灵图或者是放在div里面并排图片
        var phote = document.querySelector('.phote');
        // 用来显示轮播图的div
        var rotation = document.querySelector('#rotation');
        //手动触发 左按钮
        leftArrow.addEventListener('click', function() {
                // animation(phote, -306);
                if (phote.offsetLeft == 0) {
                    phote.style.left = -459 + 'px';
                } else {
                    phote.style.left = phote.offsetLeft + 153 + 'px';
                }
            })
            // 手动触发右按钮
        rightArrow.addEventListener('click', function() {
                // animation(phote, -306);不能调用循环播放的函数，因为按钮是一次播放
                if (phote.offsetLeft <= -459) {
                    phote.style.left = 0 + 'px';
                } else {
                    phote.style.left = phote.offsetLeft - 153 + 'px';
                }
            })
            //打开浏览器之后开始自动循环播放，通过函数调用的方式 

        animation(phote, -459);

        function animation(obj, target) {

            // console.log(obj.offsetLeft);
            obj.timer = setInterval(function() {
                if (obj.offsetLeft <= target) {
                    // 回到第一张图片 
                    obj.style.left = 0 + 'px';
                } else {
                    // 从左往右循环，和右按钮一样
                    obj.style.left = obj.offsetLeft - 153 + 'px';
                }
            }, 2000);
        }
        //设置鼠标放到图片时，停止循环轮播，停止定时器
        rotation.addEventListener('mouseover', function() {
                clearInterval(phote.timer);
            })
        //鼠标离开图片时，又继续循环播放
        rotation.addEventListener('mouseout', function() {
            animation(phote, -459);
        })
    </script>
</body>

</html>