js 轮播图

最新推荐文章于 2023-09-17 14:12:21 发布

a18609069619

最新推荐文章于 2023-09-17 14:12:21 发布

阅读量61

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lampyris/p/6739140.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        img{vertical-align: top;}
        .box{width: 500px;height: 200px;border: 1px solid #ccc;margin: 100px auto;padding: 7px;position: relative;}
        .box li{list-style: none;}
        .screen{width: 500px;height:200px;position: relative;overflow: hidden;}
        .screen ul{position: absolute;width: 3000px;left: 0;top:0;}
        .screen li{float: left;overflow: hidden;}
        .box ol{position: absolute;right: 10px;bottom:10px;line-height: 20px;text-align: center;}
        .box ol li{width: 20px;height: 20px;float: left;background: white;border: 1px solid #ccc;cursor:pointer;margin-left: 10px;}
        .box ol li.current{background:yellow;}
    </style>
    <script type="text/javascript">
        window.onload = function() {
            var box = document.getElementById('box');
            var ul = document.getElementById('ul');
            var ullis = ul.children; //获取ul下的所有子节点
            ul.appendChild(ul.children[0].cloneNode(true));//克隆第一个节点到并追加到最后
            var ol = document.createElement('ol'); //创建ol节点
            box.appendChild(ol); //追加到box节点后面
            for(var i=0;i<ullis.length-1;i++) { //动态生成小方块
                var li = document.createElement('li');
                li.innerHTML = i+1;//给li 加文字
                ol.appendChild(li);
            }
            ol.children[0].className = 'current'; //默认第一个选中
            var ollis = ol.children; //获取ol下所有子节点
            //动画部分
            for (var i=0;i<ollis.length;i++) {
                ollis[i].index = i;//获得当前第几个小li的索引号
                ollis[i].onmouseover = function() { //鼠标放上选当前小方块
                    for (var j=0;j<ollis.length;j++) {
                        ollis[j].className = '';
                    }
                    this.className = 'current';
                    animate(ul,-this.index*500);//参数1,谁动画,2走多少
                    //当前索引号为主
                    square = key = this.index;
                }
            }
            var timer = null;
            var key = 0;
            var square = 0;
            timer = setInterval(autoplay,1000);
            function autoplay(){
                key++;//先++
                if (key>ullis.length - 1) { //后判断
                    ul.style.left = 0; //迅速调回
                    key = 1; //因为第6张就是第一张 所有下次从第2张开始
                }
                animate(ul,-key*500);//再次执行
                square++;
                if (square>ollis.length - 1) {
                    square = 0;
                }
                for (var i=0;i<ollis.length;i++) {
                    ollis[i].className = '';
                }
                ollis[square].className = 'current';
            }
            //鼠标经过停止定时器
            box.onmouseover = function() {
                clearInterval(timer);
            }
            box.onmouseout = function() {
                timer = setInterval(autoplay,1000);
            }
        }
        function animate(obj,target) {
            clearInterval(obj.timer); //先清楚定时器
            var speed = obj.offsetLeft < target ? 15 : -15;//用来判断 加 还是 减
            obj.timer = setInterval(function(){
                var result = target - obj.offsetLeft;//因为他们的差值不会超过5
                obj.style.left = obj.offsetLeft + speed + 'px';
                //如果差值不小于15说明到位置了
                if (Math.abs(result)<=15) {
                    clearInterval(obj.timer);
                    //有5像素差,直接跳目标位置
                    obj.style.left = target + 'px';
                }
            },30)
        }
    </script>
</head>
<body>
    <div class="box" id='box'>
    <div class="screen">
        <ul id="ul">
            <li><img src="./img/1.jpg" width="500" height="200" /></li>
            <li><img src="./img/2.jpg" width="500" height="200" /></li>
            <li><img src="./img/3.jpg" width="500" height="200" /></li>
            <li><img src="./img/4.jpg" width="500" height="200" /></li>
            <li><img src="./img/5.jpg" width="500" height="200" /></li>
        </ul>
    </div>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/lampyris/p/6739140.html

a18609069619

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 轮播图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin:0;padding:0;}...
复制链接

扫一扫