javascript图片轮播的简单实现

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


<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">prebutton>
            <button id="next">nextbutton>
        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.csdn.net/20150225194227038)
OK,点击next或者pre测试一下吧。
[点击next](https://img-blog.csdn.net/20150225194323151)

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

你可能感兴趣的:(javascript)