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

随机推荐

整合ssm三大框架使用注解开发查询用户信息
整合ssm三大框架使用注解开发查询用户信息一.基础知识准备之spring mvc工作原理二.分析第一步:发起请求到前端控制器(DispatcherServlet) 第二步:前端控制器请求Hand ...
JavaScript点击事件——美女合集
Js点击事件--美女合集实例效果如下图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> < ...
oracle SQL in plsql
刚安装好的oracle和plsql,以oracle11g为例 1.刚安装好后有两个默认的系统账号和初始密码:sys/change_on_install,system/manager 2.如果忘记了或不 ...
影视感悟专题---1、B站-魔兽世界代理及其它乱七八糟
影视感悟专题---1.B站-魔兽世界代理及其它乱七八糟一.总结一句话总结: 看过的东西都可以学下,这样既可以学习那些东西,都是对自己生活学习有帮助的,还可以弥补自己每天学的东西的不够 1.< ...
CentOS7.4下载与安装、使用
CentOS7.4下载与安装 1:安装步骤这篇博客挺详细的就不多说了: https://blog.csdn.net/qq_39135287/article/details/83993574 2:安装好 ...
read_ila
close all; clc; %clear; %点数 %point=40960; fft_point=200; show_point=200; end_point=1024; FS=30.72;%% ...
奖项-MVP：MVP（微软最有价值专家）百科
ylbtech-奖项-MVP:MVP(微软最有价值专家)百科微软最有价值专家(MVP) 是指具备一种或多种微软技术专业知识,并且积极参与在线或离线的社群活动,经常与其他专业人士分享知识和专业技能,受 ...
Linux 命令详解 - ps
完整文档 ps 命令用于显示命令执行瞬间的进程状态(Process Status).如果想动态查看进程状态可以使用 top 命令. 进程的概念进程类型前台进程:由终端初始化,可以通过命令行进行交互 ...
Python-位操作 ( &,|,~,^,<<,>>
用于提高运算速度,规避算术运算符在位操作运算中,不应该试图考虑先得到一个数的二进制码 ,而是应该将这个数看作是一个二进制码,二进制补码与整数之间是一一对应的. 诚然Python中有内置函数bin将一 ...
Maven系列学习(二)Maven使用入门
Maven使用入门通过上一节的学习,我们已经了解和配置好了Maven,接下来需要编写代码了 1.POM(Project Object Model,项目对象模型) 和Make的Makefile类似,M ...

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

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

随机推荐

热门专题