使用JavaScript实现图片轮播效果
2019-04-25 本文已影响0人
jaimor
轮播图的作用
轮播图可以在有限的空间传播更多的信息，特别在一些招聘网站、旅游网站和购物网站上居多。
实现原理
轮播图的实现很简单，简单来说，就是几个div和几个image（废话）。我们可以这样来规划，最外层一个div，里边包含有若干个div子集，而每个div子集就是对每一次轮播的封装。我们知道每一次轮播，都有一张图片和文字。这些东西统一被一个div包裹的好处就是便于操作，比如统一向左滑动、隐藏等操作。大致结构就是这样：
<div>
<div>
<img src='' title='' />
<div>第一张图片</div>
</div>
<div>
<img src='' title='' />
<div>第二张图片</div>
</div>
<div>
<img src='' title='' />
<div>第三张图片</div>
</div>
</div>
当然也可以使用另外一种方式（方式其实很多），比如：
<div>
<img src='' title='' />
<img src='' title='' />
<img src='' title='' />
<div>第一张图片</div> <!-- 这里用于每次动态显示当前图片下的信息 -->
</div>
使用这种结构很明显代码简洁了许多，所以这里选择这种结构来编码实现。
实现代码
var EpgImgCarousel = (function () {
var _ICDefault_Dot_Position = {
LEFT: "left",
CENTER: "center",
RIGHT: "right"
};
var _ICDefault_Dot_WHB = {
width: "8px",
height: "8px",
borderRadius: "8px"
};
//横轴纵轴边距量px，不带单位
var _ICDefault_Dot_XY = {
x: 30, //横轴 左右距边框 30px
y: 20 //纵轴 上下距边框 20px
};
var _ICDefault_Title_Text_Position = {
LEFT: "left",
CENTER: "center",
RIGHT: "right"
};
var _ICDefault = {
rootId: '',
image: {
count: 0,
width: 400,
height: 200,
borderRadius: "0px"
},
dot: { //直接传入 "disabled"表示关闭 指示器
position: _ICDefault_Dot_Position.RIGHT,
xOffset: 0,
yOffset: 0,
color: "white",
activeColor: "red",
},
duration: 3000,
curIndex: 0,
fadeTime: 0,
title: {
show: false,
height: "30px",
padding: "5px 10px",
fontSize: "14px",
bgColor: "rgba(0,0,0,0.3)",
color: "white",
textAlign: _ICDefault_Title_Text_Position.LEFT
}
};
return function() {
var properties = {
rootId: _ICDefault.rootId,
imageCount: _ICDefault.image.count,
imageWidth: _ICDefault.image.width, //此处的默认值没有意义，init函数中会自动重置为根div的宽度
imageHeight: _ICDefault.image.height, //此处的默认值没有意义，init函数中会自动重置为根div的高度，目的是为了减少在使用的时候的参数配置，当然也可传递自定义值
imageBorderRadius: _ICDefault.image.borderRadius,
dotPosition: _ICDefault.dot.position,
dotXOffset: _ICDefault.dot.xOffset,
dotYOffset: _ICDefault.dot.yOffset,
dotColor: _ICDefault.dot.color,
dotActiveColor: _ICDefault.dot.activeColor,
duration: _ICDefault.duration,
curIndex: _ICDefault.curIndex,
fadeTime: _ICDefault.fadeTime,
titleShow: _ICDefault.title.show,
titleHeight: _ICDefault.title.height,
titlePadding: _ICDefault.title.padding,
titleFontSize: _ICDefault.title.fontSize,
titleBgColor: _ICDefault.title.bgColor,
titleColor: _ICDefault.title.color,
titleTextAlign: _ICDefault.title.textAlign
};
var rootDom; //img之上的div，父div，用于包裹旋转木马
var imgTags = []; //保存列表img对象
var titles = []; //保存每张图片对应的title
var titleDiv;
var dots = []; //保存列表img的指示器div对象
var timer; //循环指示器，可用于关闭旋转木马
this.init = function (initObj) {
initObj && (rootDom = document.getElementById(initObj.rootId));
if (!rootDom) throw "rootId不存在，请检查";
//先设置图片大小为外层div大小
properties.imageWidth = rootDom.offsetWidth;
properties.imageHeight = rootDom.offsetHeight;
//设置自定义属性值
for (var p in initObj) (p in properties) && (properties[p] = initObj[p]);
if (properties.imageCount <= 0) throw "imageCount不能小于等于零，请检查";
createImageTags(properties.imageCount);
createDots(properties.imageCount);
properties.titleShow && createTitleDiv();
return this;
};
this.insert = function (arr, imgKey, titleKey) {
if (imgKey && titleKey) {
//默认为object，里边保存了 {imgKey: imgUrl, titleKey: titleText}
for (var i = 0, len = arr.length; i < len; i++) {
imgTags[i].src = arr[i][imgKey];
titles[i] = arr[i][titleKey];
}
titleDiv || (properties.titleShow = true && createTitleDiv());
titleDiv.innerText = titles[properties.curIndex];
} else {
//此处默认直接就是图片地址，直接对img标签赋值
for (var i = 0, len = arr.length; i < len; i++) {
imgTags[i].src = arr[i];
}
}
return this;
};
this.start = function (callback) {
timer = setInterval(function () {
changeActiveItem();
callback && typeof callback === "function" && callback();
}, properties.duration);
return this;
};
this.stop = function () {
timer && clearInterval(timer);
};
this.getCurIndex = function () {
return properties.curIndex;
};
// this.setCurIndex = function (index) {
// properties.curIndex = index;
// };
var createImageTags = function (count) {
for (var i = 0; i < count; i++) {
var image = new Image();
image.style.position = "absolute";
// image.style.zIndex = count - i + "";
image.width = properties.imageWidth;
image.height = properties.imageHeight;
image.style.borderRadius = properties.imageBorderRadius;
if (i === properties.curIndex) {
image.style.opacity = "1";
} else {
image.style.opacity = "0";
}
if (properties.fadeTime > 0) {
image.style.transition = "opacity " + (properties.fadeTime / 1000) + "s";
}
imgTags[i] = image;
rootDom.appendChild(image);
}
};
var createDots = function (count) {
var dotDiv = document.createElement("div");
dotDiv.style.position = "absolute";
dotDiv.style.opacity = "0";
for (var i = 0; i < count; i++) {
var div = document.createElement("div");
div.style.display = "inline-block";
div.style.width = _ICDefault_Dot_WHB.width;
div.style.height = _ICDefault_Dot_WHB.height;
div.style.borderRadius = _ICDefault_Dot_WHB.borderRadius;
if (i === count - 1) {
div.style.marginRight = "0";
} else {
div.style.marginRight = "10px";
}
if (i === properties.curIndex) {
div.style.backgroundColor = properties.dotActiveColor;
} else {
div.style.backgroundColor = properties.dotColor;
}
dots[i] = div;
dotDiv.appendChild(div);
}
rootDom.appendChild(dotDiv);
if (properties.dotPosition === _ICDefault_Dot_Position.LEFT) {
dotDiv.style.left = _ICDefault_Dot_XY.x + properties.dotXOffset + "px";
} else if (properties.dotPosition === _ICDefault_Dot_Position.CENTER) {
dotDiv.style.left = (rootDom.offsetWidth - dotDiv.offsetWidth) / 2 + properties.dotXOffset + "px";
} else { //靠右
dotDiv.style.left = rootDom.offsetWidth - dotDiv.offsetWidth - _ICDefault_Dot_XY.x + properties.dotXOffset + "px";
}
dotDiv.style.top = rootDom.offsetHeight - dotDiv.offsetHeight - _ICDefault_Dot_XY.y + properties.dotYOffset + "px";
dotDiv.style.opacity = "1";
};
var createTitleDiv = function () {
titleDiv = document.createElement("div");
titleDiv.style.position = "absolute";
titleDiv.style.top = rootDom.offsetHeight - +properties.titleHeight.replace("px", "") + "px";
titleDiv.style.width = rootDom.offsetWidth + "px";
titleDiv.style.height = properties.titleHeight;
titleDiv.style.backgroundColor = properties.titleBgColor;
titleDiv.style.color = properties.titleColor;
titleDiv.style.fontSize = properties.titleFontSize;
titleDiv.style.textAlign = properties.titleTextAlign;
titleDiv.style.padding = properties.titlePadding;
titleDiv.style.boxSizing = "border-box";
titleDiv.style.zIndex = rootDom.getElementsByTagName("img")[0].style.zIndex + 50;
titleDiv.style.overflow = "hidden";
titleDiv.style.textOverflow = "ellipsis";
titleDiv.style.whiteSpace = "nowrap";
rootDom.appendChild(titleDiv);
};
var changeActiveItem = function () {
var len = imgTags.length;
var nextIndex = properties.curIndex >= len - 1 ? 0 : properties.curIndex + 1;
for (var i = 0; i < len; i++) {
if (i === nextIndex) {
imgTags[i].style.opacity = "1";
dots[i].style.backgroundColor = properties.dotActiveColor;
titleDiv && (titleDiv.innerText = titles[i]);
} else {
imgTags[i].style.opacity = "0";
dots[i].style.backgroundColor = properties.dotColor;
}
}
properties.curIndex = nextIndex;
}
};
})();
使用方式
<body>
<div id="imgs" class="imgs"></div>
<script src="epg-img-carousel.js"></script><!-- 小组件代码放在了此文件中 -->
<script>
var arr = [
{img: "../../assets/1.jpg", title: "这是第一张图片"},
{img: "../../assets/2.jpg", title: "2222222222"},
{img: "../../assets/3.jpg", title: "这是第3张图片是第3张图是第3张图是第3张图是第3张图是第3张图是第3张图是第3张图是第3张图是第3张图是第3张图是第3张图是第3张图是第3张图是第3张图是第3张图是第3张图是第3张图是第3张图是第3张图是第3张图"},
{img: "../../assets/4.jpg", title: "这是第四张图片"}
];
var arr1 = ["../../assets/1.jpg", "../../assets/2.jpg", "../../assets/3.jpg", "../../assets/4.jpg"];
var ic = new EpgImgCarousel().init({
rootId: "imgs",
imageCount: 4,
dotYOffset: -10
}).insert(arr, "img", "title")
.start();
document.getElementById("imgs").onclick = function () {
console.log(ic.getCurIndex());
}
</script>
</body>
实现效果
效果图
