js插件-图片椭圆轮播效果

最新推荐文章于 2024-10-04 06:11:34 发布

anglu2716

最新推荐文章于 2024-10-04 06:11:34 发布

阅读量437

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/CharlieLau/p/4390664.html

版权

插件效果图：

html 代码如下：

 <div id="container">
        <img src="images/cartoon/1.jpg" />
        <img src="images/cartoon/2.jpg" />
        <img src="images/cartoon/3.jpg" />
        <img src="images/cartoon/4.jpg" />
        <img src="images/cartoon/5.jpg" />
        <img src="images/cartoon/6.jpg" />
        <img src="images/cartoon/7.jpg" />
        <img src="images/cartoon/8.jpg" />
        <img src="images/cartoon/9.jpg" />
        <img src="images/cartoon/10.jpg" />
        <img src="images/cartoon/11.jpg" />
        <img src="images/cartoon/12.jpg" />
        <img src="images/cartoon/13.jpg" />
        <img src="images/cartoon/14.jpg" />
        <img src="images/cartoon/15.jpg" />

    </div>

View Code

css代码如下：

   * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #efd;
        }
        #container {
            width: 800px;
            height: 400px;
            position: relative;
            margin: 50px auto;
        }

View Code

js Carousel类代码：

var Carousel = function (options) {

            this.settings = {
                imgs: [],
                imgWidth: 150,              //图片宽
                imgHeight: 100,             //图片高
                time: 0,
                rate: 0.5,                  //转动速度
                containerId: "container",   //包含图片容器id
                containerWidth: 800,        //包含图片容器宽
                containerHeight: 300,       //包含图片容器高
            };

            for (var item in options) {         //extend
                if (options.hasOwnProperty(item)) {
                    this.settings[item] = options[item];
                }
            }


            this.init.apply(this, arguments); //init
        };

        Carousel.prototype = {

            each: function (fn) {
                for (var index = 0; index < this.settings.imgs.length; index++)
                    fn.call(this.settings.imgs[index], index);
            },
            init: function () {
                var _this = this;

                this.settings.imgs = document.getElementById(this.settings.containerId).getElementsByTagName("img");

                this.each(function (index) {
                    this.style.width = _this.settings.imgWidth + "px";
                    this.style.height = _this.settings.imgHeight + "px";
                    this.style.position = "absolute";
                });

                document.onmousemove = function (event) {
                    var event = event || window.event, positionX;
                    var positionX = _this.getPageX(event);
                    console.log(positionX);
                    _this.settings.rate = (positionX - document.body.clientWidth / 2) / (document.body.clientWidth / 2) * 0.25;
                }
                this.play();
            },
            getPageX: function (event) {

                if (event.pageX) {
                    return event.pageX;
                } else {
                    return event.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft;
                }
            },
            play: function () {
                var _this = this;
                setInterval(function () {
                    var that = _this.settings;
                    that.count = _this.settings.imgs.length;
                    that.time += that.rate * 40 / 1000;
                    _this.each(function (index) {            //算法BaiDu所得
                        this.style.left = (Math.sin(2 * Math.PI * that.time + 2 * Math.PI / that.count * index) + 1) * (that.containerWidth - that.imgWidth) / 2 + "px";
                        this.style.top = (Math.cos(2 * Math.PI * that.time + 2 * Math.PI / that.count * index) + 1) * (that.containerHeight - that.imgHeight) / 2 + "px";
                        this.style.width = (Math.cos(2 * Math.PI * that.time + 2 * Math.PI / that.count * index) + 1) * that.imgWidth / 2 + that.imgWidth / 2 + "px";
                        this.style.height = (Math.cos(2 * Math.PI * that.time + 2 * Math.PI / that.count * index) + 1) * that.imgHeight / 2 + that.imgHeight / 2 + "px";
                        this.style.zIndex = Math.floor((Math.cos(2 * Math.PI * that.time + 2 * Math.PI / that.count * index) + 1) * 10);
                    })
                }, 40);
            }
        };

View Code

最后调用代码：

window.onload = function () {
            new Carousel();
        }

View Code

页面最终代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #efd;
        }
        #container {
            width: 800px;
            height: 400px;
            position: relative;
            margin: 50px auto;
        }

    </style>
    <script>
        var Carousel = function (options) {

            this.settings = {
                imgs: [],
                imgWidth: 150,              //图片宽
                imgHeight: 100,             //图片高
                time: 0,
                rate: 0.5,                  //转动速度
                containerId: "container",   //包含图片容器id
                containerWidth: 800,        //包含图片容器宽
                containerHeight: 300,       //包含图片容器高
            };

            for (var item in options) {         //extend
                if (options.hasOwnProperty(item)) {
                    this.settings[item] = options[item];
                }
            }


            this.init.apply(this, arguments); //init
        };

        Carousel.prototype = {

            each: function (fn) {
                for (var index = 0; index < this.settings.imgs.length; index++)
                    fn.call(this.settings.imgs[index], index);
            },
            init: function () {
                var _this = this;

                this.settings.imgs = document.getElementById(this.settings.containerId).getElementsByTagName("img");

                this.each(function (index) {
                    this.style.width = _this.settings.imgWidth + "px";
                    this.style.height = _this.settings.imgHeight + "px";
                    this.style.position = "absolute";
                });

                document.onmousemove = function (event) {
                    var event = event || window.event, positionX;
                    var positionX = _this.getPageX(event);
                    console.log(positionX);
                    _this.settings.rate = (positionX - document.body.clientWidth / 2) / (document.body.clientWidth / 2) * 0.25;
                }
                this.play();
            },
            getPageX: function (event) {

                if (event.pageX) {
                    return event.pageX;
                } else {
                    return event.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft;
                }
            },
            play: function () {
                var _this = this;
                setInterval(function () {
                    var that = _this.settings;
                    that.count = _this.settings.imgs.length;
                    that.time += that.rate * 40 / 1000;
                    _this.each(function (index) {
                        this.style.left = (Math.sin(2 * Math.PI * that.time + 2 * Math.PI / that.count * index) + 1) * (that.containerWidth - that.imgWidth) / 2 + "px";
                        this.style.top = (Math.cos(2 * Math.PI * that.time + 2 * Math.PI / that.count * index) + 1) * (that.containerHeight - that.imgHeight) / 2 + "px";
                        this.style.width = (Math.cos(2 * Math.PI * that.time + 2 * Math.PI / that.count * index) + 1) * that.imgWidth / 2 + that.imgWidth / 2 + "px";
                        this.style.height = (Math.cos(2 * Math.PI * that.time + 2 * Math.PI / that.count * index) + 1) * that.imgHeight / 2 + that.imgHeight / 2 + "px";
                        this.style.zIndex = Math.floor((Math.cos(2 * Math.PI * that.time + 2 * Math.PI / that.count * index) + 1) * 10);
                    })
                }, 40);
            }
        };

        window.onload = function () {
            new Carousel();
        }

    </script>


</head>
<body>

    <div id="container">
        <img src="images/cartoon/1.jpg" />
        <img src="images/cartoon/2.jpg" />
        <img src="images/cartoon/3.jpg" />
        <img src="images/cartoon/4.jpg" />
        <img src="images/cartoon/5.jpg" />
        <img src="images/cartoon/6.jpg" />
        <img src="images/cartoon/7.jpg" />
        <img src="images/cartoon/8.jpg" />
        <img src="images/cartoon/9.jpg" />
        <img src="images/cartoon/10.jpg" />
        <img src="images/cartoon/11.jpg" />
        <img src="images/cartoon/12.jpg" />
        <img src="images/cartoon/13.jpg" />
        <img src="images/cartoon/14.jpg" />
        <img src="images/cartoon/15.jpg" />

    </div>

</body>
</html>