简单轮播图的实现
这是一个简单的前端轮播图
由html,css,js三部分组成(前端的基础)
一:html部分 导入css,js以及对应的图片,一目了然
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charst=UTF-8" />
<title>页面</title>
<link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
<div class="f1">
<ul style="left:0">
<li><img src="1.jpg" style="width:500px; height: 400px;"></li>
<li><img src="2.jpg" style="width:500px; height: 400px;"></li>
<li><img src="3.jpg" style="width:500px; height: 400px;"></li>
<li><img src="4.jpg" style="width:500px; height: 400px;"></li>
<li><img src="5.jpg" style="width:500px; height: 400px;"></li>
</ul>
<div class="img">
<ul>
<li><img src="le.png" style="width:50px; height: 50px;" onclick=""></li>
<li><img src="ri.png" style="width:50px; height: 50px;" onclick=""></li>
</ul>
</div>
<div class="button">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</div>
<script src="1.js"></script>
</body>
</html>二:css部分 也都是基础知识 个人觉得opacity调节透明度很实用 背景图片用opacity来调节效果就很好
*{
margin:0px;
padding:0px;
}
.f1{
width: 500px;
height: 400px;
margin: 150px 700px;
position: relative;
overflow: hidden;
}
.f1>ul{
position: relative;
display: flex;
transition:left 2s ease;
}
.f1 li
{
list-style-type: none;
}
.img{
display: flex;
opacity: 0;
}
.img>ul :nth-child(1)
{
position: absolute;
top: 80px;
display: inline-block;
}
.img>ul :nth-child(2)
{
position: absolute;
top: 80px;
left: 90%;
display: inline-block;
}
.button>span{
border-radius: 32px;
width: 27px;
height:27px;
background-color: gray;
display: inline-block;
cursor:pointer;
text-align: center;
opacity: 0;
}
.button :nth-child(1){
position: absolute;
top: 370px;
left: 78px;
}
.button :nth-child(2){
position: absolute;
top: 370px;
left: 148px;
}
.button :nth-child(3){
position: absolute;
top: 370px;
left: 218px;
}
.button :nth-child(4){
position: absolute;
top: 370px;
left: 288px;
}
.button :nth-child(5){
position: absolute;
top: 370px;
left: 358px;
}
.f1:hover .img{
opacity: 0.5;
}
.f1:hover .button>span{
opacity: 0.5;
}三:js部分 就我而言,js是前端的灵魂,也是最难掌握的地方
下面代码中的500,2000,3000 是根据图片的大小而定的,我的图片大小是500px
整体流程: 不点击的时候一次500px的移动(刚好一张图片的大小),点击左右箭头就对应的变化500px,点击1,2,3,4,5按钮就跳转到对应图片 注意图片得是jpg格式的
//顺序播放
var all=document.querySelector(".f1");
var list=document.querySelector(".f1>ul");
//参数传进来
function change(offset)
{
//得到当前值
var newoffset=parseInt(list.style.left)+offset;
if(newoffset>0){
//可解析字符串，并返回一个整数
list.style.left="-2000px";
}
else if(newoffset<-2000){
list.style.left="0px";
}
else{
list.style.left=newoffset+"px";
}
}
var timer=setInterval("img[0].onclick()",3000);
// 给ul加一个选择器
all.onmouseover=function(){
clearInterval(timer);
}
all.onmouseout=function(){
timer=setInterval("img[0].onclick()",3000);
}
//箭头
var img=document.querySelectorAll(".f1>.img>ul>li");
//左箭头
img[0].onclick=function(){
change(500);
}
//右箭头
img[1].onclick=function(){
change(-500);
}
//点击按钮
var button=document.querySelectorAll(".f1>.button>span");
for(i=0;i<button.length;i++)
{
button[i].onclick=function()
{
list.style.left=(this.innerHTML-1)*(-500)+"px";
}
}样式图片
菜鸡一枚,没有干货请见谅
查看10道真题和解析