返回总目录页

js案例学习

 

 感觉就像看数学题答案研究解决思路

1、多个事物间的手动切换和自动切换（图片切换）

1.1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="box">
            <img src="images/1.jpg" alt="" id="imgBox">
        </div>
        <button id="prev">上一张</button>
        <button id="next">下一张</button>

        <script type="text/javascript">
            var imgBox = document.getElementById('imgBox');
            var next = document.getElementById('next');
            var prev = document.getElementById('prev');
            var num = 1;
            next.onclick = function (){
                nextImg();
            }
            function nextImg(){
                num++;
                if(num === 5){
                    num = 1;
                }
                imgBox.src = `images/${num}.jpg`;
            }
            setInterval(nextImg,100);
        </script>
    </body>
</html>
View Code

图片效果：四个图片切换特别快，一直在变

 1.2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片切换</title>
</head>
<body>
    <!-- 4    1    4 -->
    <img src="images/image01.jpg" id="flower" width="200" height="200">
    <br>
    <button id="prev">上一张</button>
    <button id="next">下一张</button>
    <script type="text/javascript">
        // 1.获取事件源 需要的标签
        var flower = document.getElementById('flower');
        var nextBtn = document.getElementById('next');
        var prevBtn  = document.getElementById('prev');

        var minIndex = 1,maxIndex = 4; currentIndex = minIndex;
        // 2.监听按钮的点击
        nextBtn.onclick = function(){
            if(currentIndex === maxIndex){
                // 到最后一张了
                currentIndex = minIndex;
            }else{
                currentIndex++;
            }
            
            flower.setAttribute('src',`images/image0${currentIndex}.jpg`)
        }

        prevBtn.onclick = function(){
            if(currentIndex === minIndex){
                // 到最后一张了
                currentIndex = maxIndex;
            }else{
                currentIndex--;
            }
            flower.setAttribute('src',`images/image0${currentIndex}.jpg`)
        }

    </script>

</body>
</html>
View Code

总结：

要求一个图片或其它对象，两个按钮，上一个下一个。实现多个对象靠按钮来显示
这里举图片栗子：
举例子：四张图，显示一张。上一张下一张能切换图。
前提：那么，首先需要一个img，换行，两个button上一张下一张。并给它们id以便调用
1）创建img和button1,2的DOM对象 document.getElementById('flower');
2）定义三变量：最小索引1，最大索引4，当前索引是最小索引
3）绑定下一张按钮事件，如果当前索引===最大索引，那么点击下一张后就重新赋值让当前索引变成最小，否则当前索引自增。img对象设置属性 src 为有当前索引的照片
4）绑定上一张按钮事件。如果当前索引===最小，那么点击之后就让索引变成最大索引，否则当前索引-- 。有了索引那么在点击事件中让它图片对象.设置属性 src 改为有当前索引的图片

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="box">
            <img src="images/1.jpg" alt="" id="imgBox">
        </div>
        <button id="prev">上一张</button>
        <button id="next">下一张</button>

        <script type="text/javascript">
            var imgBox = document.getElementById('imgBox');
            var next = document.getElementById('next');
            var prev = document.getElementById('prev');
            var num = 1;
            next.onclick = function (){
                nextImg();
            }
            function nextImg(){
                num++;
                if(num === 5){
                    num = 1;
                }
                imgBox.src = `images/${num}.jpg`;
            }
        </script>
    </body>
</html>
View Code

效果;点击下一张就能切到下一张图片

 

2、靠按钮点击等事件显示隐藏内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示和隐藏图片</title>
</head>
<body>
    <button id="btn">隐藏</button>
    <br>
    <img src="images/img01.jpg" id="new">
    <script type="text/javascript">
        // 1.获取事件源
        var obtn = document.getElementById('btn');
        var newImg = document.getElementsByTagName('img')[0];
        // var isShow = true;
        // 2.绑定事件
        obtn.onclick = function(){
            // 3.事件驱动程序
            if(obtn.innerHTML === '隐藏'){
                newImg.style.display = 'none';
                obtn.innerHTML = '显示';
                // isShow = false;
            }else{
                newImg.style.display = 'block';
                obtn.innerHTML = '隐藏';
                // isShow = true;
            }
        }

    </script>
    
</body>
</html>
View Code

总结：

需求：显示隐藏内容
举例子；显示隐藏图片
前提：一个button，一个img，br换行
1）创建按钮和图片的DOM对象
2）绑定(点击)事件，如下做：如果按钮内html===隐藏，点击之后就让图片.样式.展示就=none，并修改按钮内html为显示；否则(按钮内html===显示)，点击之后让图片.样式.展示=块，并将按钮.文本改为隐藏，方便下次需要隐藏时点击隐藏

 

3、四一变大小衣服相册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03 衣服相册</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
            overflow: hidden;
        }
        ul li{
            float: left;
            width: 50px;
            height: 50px;
            margin-left: 10px;
            margin-top: 20px;
            border: 2px solid #fff;
        }
        ul li.active{
            border-color: red;
        }

    </style>
</head>
<body>
    <img src="images/1.jpg" id="bigImg">
    <ul>
        <li class="active">
            <a href="">
                <img src="images/1.jpg" width="46"  class="smallImg">
            </a>
        </li>
        <li>
            <a href="">
                <img src="images/2.jpg" width="46" class="smallImg">
            </a>
        </li>
        <li>
            <a href="">
                <img src="images/3.jpg" width="46" class="smallImg">
            </a>
        </li>
        <li>
            <a href="">
                <img src="images/4.jpg" width="46" class="smallImg">
            </a>
        </li>
        <li>
            <a href="">
                <img src="images/5.jpg" width="46" class="smallImg">
            </a>
        </li>
    </ul>
    <script type="text/javascript">
        // 1.获取事件源
        var bigImg  = document.getElementById('bigImg');
        var smallImgs  = document.getElementsByClassName('smallImg');

        for(var i = 0; i < smallImgs.length; i++){
            //2. 遍历集合，给每个img标签添加事件
            smallImgs[i].onmouseover = function(){

                // 3.事件处理程序
                // 3.1 在悬浮到每个li标签之前，先把所有的li标签的类名都置为空值
                for(var j = 0; j < smallImgs.length; j++){
                    smallImgs[j].parentNode.parentNode.setAttribute('class', '');
                }

                // 3.2修改大图的src属性值
                var smallImgSrc = this.getAttribute('src');
                bigImg.setAttribute('src',smallImgSrc);

                // 3.3 给鼠标悬浮的img标签的父标签添加类
                this.parentNode.parentNode.setAttribute('class', 'active');
            }
        }




    </script>
</body>
</html>
View Code

总结：

需求：衣服相册，悬浮多个之一，显示这个变大或其它
举例子：一个大图下四小图，悬浮某个小则小变大，小加红框，网页打开默认第一个小li为红框且大图显示
前提：src为第一个li的img有大的样式；一个ul，四个li下a标签下img都有同样的小的类样式并且同行显示(list-style: none;)和超出的隐藏(overflow: hidden;)，但第一个li有红框的类名
1）定义 大图img对象；定义小图img对象
2）for循环小图对象，做如下；
第i个绑定鼠标over悬浮事件做如下操作：
　　 [1]取消有红框的类名:
　　　　 排它思想，欲设新的先取消旧的：for循环小图对象，小图.父(a).父(li).set属性类名为空的
　　[2]获取悬浮对象src：this(悬浮事件的对象).get属性为src，
　　[3]大图.set属性src为悬浮对象的src
　　[4]悬浮对象.父(a).父(li).set属性红框类名

 

 

 

小广告，父盒子黄，上下margin100 让它原位置占了200加自身高，左右auto让它水平居中，。再来左浮的盒子就在蓝色地方了

广告独占一行了的，别人占不了。

 

 

 

 

 

 

posted @ 2019-06-05 00:24  马昌伟  阅读(427)  评论(0)  编辑  收藏  举报
博主链接地址：https://www.cnblogs.com/machangwei-8/