CSS+HTML+JS创作出五彩斑斓的轮播图相册页面
效果：
CSS和HTML代码：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<script src="animate.js"></script>
<title></title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
position: relative;
background-color: #000;
overflow: hidden;
}
span {
position: absolute;
left: 0;
width: 30px;
height: 30px;
border-radius: 50%;
position: absolute;
background-size: 100% 100%;
animation: flash 1s alternate infinite;
}
@keyframes flash {
0% { opacity: 0; }
100% { opacity: 1; }
}
span:hover { animation: none; }
.div1 {
position: relative;
left: 30%;
top: 200px;
width: 500px;
height: 300px;
overflow: hidden;
z-index: 2;
}
.div1 ul {
position: absolute;
top: 0;
left: 0;
width: 1500%;
}
ul li {
position: relative;
float: left;
width: 500px;
height: 300px;
list-style: none;
}
ul li img {
width: 100%;
height: 100%;
}
.div1 .current {
color: orange;
}
.ol1 {
position: absolute;
top: 260px;
left: 100px;
height: 20px;
padding-left: 5px;
border-radius: 10px;
background-color: rgba(0, 0, 0, .3);
}
li {
float: left;
margin-left: 25px;
font-size: 25px;
line-height: 20px;
color: #fff;
list-style-type: disc;
cursor: pointer;
}
#myDiv {
position: absolute;
top: 120px;
left: 35%;
color: white;
font-size: 25px;
width: 400px;
height: 20px;
}
#myDiv1 {
position: absolute;
top: 520px;
left: 34%;
color: white;
font-size: 25px;
width: 400px;
height: 20px;
}
iframe {
position: absolute;
top: -100px;
left: 550px;
opacity: 0.1;
}
</style>
</head>
<body>
<iframe src="music/音乐串烧.mp3" frameborder="0"></iframe>
<div id="myDiv">今夜星光闪闪，我爱你的心满满</div>
<div id="myDiv1">想你一晚又一晚,我爱你的心都填满</div>
<!-- 文字闪烁 -->
<script>
start();
var flag = 0;
function start() {
var text = document.getElementById("myDiv");
var text1 = document.getElementById("myDiv1");
var color = '#' + Math.floor(Math.random() * 16777215).toString(16);
if (!flag) {
text.style.color = color;
text1.style.color = color;
// text.style.backgroundColor = "#0000ff";
flag++;
} else if (flag == 1) {
text.style.color = "";
text1.style.color = "";
flag++;
} else if (flag == 2) {
text.style.color = color;
text1.style.color = color;
flag++;
} else if (flag == 3) {
text.style.color = color;
text1.style.color = color;
flag++;
} else if (flag == 4) {
text.style.color = color;
text1.style.color = color;
flag++;
} else if (flag == 5) {
text.style.color = color;
text1.style.color = color;
flag++;
} else if (flag == 6) {
text.style.color = color;
text1.style.color = color;
flag++;
} else {
flag = 0;
}
setTimeout("start()", 200);
}
</script>
<!-- 满天星 -->
<span></span>
<script>
window.onload = function () {
// 屏幕的尺寸
var screenW = document.documentElement.clientWidth;
var screenH = document.documentElement.clientHeight;
//动态创建多个圆
for (var i = 0; i < 300; i++) {
var span = document.createElement('span');
document.body.appendChild(span);
//位置随机
var x = parseInt(Math.random() * screenW);
var y = parseInt(Math.random() * screenH);
span.style.left = x + 'px';
span.style.top = y + 'px';
//大小随机
var scale = Math.random() * 1.5;
span.style.transform = 'scale(' + scale + ', ' + scale + ')';
//频率随机
var rate = Math.random() * 1.5;
span.style.animationDelay = rate + 's';
//颜色随机
var color = '#' + Math.floor(Math.random() * 16777215).toString(16);
span.style.background = color;
}
}
</script>
<div class="div1">
<ul>
<li><img src="img/1.jpeg" alt=""></li>
<li><img src="img/2.jpeg" alt=""></li>
<li><img src="img/3.jpeg" alt=""></li>
<li><img src="img/4.jpeg" alt=""></li>
<li><img src="img/5.jpeg" alt=""></li>
<li><img src="img/6.jpeg" alt=""></li>
<li><img src="img/7.jpeg" alt=""></li>
<li><img src="img/8.jpeg" alt=""></li>
<li><img src="img/10.jpeg" alt=""></li>
<li><img src="img/17.jpeg" alt=""></li>
<li><img src="img/18.jpeg" alt=""></li>
</ul>
<ol class="ol1"> </ol>
</div>
<script>
//1.获取元素
var div1 = document.querySelector('.div1');
var ul = document.querySelector('ul');
var ol = document.querySelector('.ol1');
var div1Width = div1.offsetWidth;
for (var i = 0; i < ul.children.length; i++) {
var li = document.createElement('li'); //创建li节点
li.setAttribute('index', i); //自定义属性index
ol.appendChild(li); //添加li节点到ol里面
// 点击li事件
li.addEventListener('click', function () { //排他思想
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
this.className = 'current';
var index = this.getAttribute('index');
animate(ul, -index * div1Width * 1.06);
})
}
//把ol里面的第一个小li设置类名为 current
ol.children[0].className = 'current';
// 鼠标经过事件
div1.addEventListener('mouseenter', function () {
clearInterval(timer);
timer = null;
});
// 鼠标离开事件
div1.addEventListener('mouseleave', function () {
timer = setInterval(function () {
ul.click();
}, 2000);
})
// 模仿右箭头
var first = ul.children[0].cloneNode(true);
ul.appendChild(first);
var num = 0;//控制图片移动
var circle = 0;//控制li移动 //节流阀
var flag = true;
ul.addEventListener('click', function () {
if (flag) {
flag = false;
if (num == ul.children.length - 1) {
ul.style.left = 0;
num = 0;
}
num++;
animate(ul, -num * div1Width * 1.06, function () {
flag = true;
});
circle++;
if (circle == ol.children.length) {
circle = 0;
}
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[circle].className = 'current';
}
}
)
//自动播放
var timer = setInterval(function () {
ul.click(); }, 2000)
</script>
</body>
</html>
JS代码（命名为animate.js）：
function animate(obj, target, collback) {
//先清除以前的定时器，只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function () {
//把步长值改为整数
var step = (target - obj.offsetLeft) / 10;//步长公示：(目标值 - 现在的位置) /10
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
clearInterval(obj.timer);
collback && collback();
}
obj.style.left = obj.offsetLeft + step + 'px'; }, 15);}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
