javascript图片轮播的简单实现

最新推荐文章于 2024-04-27 09:07:55 发布

码上有戏

最新推荐文章于 2024-04-27 09:07:55 发布

阅读量970

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript 轮播

本文链接：https://blog.youkuaiyun.com/code_boy_xmu/article/details/43939747

javascript 专栏收录该内容

0 篇文章

订阅专栏

本文介绍如何仅使用原生JavaScript实现图片轮播效果，包括前后切换及自定义特效。

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

目前许多的javascript框架都带有图片轮播的功能，但是我们也应该知道如何用单纯的javascript代码来实现属于我们自己的轮播程序。那么，如果你是新手并且感兴趣的话，请跟我一起来实现一个最简单的图片轮播。
图片轮播的主要原理：将图片包裹在一个小容器内，再把这个小容器装到大容器中，通过控制小容器的left属性（小容器是relative定位的），来实现图片的轮播。当然，前提是你要把大容器的宽度控制好，并且设置其overflow为hidden。
废话不多说，下面上代码，整个页面代码就一百行，相信大家都能看懂。

<!DOCTYPE html>
<html>
    <head>  
        <style type="text/css">
            #photos_can{
                overflow: hidden;
                width: 472px;
                height: 313px;
            }
            #photos{
                width: 10000px;
                position: relative;
            }

            #photos div{
                width: 472px;
                float: left;

            }

            #photos div img{
                width: 100%;
            }
        </style>
    </head>

    <body>
        <div id="container">
            <div id="photos_can">
                <div id="photos">
                    <div>
                        <img src="01.jpg" />
                    </div>
                    <div>
                        <img src="02.jpg" />
                    </div>
                    <div>
                        <img src="03.jpg" />
                    </div>
                    <div>
                        <img src="04.jpg" />
                    </div>
                    <div>
                        <img src="05.jpg" />
                    </div>

                </div>
            </div>
            <button id="pre">pre</button>
            <button id="next">next</button>
        </div>


        <script type="text/javascript">
            //构造函数(图片容器,前一张,后一张,每张照片的宽度,照片数量)
            function Carousel(photos,pre_btn,next_btn,photo_width,count)
            {
                this.photos = photos;
                this.photo_width = photo_width;
                this.count = count;
                this.current = 1;
                this.pre_btn = pre_btn;
                this.next_btn = next_btn;
            }

            //利用闭包实现事件绑定
            Carousel.prototype.bind = function createFun(func,obj,args)
            {
                return function(){
                    func.call(obj,args);
                };

            }

            //前一张图片方法
            Carousel.prototype.pre = function(){

                this.current == 1 ? this.current = this.count : this.current--;

                this.photos.style.left = -(this.current - 1) * this.photo_width + "px";

            };

            //后一张图片方法
            Carousel.prototype.next = function(){

                this.current == this.count? this.current = 1 : this.current++;

                this.photos.style.left = -(this.current - 1) * this.photo_width + "px";

            };

            //初始化，对按钮绑定事件
            Carousel.prototype.init = function(){

                this.pre_btn.onclick = this.bind(this.pre,this);
                this.next_btn.onclick = this.bind(this.next,this);

            };

            //测试
            var photos = document.getElementById("photos");
            var pre_btn = document.getElementById("pre");
            var next_btn = document.getElementById("next");
            var carousel = new Carousel(photos,pre_btn,next_btn,472,5);

            carousel.init();

        </script>
    </body>
</html>

[初始化界面](https://img-blog.youkuaiyun.com/20150225194227038)
OK，点击next或者pre测试一下吧。
[点击next](https://img-blog.youkuaiyun.com/20150225194323151)

当然了，我们也可以自己为程序加上淡入、淡出或者滑动之类的特效，这就由大家去发挥啦。
代码中间有一个注意的地方就是事件的绑定。在事件函数中，我们使用到了this，那么如果我们直接绑定的话，this代表的将会是你点击的按钮。因此，要通过闭包来实现this指代的是轮播的对象。详细的可参考我的代码。也欢迎大家指正我文章中的错误！