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> ...

随机推荐

修改mac下homebrew的源加快下载速度
把源改为清华的镜像 # HOMEBREW_BOTTLE_DOMAIN就是目标源修改这个路径就可以里 echo 'export HOMEBREW_BOTTLE_DOMAIN=https://mirro ...
React Hooks简单业务场景实战（非源码解读）
前言 React Hooks 是React 16.7.0-alpha 版本推出的新特性.从 16.8.0 开始,React更稳定的支持了这一新特性. 它可以让你在不编写 class 的情况下使用 st ...
Python笔记(十三)_os模块和os.path模块
os模块中关于文件/目录常用的函数使用方法 getcwd() 返回当前工作目录 chdir(path) 改变工作目录 listdir(path='.') 列举指定目录中的文件名('.'表示当前目录,' ...
JavaScript LoopQueue
function Queue() { var items = []; this.enqueue = function(element) { items.push(element) } this.deq ...
Unable to load dynamic library 'zip.so' on Centos 6.8 useing php7.3
背景: Centos6.8服务器升级php版本,从7.1升级到7.3,常用扩展都安装完成之后,报:Class 'ZipArchive' not found.一看就是zip扩展没有,需要手动安装了. 中 ...
Java连接SQL Server：jTDS驱动兼容性问题
Java连接SQL Server 2000数据库时,有两种方法: (1)通过Microsoft的JDBC驱动连接.此JDBC驱动共有三个文件,分别是mssqlserver.jar.msutil.jar ...
使用git、git-flow与gitlab工作
使用git.git-flow与gitlab工作 1. 摘要在工作中使用git代替svn也有一段时间了,对于git的一些特性喜爱的同时也一直遇到相同的问题:“这时候应该打什么命令?”.相对于svn或者 ...
Maven入门指南10：Maven的生命周期和插件
一个完整的项目构建过程通常包括清理.编译.测试.打包.集成测试.验证.部署等步骤,Maven从中抽取了一套完善的.易扩展的生命周期.Maven的生命周期是抽象的,其中的具体任务都交由插件来完成.Mav ...
vue 实现模糊检索，并根据其他字符的首字母顺序排列
昨天让我做一个功能,实现一个模糊检索,我就想,那做呗,然后开始正常的开发代码如下: HTML VUE 因为是实时的,所以写了将逻辑写到了watch中五分钟搞定. 我以为这就完了,然而产品的需求 ...
[烧脑时刻]EL表达式1分钟完事
一天,程序员A问我,我们比比谁的知识点多,反应快.我回答:那就看谁最快用EL表达式的显示在页面上吧. 话不多说,计时开始. 项目的结构如上,大概就是一个Family的JavaBean,一个jsp页面, ...

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

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

随机推荐

热门专题