原生js实现直接切换轮播图

最新推荐文章于 2020-04-26 22:29:57 发布

马马虎虎敲可爱

最新推荐文章于 2020-04-26 22:29:57 发布

阅读量234

点赞数

分类专栏：前端实用案例

本文链接：https://blog.csdn.net/Schrodinge/article/details/94656007

版权

前端实用案例专栏收录该内容

9 篇文章 0 订阅

订阅专栏

css

ul{
	list-style: none;
	padding:0;margin:0;
}
.focus img{
	display: block;
}
.focus{
	position:relative;
	overflow:hidden;
	height: 320px;
}
.focus ul{
	position:absolute;
	overflow:hidden;
}
 .focus ul li{
 	float:left;
 }
.focus .page{
	position:absolute;
	right:0;
	bottom:0;
	padding:10px;
}
.focus .page span{
	display:inline-block;
	margin:0 5px;
	width:30px;
	height:30px;
	line-height:30px;
	background-color:rgba(0,0,0,.6);
	text-align:center;
	color:#fff;
	border-radius: 50%;
	box-shadow:0 0 10px rgba(0,0,0,.5);
}
.focus .page span.active{
	background-color: rgba(255,0,0,.8);
}

html

<div class="focus">
        <ul>
            <li><img src="../images/001.jpg"></li>
            <li><img src="../images/002.jpg"></li>
            <li><img src="../images/003.jpg"></li>
        </ul>
    </div>

var focus = document.querySelector(".focus");
var ulbox = focus.children[0];
 var firstImg = ulbox.children[0].children[0];
 var len = ulbox.children.length;
 var idx = 0;
 // 1.focus呈现图片，宽度为第一张图片的宽度。ul的宽度=图片的宽度*图片张数
 //  * 必须等待第一张图片加载完成后，再获取宽度
firstImg.onload = function(){
   focus.style.width = firstImg.offsetWidth + 'px';
   ulbox.style.width = firstImg.offsetWidth * len + 'px';
 }
 // 2.开启定时器，定义一个索引（0、1、2）改变，从而改变的是ulbox的left值
setInterval(function(){
        idx++;
        if(idx >= len){
             idx = 0;
          }
         ulbox.style.left = -firstImg.offsetWidth *idx + 'px';
 },1000)