使⽤html+css+js实现轮播图效果
使⽤html+css+js实现轮播图效果
因为初学js、css，好多属性都不懂，百度查了好久，所以在这⾥也简单介绍⼀下我遇到的难点（主要是布局）。
1. display：flex
Flex是Flexible Box的缩写，意为"弹性布局"，⽤来为盒状模型提供最⼤的灵活性。设为Flex布局以后，⼦元素的float、clear和vertical-align属性将失效。
2. flex-shrink:0
flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和⼤于容器的时候才会发⽣收缩，其收缩的⼤⼩是依据flex-shrink 的值。
3. justify-content:space-between || justify-content:space-around
html如何设置图片滚动justify-content ⽤于设置或检索弹性盒⼦元素在主轴（横轴）⽅向上的对齐⽅式。
我在图⽚（这⾥是div）的⽗元素⾥使⽤display：flex后 图⽚将⽔平布局，但是当图⽚遇到边界依然会换⾏并且会改变长宽，很丑，所以需要使⽤flex-shrink：0来阻⽌它改变长度，因为弹性盒⼦的flex-wrap属性（定义换⾏情况）默认是nowrap不换⾏，所以不⽤管，图⽚的设置完毕，焦点、左右移动按钮在它们的⽗元素⾥都需要使⽤position：absolute绝对定位，让它们可以按百分⽐布局在他们的⽗元素中，这⾥我在它们的⽗元素中依然使⽤display：flex设置，然后使⽤justify-content分别让按钮跟焦点以space-between（项⽬位于各⾏之间留有空⽩的容器内。）、 space-around（项⽬位于各⾏之前、之间、之后都留有空⽩的容器内。） ⽅式对齐，这样简单的布局就完成了。⾄于js部分，由于是初学，可能感觉有点乱，扩展性不好，⼤家可以⾃⼰试着改改。
话不多说，直接上代码。
<!DOCTYPE html>
<html>
<head>
<style>
html, body{
margin:0;
height:100%;
user-select:none;
}
#big{
position:relative;
margin:100px auto;
width:500px;
height:300px;
border:3px solid black;
overflow:hidden;
}
#middle{
position:absolute;
display:flex;
left:0px;
}
#middle div{
color:white;
height:300px;
height:300px;
width:500px;
flex-shrink:0;
font-size:35px;
font-weight:bloder;
text-align:center;
line-height:270px;
}
.btn{
position:absolute;
width:100%;
height:40px;
display:flex;
top:40%;
justify-content:space-between;
}
a{
text-decoration:none;
color:black;
height:40px;
font-size:30px;
font-weight:bolder;
transition:transform .3s;
}
.
lt:hover{
transform:translateX(-5px)
}
.rt:hover{
transform:translateX(5px)
}
ol{
position:absolute;
display:flex;
left:40%;
margin:0;
padding:0;
bottom:10px;
width:100px;
height:40px;
justify-content:space-around;
}
li{
list-style:none;
cursor:pointer;
height:25px;
width:25px;
border-radius:50%;
background:#c3c3c3;
}
li.active{
background:#f2f2f2;
}
</style>
</head>
<body>
<div id="big">
<div id="middle">
<div class="page" >ONE</div>
<div class="page" >TWO</div>
<div class="page" >THREE</div>
</div>
<div class="btn">
<a href="javascript:void(0)"class="lt" ><</a> <a href="javascript:void(0)"class="rt" >></a>
<a href="javascript:void(0)"class="rt" >></a> </div>
<ol>
<li class="bat active"></li>
<li class="bat"></li>
<li class="bat"></li>
</ol>
</div>
<script>
var big = ElementById('big');
var middle = ElementById('middle');
var ele = middle.firstElementChild.cloneNode(true);
var bats = ElementsByTagName('li');
var btns = ElementsByTagName('a');
var i,value,ts,z =0;
var whidhts =getComputedStyle(big)['width'].slice(0,-2);
var times;
middle.appendChild(ele);
middle.style.width =getComputedStyle(big)['width'].slice(0,-2)*3+'px';
var item = middle.style.width.slice(0,-2);
// ⾃动轮播动画
function autoplay(){
if(z < item){
i =0;
function move(){
if(i < whidhts){
middle.style.left = middle.style.left.slice(0,-2)-20+'px';
i +=20;
z +=20;
}else{
clearInterval(t);
setTimeout(batt,5);
}
}
}else{
z =0;
middle.style.left ='0px';
autoplay()
}
var t =setInterval(move,5);
}
// 让焦点跟着图⽚移动
function batt(){
for(var x=0; x < bats.length; x++){
bats[x].className ='bat';
}
if(Math.floor(z / whidhts)==3){
bats[0].classList.add('active');
}else{bats[Math.floor(z / whidhts)].classList.add('active')}
}
/
/ 点击焦点或左右移动按钮实现的滚动效果
function buttons(){
//console.log('Value:'+value + "Z:"+z);
if(-(value)>-(z)){
if(z != item){
middle.style.left ="-"+(-(middle.style.left.slice(0,-2))-20+'px');
//console.log("MIDDLE.LEFT" + middle.style.left.slice(0,-2));
z -=20;
}else{
middle.style.left ="0px";
z =0;
}
}
}else if(-(value)<-(z)){
middle.style.left = middle.style.left.slice(0,-2)-20+'px';
z +=20;
}else{
clearInterval(ts);
setTimeout(batt,5);
}
}
//当⿏标移⼊图⽚时暂停轮播，移出继续播放
// 为左右移动按钮设置单击事件
for(var p=0; p < btns.length; p++){
btns[p].id = p;
btns[p].onclick=function(){
if(this.id ==1){
if(z == item){value = whidhts}
else{value = z +parseInt(whidhts)}
}else{
if(z ==0){
middle.style.left ="-"+(item -20)+'px';
value =parseInt(item)-parseInt(whidhts);
z = item -20;
}
else if(z == item){
middle.style.left ="-"+(item -20)+'px';
value = item - whidhts;
z = item -20;
}
else{
value = z - whidhts
}
}
ts =setInterval(buttons,5);
}
}
// 为每个焦点设置单击事件
for(var p=0; p < bats.length; p++){
bats[p].id = p;
bats[p].onclick=function(){
value =this.id * whidhts;
ts =setInterval(buttons,5);
}
}
debugger;
times =setInterval(autoplay,3000);
//当切换最⼩化页⾯或切换页⾯时停⽌播放，返回页⾯继续播放
</body>
</html>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论