您的位置：首页 > Web前端 > JavaScript

js+css+html实现个性化图片轮播

2019-01-05 11:23 507 查看

js+css+html实现个性化图片轮播

学习js的时候按照教程写了一点简单的图片轮播，后来又发现了很多个性化轮播方式，于是学习借鉴完成了这个波浪式的图片轮播

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>你笑起来真像好天气</title>

<style>//css 对于边框的颜色、大小做定义
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.solid {
width: 800px;
height: 360px;
margin: 150px auto 0;
box-shadow: 1px 7px 25px #fd8fd9;
}
.solid ul {
height: 100%;
}
.solid ul li {
position: relative;
float: left;
box-sizing: border-box;
transform-style: preserve-3d;
transform: translateZ(-180px);
}
.solid ul li div {
position: absolute;
width: 100%;
height: 100%;
}
.solid ul li div:nth-child(1) {
top: -360px;
background: url(css//images/02.jpg);
transform-origin: bottom;
transform: translateZ(180px) rotateX(90deg);
}
.solid ul li div:nth-child(2) {
top: 360px;
background: url(css/images/01.jpg);
transform-origin: top;
transform: translateZ(180px) rotateX(-90deg);
}
.solid ul li div:nth-child(3) {
background: url(css/images/03.jpg);
transform: translateZ(180px);
}
.solid ul li div:nth-child(4) {
background: url(css/images/04.jpg);
transform: translateZ(-180px) rotateX(180deg);
}
.solid ol {
position: absolute;
left: 50%;
width: 140px;
height: 20px;
transform: translateX(-50%);
display: flex;
justify-content: space-around;
}
.solid ol li {
width: 20px;
height: 20px;
background: black;
box-shadow: 0 2px 5px white;
border-radius: 50%;
color: white;
text-align: center;
/*斜体 12px大小/20px行高*/
font: italic 12px/20px 'Microsoft Yahei';
cursor: pointer;
}
.solid ol li.on {
background: red;
}
</style>

</head>
<body>//html  对图片序号的显示

<div class="solid">
<ul class="oUl"></ul>
<ol>
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
</div>

<script >//js  实现轮播
var solid = document.getElementsByClassName('solid')[0];
var btn = document.querySelectorAll('ol li');
var oUl = document.getElementsByClassName('oUl')[0];
var css = document.getElementsByTagName('style')[0];
var timer, n = 0;

createDom();
function createDom() {
var num = 100, uHTML = '', pHTML = '', tHTML = '';
var allWidth = parseInt(getComputedStyle(solid, null).width);
var width = allWidth / num;
for (var i = 0; i < num; i++) {
uHTML += '<li><div></div><div></div><div></div><div></div></li>';
pHTML += '.solid ul li:nth-child(' + (i + 1) + ') div{background-position-x: ' + (-i*width) + 'px;}';
tHTML += '.solid ul li:nth-child(' + (i + 1) + '){transition: 0.8s ' + (0.3 * i / num) + 's}';
}
oUl.innerHTML = uHTML;
css.innerHTML += pHTML + tHTML  + '.solid ul li, .solid ul li div{width:' + width + 'px;height:100%}';
bindEvent();
play();
}

function bindEvent() {
for (var i = 0; i < btn.length; i++) {
btn[i].index = i;
btn[i].onclick = function () {
n = this.index;
for (var i = 0; i < btn.length; i++) {
btn[i].className = '';
}
this.className = 'on';
css.innerHTML += '.solid ul li{transform: translateZ(-180px) rotateX(' + (n * 90) + 'deg);}';
}
};
solid.onmouseenter = function () {
clearInterval(timer);
};
solid.onmouseleave = function () {
play();
};
}
function play() {
clearInterval(timer);
timer = setInterval(function () {
n++;
n %= 4;
for (var i = 0; i < btn.length; i++) {
btn[i].className = '';
}
btn[n].className = 'on';
css.innerHTML += '.solid ul li{transform: translateZ(-180px) rotateX(' + (n * 90) + 'deg);}';
}, 1000);
}
</script>
<br>
<br>
<br>
<br>

</body>
</html>

最终成果展示（不能传动态图呜呜呜）

欢迎指正错误，提出意见。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航