1. 插件效果图:
  2. 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>
  3. css代码如下:
       * {
    margin:;
    padding:;
    } body {
    background-color: #efd;
    }
    #container {
    width: 800px;
    height: 400px;
    position: relative;
    margin: 50px auto;
    }
  4. 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);
    }
    };
  5. 最后 调用代码:
    window.onload = function () {
    new Carousel();
    }
  6. 页面最终代码:
    <!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插件-图片椭圆轮播效果的更多相关文章

  1. Bootstrap插件之Carousel轮播效果(2015年-05月-21日)

    <!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"& ...

  2. 使用 jQuery 中的淡入淡出动画,实现图片的轮播效果,每隔 2 秒钟切换一张图片,共 6 张图片

    查看本章节 查看作业目录 需求说明: 使用 jQuery 中的淡入淡出动画,实现图片的轮播效果,每隔 2 秒钟切换一张图片,共 6 张图片,切换到第 6 张后从头开始切换,在图片的下方显示 6 个小圆 ...

  3. js实现图片无缝轮播

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. JS实现焦点图轮播效果

    大家平时逛淘宝网的时候,在首页就能看到焦点图轮播的效果,就是这个样子的: PS:想起每每打开淘宝,总会被这个玩意先夺眼球,偶尔还去点进去溜溜,幸好我定力好,总能控制住自己的购买欲望,为自己不用剁手感到 ...

  5. JS实现小图放大轮播效果

    JS实现小图放大轮播页面效果入下(图片为优行商旅页面照片): 实现效果:图片自动轮播,鼠标移入停止,移出继续轮播点击下方小图可以实现切换 步骤一:建立HTML布局,具体如下: <body> ...

  6. 通过jquery js 实现幻灯片切换轮播效果

    观察各个电商网址轮播图的效果,总结了一下主要突破点与难点 1.->封装函数的步骤与具体实现 2->this关键字的指向 3->jquery js函数熟练运用 如animate 4-& ...

  7. js实现简单的轮播效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. js的轮播效果

    图片的轮播效果!主要运用了元素的style样式属性,与 setInterval(); <!DOCTYPE html> <html> <head lang="en ...

  9. JS、JQ实现焦点图轮播效果

    JS实现焦点图轮播效果 效果图: 代码如下,复制即可使用: (不过里面的图片路径需要自己改成自己的图片路径,否则是没有图片显示的哦) <!DOCTYPE html> <html> ...

随机推荐

  1. eureka注册中心wro.css wro.js 404

    注册中心和配置中心放在一个module里面,如果不配置配种中心的访问前缀,会被config拦截.所以改动如下: package com.cloud.stagging.lhcloudeureka; im ...

  2. jsc2019_qualE Card Collector

    题目大意 给你n个点的坐标和权值 问先在每一行选一个点再在每一列选一个没选过的点 求最大权值和 分析 可以想到将点转化为边,将两个坐标对应两个点 所以问题转化为选H+W个边 使得所有边的度都不为0 则 ...

  3. 16/7/14-MySQL-关键字

    Mysql 关键字-保留字 转载:http://linux.it.net.cn/e/data/mysql/2014/1202/9460.html 时间:2014-12-02 13:09来源:linux ...

  4. Feedforward and BackPropagation Algorithm

    在下图所示的Neural Network中,我们将拥有三个节点的layer1及layer4分别称为输入和输出层,而中间的两层layer2,layer3称为隐藏层(hidden layer).输入数据X ...

  5. 数据库学习之mysql数据库

    参考链接网站: http://c.biancheng.net/view/2361.html Mysql的版本以及版本号 MySQL Community Server(社区版):该版本完全免费,但是官方 ...

  6. app自动化appium使用内置adb命令

    一.Appium-server使用 1.登陆页面 高级设置:可以设置Android 和 IOS 日志级别:dabug非常详尽的日志 记录python代码向他发送的请求以及他在收到请求后做的一系列处理 ...

  7. 《JAVA设计模式》之状态模式(State)

    在阎宏博士的<JAVA与模式>一书中开头是这样描述状态(State)模式的: 状态模式,又称状态对象模式(Pattern of Objects for States),状态模式是对象的行为 ...

  8. 从0 开始手写一个 RPC 框架,轻松搞定!

    Java技术栈 www.javastack.cn 优秀的Java技术公众号 来源:juejin.im/post/5c4481a4f265da613438aec3 之前在 RPC框架底层到底什么原理得知 ...

  9. Codeforces 1119D(差分)

    题面 传送门 分析 先考虑\(O(nk)\)的做法,先按s从小到大排序,每个串的数显然形成了n个连续区间\([s_i+l,s_i+r]\),且这些区间的左端点升序排列,然后把区间合并就可以知道有多少个 ...

  10. 1233: [Usaco2009Open]干草堆tower

    传送门 感觉正着做不太好搞,考虑倒过来搞 容易想到贪心,每一层都贪心地选最小的宽度,然后发现 $WA$ 了... 因为一开始多选一点有时可以让下一层宽度更小 然后有一个神奇的结论,最高的方案一定有一种 ...