简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 7月12~15号作业
Blogger Information
Blog 26
fans 1
comment 0
visits 18876
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
7月12~15号作业
坏人也温柔de陈词滥调
Original
629 people have browsed it

实例

html元素集合转换为数组对象

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>
<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
</ul>
<script>
 var ul =document.getElementsByTagName('li').item(0);
    ul.addEventListener('click',function (event) {
  console.log(event.currentTarget);
          console.log(event.target);
    },false);
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

轮播图：

1设置小圆点的数量与样式，与图片的数量关联，实现每添加一张图，将图片列表由HTML集合转换为真正的数组类型获取小圆点的 父节点

2.为小圆点设置点击事件，切换图片，获取所有的小圆点，将小圆点的html集合，转为真正的数组

3.设置图片切换，根据小圆点的data-index值与图片data-index对应关系来确定需要切换的图片
4.去掉原来所有图片上的激活样式，设置当前图片为显示激活状态，设置小圆点的当前激活与高亮状态
5.翻页按钮，为翻页按钮添加事件

6.设置定时器，一定时间间隔后，将照片标记加1，然后开始切换。

实例


运行实例 »

点击 "运行实例" 按钮查看在线实例

实例



实例

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>轮播效果</title>
        <style>
            * {
                margin: 0;
                padding: 0
            }
            .box {
                width: 500px;
                height: 300px;
                border: 1px solid #ccc;
                margin: 100px auto;
                padding: 5px;

            }
            .inner{
                width: 500px;
                height: 300px;
                position: relative;
                overflow: hidden;
            }
            .inner img{
                width: 500px;
                height: 300px;
                vertical-align: top
            }
            ul {
                width: 1000%;
                position: absolute;
                list-style: none;
                left:0;
                top: 0;
            }
            .inner li{
                float: left;

            }

            ol {
                position: absolute;
                height: 20px;
                right: 20px;
                bottom: 20px;
                text-align: center;
                padding: 5px;
            }
            ol li{
                display: inline-block;
                width: 20px;
                height: 20px;
                line-height: 20px;
                background-color: #fff;
                margin: 5px;
                cursor: pointer;

            }
            ol .current{
                background-color: red;
            }
            #arr{
                display: none;
            }
            #arr span{
                width: 40px;
                height: 40px;
                position: absolute;
                left: 5px;
                top: 50%;
                margin-top: -20px;
                background: #fff;
                cursor: pointer;
                line-height: 40px;
                text-align: center;
                font-weight: bold;
                font-family: 'black';
                font-size: 30px;
                color: #000;
                opacity: 0.5;
                border: 1px solid #fff;
            }
            #arr #right {
                right: 5px;
                left: auto;
            }
        </style>
    </head>
<body>
<div class="box" id="box">
    <div class="inner">
        <!--轮播图-->
        <ul>
            <li><a href="#"><img src="imag/123.jpg" alt="" class="slider active"></a></li>
            <li><a href="#"><img src="imag/234.jpg" alt="" class="slider "></a></li>
            <li><a href="#"><img src="imag/345.jpg" alt=""class="slider "></a></li>
            <li><a href="#"><img src="imag/456.jpg" alt=""class="slider "></a></li>
            <li><a href="#"><img src="imag/567.jpg" alt=""class="slider "></a></li>

        </ul>

        <ol class="bar">

        </ol>
        <!--左右焦点-->
        <div id="arr">
                    <span id="left">
                        <
                    </span>
            <span id="right">
                        >
                    </span>
        </div>
    </div>
</div>
<script>
    function my$(id) {
        return document.getElementById(id);
    }

    //获取各元素，方便操作
    var box=my$("box");
    var inner=box.children[0];
    var ulObj=inner.children[0];
    var list=ulObj.children;
    var olObj=inner.children[1];
    var arr=my$("arr");
    var imgWidth=inner.offsetWidth;
    var right=my$("right");
    var pic=0;
    //根据li个数，创建小按钮
    for(var i=0;i<list.length;i++){
        var liObj=document.createElement("li");

        olObj.appendChild(liObj);
        liObj.innerText=(i+1);
        liObj.setAttribute("index",i);

        //为按钮注册mouseover事件
        liObj.οnmοuseοver=function () {
            //先清除所有按钮的样式

            for (var j=0;j<olObj.children.length;j++){
                olObj.children[j].removeAttribute("class");
            }
            this.className="current";
            pic=this.getAttribute("index");
            animate(ulObj,-pic*imgWidth);
        }

    }


    //设置ol中第一个li有背景颜色
    olObj.children[0].className = "current";
    //克隆一个ul中第一个li,加入到ul中的最后=====克隆
    ulObj.appendChild(ulObj.children[0].cloneNode(true));

    var timeId=setInterval(onmouseclickHandle,1000);
    //左右焦点实现点击切换图片功能
    box.onmusever=function () {
        arr.style.display="block";
        clearInterval(timeId);
    };
    box.onmusever=function () {
        arr.style.display="none";
        timeId=setInterval(onmouseclickHandle,1000);
    };

    right.οnclick=onmouseclickHandle;
    function onmouseclickHandle() {
        //如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,
        //所以,如果用户再次点击按钮,用户应该看到第二个图片
        if (pic == list.length - 1) {
            //如何从第6个图,跳转到第一个图
            pic = 0;//先设置pic=0
            ulObj.style.left = 0 + "px";//把ul的位置还原成开始的默认位置
        }
        pic++;//立刻设置pic加1,那么此时用户就会看到第二个图片了
        animate(ulObj, -pic * imgWidth);//pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片
        //如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,
        if (pic == list.length - 1) {
            //第五个按钮颜色干掉
            olObj.children[olObj.children.length - 1].className = "";
            //第一个按钮颜色设置上
            olObj.children[0].className = "current";
        } else {
            //干掉所有的小按钮的背景颜色
            for (var i = 0; i < olObj.children.length; i++) {
                olObj.children[i].removeAttribute("class");
            }
            olObj.children[pic].className = "current";
        }
    }
    left.οnclick=function () {
        if (pic==0){
            pic=list.length-1;
            ulObj.style.left=-pic*imgWidth+"px";
        }
        pic--;
        animate(ulObj,-pic*imgWidth);
        for (var i = 0; i < olObj.children.length; i++) {
            olObj.children[i].removeAttribute("class");
        }
        //当前的pic索引对应的按钮设置颜色
        olObj.children[pic].className = "current";
    };

    //设置任意的一个元素,移动到指定的目标位置
    function animate(element, target) {
        clearInterval(element.timeId);
        //定时器的id值存储到对象的一个属性中
        element.timeId = setInterval(function () {
            //获取元素的当前的位置,数字类型
            var current = element.offsetLeft;
            //每次移动的距离
            var step = 10;
            step = current < target ? 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";
            }
        }, 10);
    }
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

Correction status：qualified

Teacher's comments：下次不要积压作业了
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！