js 图片轮播插件
2016-06-28 17:32
483 查看
本插件调用很简单，显示效果也很简单，绝大部分工作用js完成，这是第一版，有个小问题需要改进一下，改进版可以满足传参，一个窗口显示多个图片轮播，这个由读者完成
HTML页
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Pictures2</title>
<link href="../Content/StyleSheete.css" rel="stylesheet" />
<script src="../Scripts/JavaScripte.js"></script>
<meta charset="utf-8" />
</head>
<body>
<div id="pictures"></div>
</body>
</html>
CSS页
*{
margin:0px;
padding:0px;
}
body {
background-color:black;
text-align:center;
}
#pictures{
background-color:white;
position:absolute;
left:50%;
top:50%;
margin-top:-200px;
margin-left:-300px;
width:600px;
height:400px;
overflow:hidden;
}
js页
(function () {
window.fhoafbponpanlndnvornofnrrnvapnrr = function () {
this.cfg = {
/* 图片路径列表 */p_url_list: [
'../imgs/a.jpg',
'../imgs/b.jpg',
'../imgs/c.jpg',
'../imgs/d.jpg',
'../imgs/e.jpg',
],/* 图片路径列表 */
///* 图片路径列表 */p_url_list: [
// '../pictures/1.jpg',
// '../pictures/2.jpg',
// '../pictures/3.jpg',
// '../pictures/4.jpg',
// '../pictures/5.jpg',
// '../pictures/6.jpg',
// '../pictures/7.jpg',
//],/* 图片路径列表 */
/* 本图片轮播控件的父div的id */ parent_div_id: "pictures", /* 本图片轮播控件的父div的id */
/* 图片的宽 */ p_width: 600, /* 图片的宽 */
/* 图片的高 */ p_height: 400, /* 图片的高 */
/* 每个动画的运动时间 */ flash_run_time: 500, /* 每个动画的运动时间 */
/* 每个动画之间的时间间隔 */ auto_interval_time: 3000, /* 每个动画之间的时间间隔 */
/* 动画每一秒多少帧 */ frame_count_per_second: 50, /* 动画每一秒多少帧 */
/* 方块的大小 */ a_width: 14, /* 方块的大小 */
/* 方块边框的大小 */ a_border_width: 2, /* 方块边框的大小 */
/* 方块边框的颜色 */ a_border_color: "#fff",/* 方块边框的颜色 */
/* 方块圆角的角度 */ a_border_radius: 7, /* 方块圆角的角度 */
/* 方块之间的间距 */ a_d: 16, /* 方块之间的间距 */
/* 方块背景色 */ a_bg_color: "#0458E2", /* 方块背景色 */
/* 活动方块背景色 */ a_act_bg_color: "#BB4C08",/* 活动方块背景色 */
};
this.img_count = this.cfg.p_url_list.length;
this.move_div = document.createElement("div");
this.current_left = 0;
this.pic_load_progress = 0;
this.interval_id = null;
this.dots_div = document.createElement("div");
this.dots_div_ul = document.createElement("ul");
this.dots_div_ul_li = [];
this.dots_div_ul_li_a = [];
this.act_a = 0;
};
fhoafbponpanlndnvornofnrrnvapnrr.prototype = {
start: function () {
this.load_pics();
},
load_pics: function () {
var _this = this;
for (var i = 0; i < this.img_count; i++) {
var img = new Image();
img.src = this.cfg.p_url_list[i];
img.onload = function () {
delete this;
_this.pic_load_progress += 100 / _this.img_count;
if (_this.pic_load_progress > 99) {
_this.init();
}
};
}
},
init: function () {
var _this = this;
this.move_div.style.position = "absolute";
this.move_div.style.width = this.img_count * this.cfg.p_width + "px";
this.move_div.style.height = this.cfg.p_height + "px";
this.move_div.style.top = 0 + "px";
this.move_div.style.left = this.current_left + "px";
document.getElementById(this.cfg.parent_div_id).appendChild(this.move_div);
this.dots_div.style.position = "absolute";
this.dots_div.style.width = (this.cfg.a_width + this.cfg.a_d) * this.img_count + "px";
this.dots_div.style.height = this.cfg.a_width + "px";
this.dots_div.style.left = (this.cfg.p_width - (this.cfg.a_width + this.cfg.a_d) * this.img_count) / 2 + "px";
this.dots_div.style.bottom = 10 + "px";
document.getElementById(this.cfg.parent_div_id).appendChild(this.dots_div);
this.dots_div.appendChild(this.dots_div_ul);
for (var i = 0; i < this.img_count; i++) {
this.dots_div_ul_li_a[i] = document.createElement("a");
this.dots_div_ul_li_a[i].style.width = this.cfg.a_width - this.cfg.a_border_width * 2 + "px";
this.dots_div_ul_li_a[i].style.height = this.cfg.a_width - this.cfg.a_border_width * 2 + "px";
this.dots_div_ul_li_a[i].style.border = this.cfg.a_border_width + "px solid " + this.cfg.a_border_color;
this.dots_div_ul_li_a[i].style.borderRadius = this.cfg.a_border_radius + "px";
this.dots_div_ul_li_a[i].style.display = "block";
this.dots_div_ul_li_a[i].style.backgroundColor = this.cfg.a_bg_color;
this.dots_div_ul_li[i] = document.createElement("li");
this.dots_div_ul_li[i].style.width = (this.cfg.a_width + this.cfg.a_d) + "px";
this.dots_div_ul_li[i].style.height = this.cfg.a_width + "px";
this.dots_div_ul_li[i].style.cssFloat = "left";
this.dots_div_ul_li[i].style.listStyleType = "none";
this.dots_div_ul.appendChild(this.dots_div_ul_li[i]);
this.dots_div_ul_li[i].appendChild(this.dots_div_ul_li_a[i]);
}
this.dots_div_ul_li_a[this.act_a].style.backgroundColor = this.cfg.a_act_bg_color;
for (var i = 0; i < this.img_count; i++) {
var img = new Image();
img.src = this.cfg.p_url_list[i];
img.style.width = this.cfg.p_width + "px";
img.style.height = this.cfg.p_height + "px";
img.style.cssFloat = "left";
this.move_div.appendChild(img);
}
this.auto_loop();
},
auto_loop: function () {
var _this = this;
var loop = function () {
_this.act_a = (_this.act_a +1)%_this.img_count;
if (_this.act_a ==0) {
_this.dots_div_ul_li_a[_this.act_a].style.backgroundColor = _this.cfg.a_act_bg_color;
_this.dots_div_ul_li_a[_this.img_count-1].style.backgroundColor = _this.cfg.a_bg_color;
} else {
_this.dots_div_ul_li_a[_this.act_a].style.backgroundColor = _this.cfg.a_act_bg_color;
_this.dots_div_ul_li_a[_this.act_a - 1].style.backgroundColor = _this.cfg.a_bg_color;
}
if (_this.current_left == -(_this.cfg.p_width * (_this.img_count - 1))) {
_this.move_move_div(_this.current_left, 0, _this.cfg.flash_run_time);
_this.current_left = 0;
} else {
_this.move_move_div(_this.current_left, _this.current_left - _this.cfg.p_width, _this.cfg.flash_run_time);
_this.current_left -= _this.cfg.p_width;
}
};
for (var i = 0; i < _this.img_count; i++) {
_this.dots_div_ul_li_a[i].onmouseover = function () {
clearInterval(_this.interval_id);
_this.dots_div_ul_li_a[_this.act_a].style.backgroundColor = _this.cfg.a_bg_color;
_this.act_a = _this.dots_div_ul_li_a.indexOf(this);
_this.dots_div_ul_li_a[_this.act_a].style.backgroundColor = _this.cfg.a_act_bg_color;
_this.move_move_div(_this.current_left, -_this.act_a * _this.cfg.p_width, _this.cfg.flash_run_time);
_this.current_left = -_this.act_a * _this.cfg.p_width;
};
_this.dots_div_ul_li_a[i].onmouseleave = function () {
_this.interval_id = setInterval(loop, _this.cfg.auto_interval_time);
};
}
this.interval_id = setInterval(loop, this.cfg.auto_interval_time);
},
move_move_div: function (begin, end, time) {
var _this = this;
var fs = (time / 1000) * this.cfg.frame_count_per_second;
var b = begin, e = end, d = (e - b) / fs, n = 0;
var tm = 1000 / this.cfg.frame_count_per_second;
var move = function () {
n++;
b += d;
_this.move_div.style.left = b + "px";
if (n < fs) {
setTimeout(move, tm);
}
};
move();
},
};
}());
document.addEventListener("DOMContentLoaded", function () { (new fhoafbponpanlndnvornofnrrnvapnrr()).start(); }, false);
HTML页
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Pictures2</title>
<link href="../Content/StyleSheete.css" rel="stylesheet" />
<script src="../Scripts/JavaScripte.js"></script>
<meta charset="utf-8" />
</head>
<body>
<div id="pictures"></div>
</body>
</html>
CSS页
*{
margin:0px;
padding:0px;
}
body {
background-color:black;
text-align:center;
}
#pictures{
background-color:white;
position:absolute;
left:50%;
top:50%;
margin-top:-200px;
margin-left:-300px;
width:600px;
height:400px;
overflow:hidden;
}
js页
(function () {
window.fhoafbponpanlndnvornofnrrnvapnrr = function () {
this.cfg = {
/* 图片路径列表 */p_url_list: [
'../imgs/a.jpg',
'../imgs/b.jpg',
'../imgs/c.jpg',
'../imgs/d.jpg',
'../imgs/e.jpg',
],/* 图片路径列表 */
///* 图片路径列表 */p_url_list: [
// '../pictures/1.jpg',
// '../pictures/2.jpg',
// '../pictures/3.jpg',
// '../pictures/4.jpg',
// '../pictures/5.jpg',
// '../pictures/6.jpg',
// '../pictures/7.jpg',
//],/* 图片路径列表 */
/* 本图片轮播控件的父div的id */ parent_div_id: "pictures", /* 本图片轮播控件的父div的id */
/* 图片的宽 */ p_width: 600, /* 图片的宽 */
/* 图片的高 */ p_height: 400, /* 图片的高 */
/* 每个动画的运动时间 */ flash_run_time: 500, /* 每个动画的运动时间 */
/* 每个动画之间的时间间隔 */ auto_interval_time: 3000, /* 每个动画之间的时间间隔 */
/* 动画每一秒多少帧 */ frame_count_per_second: 50, /* 动画每一秒多少帧 */
/* 方块的大小 */ a_width: 14, /* 方块的大小 */
/* 方块边框的大小 */ a_border_width: 2, /* 方块边框的大小 */
/* 方块边框的颜色 */ a_border_color: "#fff",/* 方块边框的颜色 */
/* 方块圆角的角度 */ a_border_radius: 7, /* 方块圆角的角度 */
/* 方块之间的间距 */ a_d: 16, /* 方块之间的间距 */
/* 方块背景色 */ a_bg_color: "#0458E2", /* 方块背景色 */
/* 活动方块背景色 */ a_act_bg_color: "#BB4C08",/* 活动方块背景色 */
};
this.img_count = this.cfg.p_url_list.length;
this.move_div = document.createElement("div");
this.current_left = 0;
this.pic_load_progress = 0;
this.interval_id = null;
this.dots_div = document.createElement("div");
this.dots_div_ul = document.createElement("ul");
this.dots_div_ul_li = [];
this.dots_div_ul_li_a = [];
this.act_a = 0;
};
fhoafbponpanlndnvornofnrrnvapnrr.prototype = {
start: function () {
this.load_pics();
},
load_pics: function () {
var _this = this;
for (var i = 0; i < this.img_count; i++) {
var img = new Image();
img.src = this.cfg.p_url_list[i];
img.onload = function () {
delete this;
_this.pic_load_progress += 100 / _this.img_count;
if (_this.pic_load_progress > 99) {
_this.init();
}
};
}
},
init: function () {
var _this = this;
this.move_div.style.position = "absolute";
this.move_div.style.width = this.img_count * this.cfg.p_width + "px";
this.move_div.style.height = this.cfg.p_height + "px";
this.move_div.style.top = 0 + "px";
this.move_div.style.left = this.current_left + "px";
document.getElementById(this.cfg.parent_div_id).appendChild(this.move_div);
this.dots_div.style.position = "absolute";
this.dots_div.style.width = (this.cfg.a_width + this.cfg.a_d) * this.img_count + "px";
this.dots_div.style.height = this.cfg.a_width + "px";
this.dots_div.style.left = (this.cfg.p_width - (this.cfg.a_width + this.cfg.a_d) * this.img_count) / 2 + "px";
this.dots_div.style.bottom = 10 + "px";
document.getElementById(this.cfg.parent_div_id).appendChild(this.dots_div);
this.dots_div.appendChild(this.dots_div_ul);
for (var i = 0; i < this.img_count; i++) {
this.dots_div_ul_li_a[i] = document.createElement("a");
this.dots_div_ul_li_a[i].style.width = this.cfg.a_width - this.cfg.a_border_width * 2 + "px";
this.dots_div_ul_li_a[i].style.height = this.cfg.a_width - this.cfg.a_border_width * 2 + "px";
this.dots_div_ul_li_a[i].style.border = this.cfg.a_border_width + "px solid " + this.cfg.a_border_color;
this.dots_div_ul_li_a[i].style.borderRadius = this.cfg.a_border_radius + "px";
this.dots_div_ul_li_a[i].style.display = "block";
this.dots_div_ul_li_a[i].style.backgroundColor = this.cfg.a_bg_color;
this.dots_div_ul_li[i] = document.createElement("li");
this.dots_div_ul_li[i].style.width = (this.cfg.a_width + this.cfg.a_d) + "px";
this.dots_div_ul_li[i].style.height = this.cfg.a_width + "px";
this.dots_div_ul_li[i].style.cssFloat = "left";
this.dots_div_ul_li[i].style.listStyleType = "none";
this.dots_div_ul.appendChild(this.dots_div_ul_li[i]);
this.dots_div_ul_li[i].appendChild(this.dots_div_ul_li_a[i]);
}
this.dots_div_ul_li_a[this.act_a].style.backgroundColor = this.cfg.a_act_bg_color;
for (var i = 0; i < this.img_count; i++) {
var img = new Image();
img.src = this.cfg.p_url_list[i];
img.style.width = this.cfg.p_width + "px";
img.style.height = this.cfg.p_height + "px";
img.style.cssFloat = "left";
this.move_div.appendChild(img);
}
this.auto_loop();
},
auto_loop: function () {
var _this = this;
var loop = function () {
_this.act_a = (_this.act_a +1)%_this.img_count;
if (_this.act_a ==0) {
_this.dots_div_ul_li_a[_this.act_a].style.backgroundColor = _this.cfg.a_act_bg_color;
_this.dots_div_ul_li_a[_this.img_count-1].style.backgroundColor = _this.cfg.a_bg_color;
} else {
_this.dots_div_ul_li_a[_this.act_a].style.backgroundColor = _this.cfg.a_act_bg_color;
_this.dots_div_ul_li_a[_this.act_a - 1].style.backgroundColor = _this.cfg.a_bg_color;
}
if (_this.current_left == -(_this.cfg.p_width * (_this.img_count - 1))) {
_this.move_move_div(_this.current_left, 0, _this.cfg.flash_run_time);
_this.current_left = 0;
} else {
_this.move_move_div(_this.current_left, _this.current_left - _this.cfg.p_width, _this.cfg.flash_run_time);
_this.current_left -= _this.cfg.p_width;
}
};
for (var i = 0; i < _this.img_count; i++) {
_this.dots_div_ul_li_a[i].onmouseover = function () {
clearInterval(_this.interval_id);
_this.dots_div_ul_li_a[_this.act_a].style.backgroundColor = _this.cfg.a_bg_color;
_this.act_a = _this.dots_div_ul_li_a.indexOf(this);
_this.dots_div_ul_li_a[_this.act_a].style.backgroundColor = _this.cfg.a_act_bg_color;
_this.move_move_div(_this.current_left, -_this.act_a * _this.cfg.p_width, _this.cfg.flash_run_time);
_this.current_left = -_this.act_a * _this.cfg.p_width;
};
_this.dots_div_ul_li_a[i].onmouseleave = function () {
_this.interval_id = setInterval(loop, _this.cfg.auto_interval_time);
};
}
this.interval_id = setInterval(loop, this.cfg.auto_interval_time);
},
move_move_div: function (begin, end, time) {
var _this = this;
var fs = (time / 1000) * this.cfg.frame_count_per_second;
var b = begin, e = end, d = (e - b) / fs, n = 0;
var tm = 1000 / this.cfg.frame_count_per_second;
var move = function () {
n++;
b += d;
_this.move_div.style.left = b + "px";
if (n < fs) {
setTimeout(move, tm);
}
};
move();
},
};
}());
document.addEventListener("DOMContentLoaded", function () { (new fhoafbponpanlndnvornofnrrnvapnrr()).start(); }, false);
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery1——基础（$对象，选择器，对象转换）
- Android学习笔记（二九）：嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制：7 行代码学会 co 模块
- ES6 走马观花（ECMAScript2015 新特性）
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Redux系列02：一个炒鸡简单的react+redux例子
- JavaScript 各种遍历方式详解
- call/apply/bind 的理解与实例分享