使用JS制作简易图片轮播效果

最新推荐文章于 2021-10-06 09:53:22 发布

新凉

最新推荐文章于 2021-10-06 09:53:22 发布

阅读量1.2k

点赞数

分类专栏： JavaScript每日练习文章标签： javascript

本文链接：https://blog.csdn.net/TTO_OTT/article/details/44562997

版权

JavaScript每日练习专栏收录该内容

20 篇文章 1 订阅

订阅专栏

使用JS制作简易图片轮播效果：

制作比较粗糙，使用的图片是width：660ppx,height：550px;

效果图：

--------------------------------------------------华丽丽的分界线----------------------------------------------

代码部分如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JS幻灯代码</title>
    <script type="text/javascript">
        window.onload = function () {
            flag = 0;
            obj1 = document.getElementById("slider");
            obj2 = document.getElementsByTagName("li");
            obj2[0].style.backgroundColor = "#666666";//默认被选中颜色
            time = setInterval("turn();", 5000);

            obj1.onmouseover = function () {
                clearInterval(time);
                
            }
            obj1.onmouseout = function () {
                time = setInterval("turn();", 6000);
            }

            for (var num = 0; num < obj2.length; num++) {
                obj2[num].onmouseover = function () {
                    turn(this.innerHTML);
                    clearInterval(time);
                }
                obj2[num].onmouseout = function () {
                    time = setInterval("turn();", 6000);
                }
            }
            //延迟加载图片，演示的时候，使用本地图片，上线后请改为二级域名提供的图片地址
            document.getElementById("second").src = "images/2.png";//使用图片宽660，高550
            document.getElementById("third").src = "images/3.png";
            document.getElementById("four").src = "images/4.png";

        }

        function turn(value) {
            if (value != null) {
                flag = value - 2;
            }
            if (flag < obj2.length - 1)
                flag++;
            else
                flag = 0;
            obj1.style.top = flag * (-550) + "px";
            for (var j = 0; j < obj2.length; j++) {
                obj2[j].style.backgroundColor = "#ffffff";
            }
            obj2[flag].style.backgroundColor = "#666666";
        }

    </script>
    <style type="text/css">
        #wrap
        {
            height: 550px;
            width: 660px;
            overflow: hidden;
            position: relative;
            overflow: hidden;
        }
        #wrap ul
        {
            list-style: none;
            position: absolute;
            top: 500px;
            left: 450px;
        }
        #wrap li
        {
            margin-left:2px;
            opacity: .3;
            filter: alpha(opacity=30);
            text-align: center;
            line-height: 30px;
            font-size: 20px;
            height: 30px;
            width: 30px;
            background-color: #fff;
            float: left;
            border-radius:3px;
            cursor:pointer;
        }

        #slider
        {
            position: absolute;
            top: 0px;
            left: 0px;
        }
        #slider img
        {
            float: left;
            border: none;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="slider">
            <a target="_blank" href="#"><img src="images/1.png" /></a>
            <a target="_blank" href="#"><img id="second" /></a>
            <a target="_blank" href="#"><img id="third" /></a>
            <a target="_blank" href="#"><img id="four" /></a>
        </div>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
</body>
</html>