jquery轮播图的实现
2018-09-19 本文已影响0人
guoss
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.pic{
width: 790px;
height: 340px;
margin: 10px auto;
position: relative;
overflow: hidden;
}
.content{
width: 99999px;
height: 340px;
position: absolute;
left: 0px;
top: 0px;
}
.content div{
float: left;
width:790px;
height: 340px;
}
.index{
position: absolute;
left: 300px;
bottom: 5px;
width: 200px;
height: 20px;
list-style: none;
}
.index li{
width: 10px;
height: 10px;
border-radius: 50%;
float: left;
margin-left: 10px;
background-color: rgba(100,100,100,0.3);
}
.left{
width: 30px;
height:50px;
background-color:rgba(100,100,100,0.5);
position: absolute;
left: 0px;
top: 150px;
line-height: 50px;
text-align: center;
font-size: 20px;
color: #fff;
display: none;
}
.right{
width: 30px;
height:50px;
background-color:rgba(100,100,100,0.5);
position: absolute;
right: 0px;
top: 150px;
line-height: 50px;
text-align: center;
font-size: 20px;
color: #fff;
display: none;
}
.index .first{
background-color: red;
}
</style>
</head>
<body>
<div class="pic">
<div class="content">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>1</div>
</div>
<ul class="index">
<li class="first"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="right">></div>
<div class="left"><</div>
</div>
<script src="jq_183.js"></script>
<script type="text/javascript">
$(function(){
//每个固定的时间移动图片
var timer = setInterval(function(){
var a=1
picLoop(a)
},1000);
var index = 0;
function picLoop(right){
if(right===1){
index++;
if(index==8){
$("li").eq(0).css("background-color","red")
.siblings().css("background-color","rgba(100,100,100,0.3)");
}
if (index==9) {index=1;$(".content").css({left:0});}
$(".content").animate({"left":-790*index},300);
$("li").eq(index).css("background-color","red")
.siblings().css("background-color","rgba(100,100,100,0.3)");
}else if(right===0){
index--;
if(index==-1){
index=7;
$("li").eq(0).css("background-color","red")
.siblings().css("background-color","rgba(100,100,100,0.3)");
$(".content").css({left:-750*8});
}
$(".content").animate({"left":-790*index},300);
$("li").eq(index).css("background-color","red")
.siblings().css("background-color","rgba(100,100,100,0.3)");
}
}
//定时器的控制
$(".pic").hover(function(){
clearInterval(timer);
$(".left").show();
$(".right").show();
},function(){
timer = setInterval(function(){
var a=1;
picLoop(a);
},1000);
$(".left").hide();
$(".right").hide();
})
$("li").mouseover(function(){
$(this).css("background-color","red")
.siblings().css("background-color","rgba(100,100,100,0.3)");
index = $(this).index();
$(".content").animate({"left":-790*index},300);
})
$(".left").click(function(){
picLoop(0)
})
$(".right").click(function(){
picLoop(1)
})
})
var arr1=[1, 2, [3, 4]];
Array.prototype.flat = function() {
let arr=[];
this.toString().split(',').map((item)=>{
arr.push(+item)
})
return arr
}
console.log(arr1.flat())
</script>
</body>
</html>
