JavaScript练习（三）简单的轮播器原理代码

最新推荐文章于 2025-06-25 16:09:20 发布

最新推荐文章于 2025-06-25 16:09:20 发布 · 886 阅读

前端笔记专栏收录该内容

25 篇文章

订阅专栏

本文提供了一段用于轮播图的基本实现代码，通过数组控制图片显示或利用overflow：hidden方法调整元素显示位置，旨在帮助读者理解轮播图的工作原理并进行实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个只是我练习用的原理代码，没有什么好看的特效和精明的代码，那些想要明白轮播是怎么个原理的朋友可以参考一下，自己试验试验。唉，现在的我还写不出精妙的代码，一起努力吧。
轮播有两种思想：
1：用一个数组来放图片，用下标控制（不实用）。
2：overflow：hiden的方法，用left值来控制显示的东西。
我写的是第二种，写的可能不是很好（兼容啊，容错啊），希望有高人可以指点一二，谢谢了。
（写了一个left，right 和轮播可以自己当练习来用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload=function(){
        var _left=document.getElementById("left"),
                _moveul=document.getElementById("move_ul");
            var i=0;
        _left.onclick=function(){
            if(i<5){
            var left=parseInt(_moveul.offsetLeft,10),
                    leftadd=left-300;
            _moveul.style.left=leftadd+"px";
                i++;
        }else{
                _moveul.style.left=0;
                i=0;
            }
        }
        }
    </script>
    <style>
        *{
            padding:0;
            margin:0;
            list-style: none;
        }
        #test{
            position:relative;
            height:300px;
            width:300px;
            left:100px;
            box-shadow: 1px 1px 12px #666666;
            overflow: hidden;
        }
        .move_ul{
            position:absolute;
            left:0;
            width:1800px;
            transition: all .2s ease-in-out 0s;
        }
        .move_ul>li{
            float:left;

        }
        .move_ul>li>img{
            width:300px;
            height:300px;
        }
    </style>
</head>
<body>
<div id="test">
    <ul id="move_ul" class="move_ul">
        <li><img src="imags/1.jpg"/></li>
        <li><img src="imags/2.jpg" /></li>
        <li><img src="imags/3.jpg"/></li>
        <li><img src="imags/4.jpg"/></li>
        <li><img src="imags/5.jpg"/></li>
        <li><img src="imags/6.jpg"/></li>
    </ul>
</div>
<button id="left">Left</button>
</body>
</html>