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> ...
随机推荐
- [hadoop](2) MapReducer:Distributed Cache
前言 本章主要内容是讲述hadoop的分布式缓存的使用,通过分布式缓存可以将一些需要共享的数据在各个集群中共享. 准备工作 数据集:ufo-60000条记录,这个数据集有一系列包含下列字段的UFO目击 ...
- XML大作业
XML大作业 共两题,均于实验上机完成 第一题:在xml文档中使用DTD 第二题:掌握使用xsl显示xml文件的基本方法 第一题: 一.实验目的 (1)通过本实验,使学生能够了解并掌握XML DTD的 ...
- 匿名函数 sorted() filter() map() 递归函数
一. lambda() 匿名函数 说白了,从字面理解匿名函数就是看不见的函数,那么他的看不见表现在哪里呢? 其实就是在查询的时候他们的类型都是lambda的类型所以叫匿名,只要是用匿名函数写的大家 ...
- MySQL 案例：计算环比
select a.day_num as "序号", a.create_time as "上架时间", a.clue_num as "上架车源量&quo ...
- day38—JavaScript的运动基础-匀速运动
转行学开发,代码100天——2018-04-23 一.运动基础框架 JavaScript的运动可以广义理解为渐变效果,直接移动效果等,图网页上常见的“分享到”,banner,透明度变化等.其实现的基本 ...
- Linux-磁盘配额
磁盘配额作用是限制普通用户使用的磁盘空间和创建文件的个数,不至于因为个别人的浪费而影响所有人的使用,需要内核的支持 注意:目前只有 ext2 ext3文件系统支持 需要用户程序quota程序包 先查看 ...
- delphi 获得时间戳 毫秒数
function DateTimeToMilliseconds(const ADateTime: TDateTime): Int64; //获得毫秒var LTimeStamp: TTimeStamp ...
- （转载）如何在 Github 上发现优秀的开源项目？
转载自:传送门 之前发过一系列有关 GitHub 的文章,有同学问了,GitHub 我大概了解了,Git 也差不多会使用了,但是还是搞不清 GitHub 如何帮助我的工作,怎么提升我的工作效率? 问到 ...
- 【报错】The origin server did not find a current representation for the target resource or is not willing to disclose that one exists.
提交表单之后, 报错页面显示: HTTP Status 404 – 未找到 Type Status Report 消息 Not found 描述 The origin server did not f ...
- 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扩展没有,需要手动安装了. 中 ...