JavaScript案例——图片的轮播效果、动态生成表格、下拉框左右选择以及动画效果

最新推荐文章于 2024-05-14 21:55:20 发布

Cl_Daisy

最新推荐文章于 2024-05-14 21:55:20 发布

阅读量1.3k

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/Cl_Daisy/article/details/78228161

版权

本文介绍了如何使用JavaScript实现四个功能：一是通过<<和>>按钮实现图片轮播效果；二是动态创建表格；三是实现下拉框左右选择功能；四是添加动画效果，当鼠标悬停时显示详细信息。

摘要由CSDN通过智能技术生成

1.图片的轮播效果
（1）图片轮播的原理：
点击下面的<<按钮或者>>按钮实现轮播

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .dian{
                font-size: 80px;
                color: gray;
            }
            .dian span{
                color: coral;
            }
        </style>
        <script>
            window.onload = function(){
    
                var div = document.getElementsByTagName("div")[0];
                var left = document.getElementsByTagName("input")[0];
                var right = document.getElementsByTagName("input")[1];
                left.onclick = function(){
    
                    var arr = div.textContent.split(",");
                    arr.push(arr[0]);
                    arr.shift();
                    div.innerHTML = arr;
                }

                right.onclick = function(){
    
                    var arr = div.textContent.split(",");
                    arr.unshift(arr[arr.length-1]);
                    arr.pop();
                    div.innerHTML = arr;
                }

            }
        </script>
    </head>
    <body>

        <div>1,2,3,4,5</div>
        <div class="dian"><span>·</span>···</div>
        <input type="button" value="<<" />
        <input type="button" value=">>" />


    </body>
</html>

轮播原理

（2）轮播的实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            #img_show{
                width: 500px;
                height: 500px;
                border: 1px solid gray;
                margin: 10px;

            }

            #img_show img{
                width: 500px;
            }

            #small_img img{
                border: 1px solid gainsboro;