极客观点
项目管理
HarmonyOS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ahha</title>
<script type="text/javascript" src='jquery-3.2.1.min.js'></script>
<script type="text/javascript" src='lunbo.js'></script>
<link rel="stylesheet" type="text/css" href="lunbo.css">
<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_460544_pzvcefic2xnr8uxr.css">
</head>
<body>
<div class="one">
<div class="two">
<span class="left"><i class="iconfont icon-dian"></i></span>
<div class="three" id="three">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
<div class="forth"></div>
</div>
<span class="right"><i class="iconfont icon-dian"></i></span>
<ul class="list">
<li class="list_one white"></li>
<li class="list_two"></li>
<li class="list_three"></li>
</ul>
</div>
</div>
</body>
</html>*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.one{
width: 500px;
height: 500px;
margin: 100px auto;
}
.two{
width: 500px;
height: 500px;
overflow: hidden;
position: relative;
}
.three{
width: 2000px;
height: 500px;
left: 0px;
position: absolute;
}
.three div{
width: 500px;
height: 500px;
float: left;
}
.first{
background: url(http://img4.imgtn.bdimg.com/it/u=2056962742,2443863952&fm=200&gp=0.jpg)no-repeat;
background-size: 500px 500px;
}
.second{
background: url(http://img2.imgtn.bdimg.com/it/u=1400467467,3564009033&fm=27&gp=0.jpg)no-repeat;
background-size: 500px 500px;
}
.third{
background: url(http://img4.imgtn.bdimg.com/it/u=2520961514,701690180&fm=27&gp=0.jpg)no-repeat;
background-size: 500px 500px;
}
.forth{
background: url(http://img4.imgtn.bdimg.com/it/u=2056962742,2443863952&fm=200&gp=0.jpg)no-repeat;
background-size: 500px 500px;
}
.left,.right{
text-align: center;
line-height: 60px;
width: 40px;
height: 60px;
background: rgba(255,255,255,.3);
position: absolute;
color: #FF34B3;
z-index: 10
}
.left:hover .icon-dian{
cursor: pointer;
font-size: 30px!important
}
.right:hover .icon-dian{
cursor: pointer;
font-size: 30px!important
}
.left{
top: 230px;
left: 10px;
}
.right{
top: 230px;
right: 10px;
}
.list{
position: absolute;
top: 400px;
left: 120px;
overflow: hidden;
}
.list li{
width: 30px;
height: 30px;
border-radius: 50%;
float: left;
margin: 10px 30px;
border: 1px solid #fff;
background: rgba(255,255,255,.5);
}
.white{
background: #fff!important;
}$(document).ready(function(){
var timer;
var val = 0;
function left(){
val--;
timer = clearTimeout(move);
if(val == -1){
$('.three').stop().css('left',-1000+'px');
val = 2;
}
$('.list li').eq(val).addClass('white').siblings().removeClass('white');
$('.three').animate({'left':-500*val + 'px'},2000);
timer = setTimeout(move,8000);
}
function move(){
val++;
timer = clearTimeout(move);
if(val == 3){
$('.list li').eq(0).addClass('white').siblings().removeClass('white');
}
if(val > 3 ){
val = 1;
$('.three').stop().css('left','0px');
}
$('.list li').eq(val).addClass('white').siblings().removeClass('white');
$('.three').animate({'left':-500*val + 'px'},2000);
timer = setTimeout(move,8000);
};
timer = setTimeout(move);
$('.list li').click(function(){
if(!$('.three').is(":animated")){
val = $(this).index() - 1;
clearTimeout(timer);
move()
}
})
$('.right').click(function(){
if(!$('.three').is(":animated")){
clearTimeout(timer);
move()
}
})
$('.left').click(function(){
if(!$('.three').is(":animated")){
clearTimeout(timer);
left();
}
})
})这是我写的轮播图。用谷歌浏览器打开可以正常运行。但是我最小化后过段时间再打开最小化的。这个轮播图就乱了。不知道为什么。还有就是我用火狐浏览器打开这个轮播图。2 3 4张图片就不显示了。请问是为什么。。想了半天也没想出原因所以才来问。。