div盒子实现轮流播放，类似于图片滚动功能，需要的可以看看
<!DOCTYPE html>
<html lang="zh-CN">
<!--引入jquery库文件-->
<script src="../js/jquery-3.2.1.min.js"></script>
<!--css样式-->
<style>
.out {
margin-top: 50px;
width: 100%;
height: auto;
}
.coffeeOut{
margin: 0 auto;
width: 1200px;
height: auto;
text-align: center;
}
.titleButton{
margin-left: 5px;
width: 100px;
height: 25px;
background-color: #2aabd2;
}
.titleButton .one {
width: 50px;
height: 25px;
text-align: left;
float: left;
background-color: #2aabd2;
}
.titleButton .two {
width: 50px;
height: 25px;
text-align: left;
float: left;
background-color: #2aabd2;
}
/*轮播容器*/
.container {
margin-top: 50px;
width: 1200px;
height: 320px;
border: 1px solid black;
/*前后页按钮添加属性*/
position: relative;
overflow: hidden;
}
.person {
margin: 0 9px;
width: 280px;
height: 318px;
border: 1px solid deeppink;
float: left;
overflow: hidden;
}
.person:hover {
background-color: lawngreen;
}
.person:hover .title {
display: none;
}
.person:hover .detail {
display: initial;
}
.label {
margin-top: 20px;
margin-left: 0;
width: 160px;
height: 24px;
border: 1px solid blue;
text-align: left;
font-size: 18px;
/*设置半圆形边框*/
border-bottom-right-radius:12px;
border-top-right-radius:12px;
background-color: #2aabd2;
}
.exp {
margin-top: 38px;
text-align:center;
}
.first .img, .second .img, .third .img, .fourth .img, .fifth .img, .sixth .img{
background-image: url("../img/icon_1.jpg");
margin: 0 auto;
width: 100px;
height: 100px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
border: 1px solid gray;
}
.first .name , .second .name, .third .name, .fourth .name, .fifth .name, .sixth .name {
margin: 10px auto;
font-size: 24px;
font-weight:bold;
}
.first .title , .second .title, .third .title, .fourth .title, .fifth .title, .sixth .title{
margin: 10px auto;
width: 70%;
font-size: 24px;
font-weight:bold;
}
.first .detail , .second .detail, .third .detail, .fourth .detail, .fifth .detail, .sixth .detail {
margin: 10px auto;
width: 75%;
font-size: 18px;
/*超出部分显示省略号*/
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
display: none;
}
.buttons {
width: 1200px;
height: 111px;
/*position: relative;*/
}
.slider-nav {
margin-left: -38px;
}
.slider-nav li {
width: 23px;
background: #3e3e3e;
cursor: pointer;
margin: 0 5px;
overflow: hidden;
text-align: center;
display: inline-block;
height: 9px;
}
.slider-nav li:hover {
background: #31b0d5;
}
.list {
width: 3300px;
height: 320px;
position: absolute;
}
.arrow {
position: absolute;
display: none;
width: 40px;
height: 40px;
line-height: 40px;
z-index: 2;
font-size: 36px;
text-align: center;
font-weight: bold;
top: 140px;
background-color: rgba(0, 0, 0, .3);
color: #FFF;
}
#prev {
left: 20px;
}
#next {
right: 20px;
}
#container:hover .arrow {
display: block;
}
.arrow:hover {
background-color: rgba(0, 0, 0, .7);
}
.buttons .on {
background: orange;
}
</style>
<head>
<meta charset="UTF-8">
<title>myBanner</title>
</head>
<body>
<div class="out">
<div class="coffeeOut">
<!--抬头-->
<div class="titleButton">
<button class="one">标签</button>
<button class="two">标签</button>
</div>
<!--大神推荐-->
<div class="container">
<div class="list" style="left:-300px">
<div class="person sixth">
<!--半圆标签-->
<div class="label"> 架构师</div>
<div class="exp">
<!--图片-->
<div class="img"></div>
<!--姓名-->
<div class="name">肖春雷 666666</div>
<!--主题-->
<div class="title">十分nb的架构师,不解释</div>
<!--详情-->
<div class="detail">各种雷人事件,能够用来吹嘘一百年,能够惊呆你的下巴颏,当然了,信不信由你,真假自己判断...</div>
</div>
</div>
<div class="person first">
<!--半圆标签-->
<div class="label"> 架构师</div>
<div class="exp">
<!--图片-->
<div class="img"></div>
<!--姓名-->
<div class="name">肖春雷 111111</div>
<!--主题-->
<div class="title">十分nb的架构师,不解释</div>
<!--详情-->
<div class="detail">各种雷人事件,能够用来吹嘘一百年,能够惊呆你的下巴颏,当然了,信不信由你,真假自己判断...</div>
</div>
</div>
<div class="person second">
<!--半圆标签-->
<div class="label"> 架构师</div>
<div class="exp">
<!--图片-->
<div class="img"></div>
<!--姓名-->
<div class="name">肖春雷 222222</div>
<!--主题-->
<div class="title">十分nb的架构师,不解释</div>
<!--详情-->
<div class="detail">各种雷人事件,能够用来吹嘘一百年,能够惊呆你的下巴颏,当然了,信不信由你,真假自己判断...</div>
</div>
</div>
<div class="person third">
<!--半圆标签-->
<div class="label"> 架构师</div>
<div class="exp">
<!--图片-->
<div class="img"></div>
<!--姓名-->
<div class="name">肖春雷 333333</div>
<!--主题-->
<div class="title">十分nb的架构师,不解释</div>
<!--详情-->
<div class="detail">各种雷人事件,能够用来吹嘘一百年,能够惊呆你的下巴颏,当然了,信不信由你,真假自己判断...</div>
</div>
</div>
<div class="person fourth">
<!--半圆标签-->
<div class="label"> 架构师</div>
<div class="exp">
<!--图片-->
<div class="img"></div>
<!--姓名-->
<div class="name">肖春雷 444444</div>
<!--主题-->
<div class="title">十分nb的架构师,不解释</div>
<!--详情-->
<div class="detail">各种雷人事件,能够用来吹嘘一百年,能够惊呆你的下巴颏,当然了,信不信由你,真假自己判断...</div>
</div>
</div>
<div class="person fifth">
<!--半圆标签-->
<div class="label"> 架构师</div>
<div class="exp">
<!--图片-->
<div class="img"></div>
<!--姓名-->
<div class="name">肖春雷 555555</div>
<!--主题-->
<div class="title">十分nb的架构师,不解释</div>
<!--详情-->
<div class="detail">各种雷人事件,能够用来吹嘘一百年,能够惊呆你的下巴颏,当然了,信不信由你,真假自己判断...</div>
</div>
</div>
<div class="person sixth">
<!--半圆标签-->
<div class="label"> 架构师</div>
<div class="exp">
<!--图片-->
<div class="img"></div>
<!--姓名-->
<div class="name">肖春雷 666666</div>
<!--主题-->
<div class="title">十分nb的架构师,不解释</div>
<!--详情-->
<div class="detail">各种雷人事件,能够用来吹嘘一百年,能够惊呆你的下巴颏,当然了,信不信由你,真假自己判断...</div>
</div>
</div>
<div class="person first">
<!--半圆标签-->
<div class="label"> 架构师</div>
<div class="exp">
<!--图片-->
<div class="img"></div>
<!--姓名-->
<div class="name">肖春雷 111111</div>
<!--主题-->
<div class="title">十分nb的架构师,不解释</div>
<!--详情-->
<div class="detail">各种雷人事件,能够用来吹嘘一百年,能够惊呆你的下巴颏,当然了,信不信由你,真假自己判断...</div>
</div>
</div>
<div class="person second">
<!--半圆标签-->
<div class="label"> 架构师</div>
<div class="exp">
<!--图片-->
<div class="img"></div>
<!--姓名-->
<div class="name">肖春雷 222222</div>
<!--主题-->
<div class="title">十分nb的架构师,不解释</div>
<!--详情-->
<div class="detail">各种雷人事件,能够用来吹嘘一百年,能够惊呆你的下巴颏,当然了,信不信由你,真假自己判断...</div>
</div>
</div>
<div class="person third">
<!--半圆标签-->
<div class="label"> 架构师</div>
<div class="exp">
<!--图片-->
<div class="img"></div>
<!--姓名-->
<div class="name">肖春雷 333333</div>
<!--主题-->
<div class="title">十分nb的架构师,不解释</div>
<!--详情-->
<div class="detail">各种雷人事件,能够用来吹嘘一百年,能够惊呆你的下巴颏,当然了,信不信由你,真假自己判断...</div>
</div>
</div>
<div class="person fourth">
<!--半圆标签-->
<div class="label"> 架构师</div>
<div class="exp">
<!--图片-->
<div class="img"></div>
<!--姓名-->
<div class="name">肖春雷 444444</div>
<!--主题-->
<div class="title">十分nb的架构师,不解释</div>
<!--详情-->
<div class="detail">各种雷人事件,能够用来吹嘘一百年,能够惊呆你的下巴颏,当然了,信不信由你,真假自己判断...</div>
</div>
</div>
<!--一共六位大神-->
</div>
<a href="#" id="prev" class="arrow"><</a>
<a href="#" id="next" class="arrow">></a>
</div>
<div class="buttons">
<ul class="slider-nav">
<li class="on" index="1"></li>
<li class="" index="2"></li>
<li class="" index="3"></li>
</ul>
</div>
<!--三个点击按钮-->
<!--<div class="buttons">
<div class="button1"></div>
<div class="button3"></div>
<div class="button2"></div>
</div>-->
</div>
</div>
</body>
<script type="text/javascript">
window.onload = function () {
var container = document.getElementsByClassName('container').item(0);
var list = document.getElementsByClassName('list').item(0);
var buttons = document.getElementsByClassName('buttons').item(0).getElementsByTagName('li');
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var index = 1;
var animated = false;
var timer;
function showBtn() {
for (var i = 0; i < buttons.length; i++) {
if (buttons[i].className == 'on') {
buttons[i].className = '';
}
}
buttons[index - 1].className = 'on';
}
function animate(offset) {
animated = true;
var newL = parseInt(list.style.left) + offset;
var time = 600;
var interval = 10;
var speed = offset / (time / interval);
function go() {
if ((speed < 0 && parseInt(list.style.left) > newL) || (speed > 0 && parseInt(list.style.left) < newL)) {
list.style.left = parseInt(list.style.left) + speed + 'px';
setTimeout(go, interval);
} else {
animated = false;
list.style.left = newL + 'px';
if (newL < -1800) {
list.style.left = -300 + 'px';
} else if (newL > -300) {
list.style.left = -1800 + 'px';
}
}
}
go();
}
function play() {
timer = setInterval(function () {
next.onclick();
}, 3000);
}
function stop() {
clearInterval(timer);
}
next.onclick = function () {
if (index == 3) {
index = 1;
} else {
index += 1;
}
if (animated == false) {
animate(-300);
}
showBtn();
}
prev.onclick = function () {
if (index == 1) {
index = 5;
} else {
index -= 1;
}
if (animated == false) {
animate(300);
}
showBtn();
}
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function () {
var myindex = parseInt(this.getAttribute('index'));
var offset = -300 * (myindex - index);
if (animated == false) {
animate(offset);
}
index = myindex;
showBtn();
}
}
container.onmouseover = stop;
container.onmouseout = play;
play();
}
</script>
</html>
网页运行效果
扫一扫
305
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
