Jquery實現橫滾圖片展示框，此文只針對初級開發者
阿新 • • 發佈：2019-01-25
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.fl {
float: left;
}
.fr {
float: right;
}
ul {
list-style: none;
}
#showOuter {
height: 200px;
width: 400px;
overflow: hidden;
position: relative;
border: 1px red solid;
margin: 0 auto;
}
#bigContenter {
height: 200px;
width: 1200px;
position: absolute;
}
#first {
background: red;
height: 200px;
width: 400px;
float: left;
}
#sencond {
background: yellow;
height: 200px;
width: 400px;
float: left;
}
#third {
background: blue;
height: 200px;
width: 400px;
float: left;
}
#num {
height: 20px;
width: 100%;
border-bottom: 1px solid black;
border-top: 1px solid black;
position: absolute;
bottom: 20px;
}
#num li {
line-height: 20px;
text-align: center;
height: 18px;
width: 20px;
float: left;
color: white;
border-radius: 10px;
border: 1px white solid;
margin-left: 10px;
cursor: pointer;
}
#num li:first-child {
margin-left: 50px;
}
#num .act {
background: gray;
color: orange;
}
.swi {
height: 40px;
width: 20px;
position: absolute;
top: 90px;
background: grey;
text-align: center;
line-height: 40px;
display: none;
cursor: pointer;
}
.btnL {
left: 20px;
}
.btnR {
right: 20px;
}
</style>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.fl {
float: left;
}
.fr {
float: right;
}
ul {
list-style: none;
}
#showOuter {
height: 200px;
width: 400px;
overflow: hidden;
position: relative;
border: 1px red solid;
margin: 0 auto;
}
#bigContenter {
height: 200px;
width: 1200px;
position: absolute;
}
#first {
background: red;
height: 200px;
width: 400px;
float: left;
}
#sencond {
background: yellow;
height: 200px;
width: 400px;
float: left;
}
#third {
background: blue;
height: 200px;
width: 400px;
float: left;
}
#num {
height: 20px;
width: 100%;
border-bottom: 1px solid black;
border-top: 1px solid black;
position: absolute;
bottom: 20px;
}
#num li {
line-height: 20px;
text-align: center;
height: 18px;
width: 20px;
float: left;
color: white;
border-radius: 10px;
border: 1px white solid;
margin-left: 10px;
cursor: pointer;
}
#num li:first-child {
margin-left: 50px;
}
#num .act {
background: gray;
color: orange;
}
.swi {
height: 40px;
width: 20px;
position: absolute;
top: 90px;
background: grey;
text-align: center;
line-height: 40px;
display: none;
cursor: pointer;
}
.btnL {
left: 20px;
}
.btnR {
right: 20px;
}
</style>