前端开发 —— 图片轮播
今日一言:
受身无间者永远不死,寿长乃无间地狱中之大劫。
——《涅盘经》
前端开发 —— 图片轮播
HTML
<div class="content">
<div class="img_box">
<ul>
<li><img src="./img/1.jpeg" style="width: 640px;height: 480px" /></li>
<li><img src="./img/2.jpeg" style="width: 640px;height: 480px"/></li>
<li><img src="./img/3.jpeg" style="width: 640px;height: 480px"/></li>
<li><img src="./img/4.jpeg" style="width: 640px;height: 480px"/></li>
<li><img src="./img/5.jpeg" style="width: 640px;height: 480px"/></li>
</ul>
<p>
<span class="leftBtn"><</span>
<span class="rightBtn">></span>
</p>
<div class="bar" style="width: 640px;height:5px;background-color: #FFFFFF"></div>
</div>
</div>
CSS
body{
background-color: #212121;
}
li{
list-style-type: none;
}
ul {
width: 640px;
height: 480px;
padding: 0;
display: flex;
}
.img_box{
width: 640px;
height: 480px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -320px;
margin-top: -240px;
overflow: hidden;
}
p{
position: absolute;
width: 640px;
height: 70px;
top: 50%;
left: 50%;
margin-left: -320px;
margin-top: -35px;
display: flex;
justify-content: space-between;
}
.rightBtn{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: inline-block;
font-size: 50px;
width: 70px;
height: 70px;
border-radius: 9px;
text-align: center;
margin-right: 5px;
color: #fff;
background-color: rgba(0,0,0,0.5);
cursor: pointer;
}
.leftBtn{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
user-select:none;
display: inline-block;
font-size: 50px;
width: 70px;
height: 70px;
border-radius: 9px;
text-align: center;
color: #fff;
margin-left: 5px;
background-color: rgba(0,0,0,0.5);
cursor: pointer;
}
.bar{
position: absolute;
bottom: 0;
}
JavaScript
var cureent = 0;
var time = $("img").width();
var timer;
var leftBtn = $(".leftBtn");
var rightBtn = $(".rightBtn");
function show(status){
if( status == 1 ){
timer = setInterval(function(){
time--;
if( time < 0 ){
Tright();
time = box.width();
}
$(".bar").width($("img").width()-time+"px");
},10);
} else {
clearInterval(timer);
time = $("img").width();
}
}
show(1);
$(".img_box").hover(function(){
leftBtn.fadeIn(30);
rightBtn.fadeIn(30);
});
$(".img_box").mouseleave(function(){
leftBtn.fadeOut(30);
rightBtn.fadeOut(30);
});
function Tleft(){
show(0);
cureent--;
if( cureent < 0 ) cureent = 4;
$("ul").animate({marginLeft: -640 * cureent + "px"});
show(1);
}
function Tright(){
show(0);
cureent++;
if( cureent >= 5 ) cureent = 0;
$("ul").animate({marginLeft: -640 * cureent +"px"});
show(1);
}
leftBtn.click(function(){
Tleft();
});
rightBtn.click(function(){
Tright();
});