js 图片轮播插件

来源：互联网发布：最新好看的网络电影编辑：程序博客网时间：2024/04/28 18:12

本插件调用很简单，显示效果也很简单，绝大部分工作用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);

0 0