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

插件效果图：

html 代码如下：

 <div id="container">

        <img src="data:images/cartoon/1.jpg" />

        <img src="data:images/cartoon/2.jpg" />

        <img src="data:images/cartoon/3.jpg" />

        <img src="data:images/cartoon/4.jpg" />

        <img src="data:images/cartoon/5.jpg" />

        <img src="data:images/cartoon/6.jpg" />

        <img src="data:images/cartoon/7.jpg" />

        <img src="data:images/cartoon/8.jpg" />

        <img src="data:images/cartoon/9.jpg" />

        <img src="data:images/cartoon/10.jpg" />

        <img src="data:images/cartoon/11.jpg" />

        <img src="data:images/cartoon/12.jpg" />

        <img src="data:images/cartoon/13.jpg" />

        <img src="data:images/cartoon/14.jpg" />

        <img src="data:images/cartoon/15.jpg" />

    </div>

css代码如下：

   * {

            margin:;

            padding:;

        }

        body {

            background-color: #efd;

        }

        #container {

            width: 800px;

            height: 400px;

            position: relative;

            margin: 50px auto;

        }

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);

            }

        };

最后调用代码：

window.onload = function () {

            new Carousel();

        }

页面最终代码：

<!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="data:images/cartoon/1.jpg" />

        <img src="data:images/cartoon/2.jpg" />

        <img src="data:images/cartoon/3.jpg" />

        <img src="data:images/cartoon/4.jpg" />

        <img src="data:images/cartoon/5.jpg" />

        <img src="data:images/cartoon/6.jpg" />

        <img src="data:images/cartoon/7.jpg" />

        <img src="data:images/cartoon/8.jpg" />

        <img src="data:images/cartoon/9.jpg" />

        <img src="data:images/cartoon/10.jpg" />

        <img src="data:images/cartoon/11.jpg" />

        <img src="data:images/cartoon/12.jpg" />

        <img src="data:images/cartoon/13.jpg" />

        <img src="data:images/cartoon/14.jpg" />

        <img src="data:images/cartoon/15.jpg" />

    </div>

</body>

</html>

js插件-图片椭圆轮播效果的更多相关文章

Bootstrap插件之Carousel轮播效果（2015年-05月-21日）
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"& ...
使用 jQuery 中的淡入淡出动画，实现图片的轮播效果，每隔 2 秒钟切换一张图片，共 6 张图片
查看本章节查看作业目录需求说明: 使用 jQuery 中的淡入淡出动画,实现图片的轮播效果,每隔 2 秒钟切换一张图片,共 6 张图片,切换到第 6 张后从头开始切换,在图片的下方显示 6 个小圆 ...
js实现图片无缝轮播
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
JS实现焦点图轮播效果
大家平时逛淘宝网的时候,在首页就能看到焦点图轮播的效果,就是这个样子的: PS:想起每每打开淘宝,总会被这个玩意先夺眼球,偶尔还去点进去溜溜,幸好我定力好,总能控制住自己的购买欲望,为自己不用剁手感到 ...
JS实现小图放大轮播效果
JS实现小图放大轮播页面效果入下(图片为优行商旅页面照片): 实现效果:图片自动轮播,鼠标移入停止,移出继续轮播点击下方小图可以实现切换步骤一:建立HTML布局,具体如下: <body> ...
通过jquery js 实现幻灯片切换轮播效果
观察各个电商网址轮播图的效果,总结了一下主要突破点与难点 1.->封装函数的步骤与具体实现 2->this关键字的指向 3->jquery js函数熟练运用如animate 4-& ...
js实现简单的轮播效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
js的轮播效果
图片的轮播效果!主要运用了元素的style样式属性,与 setInterval(); <!DOCTYPE html> <html> <head lang="en ...
JS、JQ实现焦点图轮播效果
JS实现焦点图轮播效果效果图: 代码如下,复制即可使用: (不过里面的图片路径需要自己改成自己的图片路径,否则是没有图片显示的哦) <!DOCTYPE html> <html> ...

随机推荐

JSONP的产生，和ajax的异同！
先说说JSONP是怎么产生的: 其实网上关于JSONP的讲解有很多,但却千篇一律,而且云里雾里,对于很多刚接触的人来讲理解起来有些困难,着用自己的方式来阐释一下这个问题,看看是否有帮助. 1.一个众所 ...
python tensorflow windows环境搭建体验
1. 需先安装python3.7,anaconda包管理器(类似java的maven),tensorflow,pycharm开发工具.文末附件下载地址. 2. 安装tensorflow,开始-Anac ...
Fedora 26 安装搜狗拼音输入法 sogoupinyin
Fcitx 官方 wiki Fcitx GitHub Arch wiki 上关于 Fcitx 的资料故障排除可以参考这里 Fedora 中文社区 Fedora 中文社区软件源 Fcitx (Flex ...
远控CVE整理
Windows: CVE-2017-8464(通过快捷方式,可U盘/共享等途径传播)
JavaScript LinkedList
function LinkedList() { var Node = function(element) { this.element = element; this.next = null } va ...
洛谷 P5019 铺设道路 & [NOIP2018提高组]（贪心）
题目链接 https://www.luogu.org/problem/P5019 解题思路一道典型的贪心题. 假设从左往右填坑,如果第i个深与第i+1个,那么第i+1个就不需要额外填: 如果第i+1 ...
2015 GDUT校赛
周末打了个GDUT的校赛,也是作为SCAU的一场个人排位. 比赛中竟然卡了个特判,1个半钟就切了5条了,然后一直卡. 还有其他两条可以做的题也没法做了,性格太执着对ACM来说也是错呀. 讲回正题 . ...
SpringBoot-技术专区-详细打印启动时异常堆栈信息
SpringBoot在项目启动时如果遇到异常并不能友好的打印出具体的堆栈错误信息,我们只能查看到简单的错误消息,以致于并不能及时解决发生的问题,针对这个问题SpringBoot提供了故障分析仪的概念( ...
分布式ID增强篇--优化时钟回拨问题
原生实现本文承接sharding-jdbc源码之分布式ID,在这篇文章中详细介绍了sharding-jdbc的分布式ID是如何实现的:很遗憾的是sharding-jdbc只是基于snowflake算 ...
DevExpress 控件中设置分隔符
原文:DevExpress 控件中设置分隔符版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net ...

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

js插件-图片椭圆轮播效果的更多相关文章

随机推荐

热门专题