文档章节

JavaScript左右焦点轮播图

o
 osc_1ee7cxmx
发布于 2018/08/06 15:40
字数 561
阅读 0
收藏 0

精选30+云产品,助力企业轻松上云!>>>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body, ul, ol, li, img {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #box {
            width: 520px;
            height: 280px;
            padding: 5px;
            position: relative;
            border: 1px solid #ccc;
            margin: 100px auto 0;
        }

        .ad {
            width: 520px;
            height: 280px;
            overflow: hidden;
            position: relative;
        }

        #box img {
            width: 520px;
        }

        .ad ol {
            position: absolute;
            right: 10px;
            bottom: 10px;
        }

        .ad ol li {
            width: 20px;
            height: 20px;
            line-height: 20px;
            border: 1px solid #ccc;
            text-align: center;
            background: #fff;
            float: left;
            margin-right: 10px;
            cursor: pointer;
            _display: inline;
        }

        .ad ol li.current {
            background: yellow;
        }

        .ad ul li {
            float: left;
        }

        .ad ul {
            position: absolute;
            top: 0;
            width: 2940px;
        }

        .ad ul li.current {
            display: block;
        }

        #focusD {
            display: none;
        }

        #focusD span {
            width: 40px;
            height: 40px;
            position: absolute;
            left: 5px;
            top: 50%;
            margin-top: -20px;
            background: #000;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-family: '黑体';
            font-size: 30px;
            color: #fff;
            opacity: 0.3;
            border: 1px solid #fff;
        }

        #focusD #right {
            right: 5px;
            left: auto;
        }
    </style>
</head>
<body>
<div id="box" class="all">
    <div class="ad">
        <ul id="imgs">
            <li><img src="images/01.jpg"/></li>
            <li><img src="images/02.jpg"/></li>
            <li><img src="images/03.jpg"/></li>
            <li><img src="images/04.jpg"/></li>
            <li><img src="images/05.jpg"/></li>
        </ul>
    </div>
    <!--相框-->
    <div id="focusD">
        <span id="left">&lt;</span>
        <span id="right">&gt;</span>
    </div>
</div>
<script src="common.js"></script>
<script>
    //获取相框当注册鼠标进入跟离开事件,进入显示左右焦点,离开则消失
    my$("box").onmouseover = function () {
        my$("focusD").style.display = "block";
    };
    my$("box").onmouseout = function () {
        my$("focusD").style.display = "";
    };
    //获取照片的宽度
    var width = my$("box").firstElementChild.offsetWidth;
    //获取左右焦点注册鼠标点击事件
    my$("left").onclick = function () {
        //获取ul当前的位置
        var left = my$("imgs").offsetLeft;
        //ul要移动到的位置
        if (left > -2080) {
            var index = left + -width;
            animate(my$("imgs"), index)
        } else {
            animate(my$("imgs"), -2080)
        }
    };
    my$("right").onclick = function () {
        //获取ul当前的位置
        var left = my$("imgs").offsetLeft;
        //ul要移动到的位置
        if (left < 0) {
            var index = left + width;
            animate(my$("imgs"), index)
        } else {
            animate(my$("imgs"), 0)
        }
    };
    //让指定元素移动到指定的位置
    //参数一:要移动的元素
    //参数二:想要移动到什么位置
    function animate(element, target) {
        //先清理定时器
        clearInterval(element.timeId);
        //把定时器id存储到element中的一个属性中
        element.timeId = setInterval(function () {
            //获取元素当前所在的位置
            var current = element.offsetLeft;
            //设置每次移动的步数
            var step = 10;
            //判断想要移动到的位置是大于s还是小于当前位置,大于则移动的是整数,小于则是负数
            step = target > current ? step : -step;
            //移动之后的位置
            current += step;
            if (Math.abs(current - target) > Math.abs(step)) {
                element.style.left = current + "px";
            } else {
                //清理定时器
                clearInterval(element.timeId);
                //直接到达目标
                element.style.left = target + "px";
            }
        }, 5)
    }
</script>
</body>
</html>

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

Openresty使用zlib解压缩response body

产品需要对当前的所有接口进行统计数据,其中需要边缘层返回需要用到的response body的状态码以及信息 概述 目前后台返回的response body既有压缩又有不压缩,所以导致处理数据需要进行分支处...

就不穿小内
31分钟前
16
0
Spring Boot 2.3.0正式发布:优雅停机、配置文件位置通配符新特性一览

当大潮退去,才知道谁在裸泳。。关注公众号【BAT的乌托邦】开启专栏式学习,拒绝浅尝辄止。本文 https://www.yourbatman.cn 已收录,里面一并有Spring技术栈、MyBatis、中间件等小而美的专栏...

YourBatman
31分钟前
15
0
Mockplus for Mac(原型设计工具)

Mockplus for Mac是Mac平台上一款简单、快速的原型设计工具,无需任何编程,不需要任何编程基础知识,帮你快速使用Mockplus设计图形。Mockplus封装了近200个组件,提供3000个以上的图标素材。...

晴天白云小太阳
36分钟前
9
0
什么是“咖喱”? - What is 'Currying'?

问题: 我在几篇文章和博客中都看到过关于咖喱函数的引用,但是我找不到很好的解释(或者至少有一个合理的解释!) 解决方案: 参考一: https://stackoom.com/question/9Ri/什么是-咖喱 参考...

法国红酒甜
38分钟前
20
0
怎样理解Filecoin经济模型

比特币本身所代表的 PoW 模型是一个精妙的经济模型。似乎对模型任何一部分的修改,都会引入一些新的问题。比特币的经济模型主要体现在以下方法论中: 1.挖矿难度调整以及通过竞争实现挖矿经济...

daxiongdi
39分钟前
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部