轮播图

最新推荐文章于 2021-02-22 10:14:49 发布

原创最新推荐文章于 2021-02-22 10:14:49 发布 · 214 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css技术 #轮播图 #js技术

前段开发专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何使用HTML、CSS和JavaScript创建一个自动轮播的图片展示效果，包括图片切换、按钮控制及指示点功能。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
   <title>轮播图</title>
   <style type="text/css">
   .lbt{
       width: 800px;
       height: 400px;
       margin: 30px auto;
       position: relative;
       cursor: pointer;
   }
   .list{
       width: 800px;
       height: 400px;
       list-style: none;
       position: relative;
       padding-left: 0px;
   }
   .item{
       position: absolute;
       width: 800px;
       height: 400px;
       background-size: cover;

       opacity: 0;
       transition: all.5s;

   }
   .item:nth-child(1){
       background-image: url(img/7.jpg);
   }
   .item:nth-child(2){
       background-image: url(img/8.jpg);
   }
   .item:nth-child(3){
       background-image: url(img/9.jpg);
   }
   .item:nth-child(4){
       background-image: url(img/10.jpg);
   }
   .item:nth-child(5){
       background-image: url(img/5.jpg);
   }
   .item:nth-child(6){
       background-image: url(img/6.jpg);
   }
   .btn{
       width:30px;
       height: 100px;
       position: absolute;
       top: 150px;
       z-index: 100;
   }
   #goPre{
       left: 0px;
       cursor: pointer;
   }
   #goNext{
       right: 0px;
       cursor: pointer;
   }
   .item.active{
       opacity: 1;
z-index: 10;
   }
   .pointList{
       position: absolute;
       list-style: none;
       padding-left: 0px;
       right: 20px;
       bottom: 20px;
       z-index: 1000;
   }
   .point{
       width: 8px;
       height: 8px;
       background-color: rgba(0,0,0,0.4);
       border-radius: 100%;
       float: left;
       margin-right: 14px;
       border-style: solid;
       border-width: 2px;
       background-color: rgba(255,255,255,0.6);
       cursor: pointer;
   }
   .point.active{
       background-color: rgba(255,255,255,0.2);
   }

</style>
</head>
<body>
<div class="lbt" id="lbt" onmouseover="stop();" onmouseout="lunbo();">
<ul class="list">
<li class="item active"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
<ul class="pointList">
<li class="point active" data-index='0'></li>
<li class="point" data-index='1'></li>
<li class="point" data-index='2'></li>
<li class="point" data-index='3'></li>
<li class="point" data-index='4'></li>
<li class="point" data-index='5'></li>
</ul>
<button type="button" class="btn" id="goPre"><</button>
<button type="button" class="btn" id="goNext">></button>
</div>
</body>
<script type="text/javascript">

var lbt=document.getElementById('lbt');
var items=document.getElementsByClassName('item');
var points=document.getElementsByClassName('point');
var goPreBtn=document.getElementById('goPre');
var goNextBtn=document.getElementById('goNext');
var index=0;
var time=0;
var id;

/**
* 清除
*/
var clearActive=function(){
   for (var i = 0; i < items.length; i++) {
       items[i].className='item';
   }
   for (var i = 0; i < points.length; i++) {
       points[i].className='point';
   }
}
//显示图片函数
var goIndex=function(){
   clearActive();
   items[index].className='item active';
   points[index].className='point active';
}
//上一个图片函数
var goPre=function(){
   if(index==0){
       index=5;
   }else{
       index--;
       //alert('你好'); 方便用来验证，查找错误
   }
   goIndex();
}
//下一个图片函数
var goNext=function(){
   if(index<5){
       index++;

   }else{
       index=0;
   }
   goIndex();
}
//监听事件
goPreBtn.addEventListener('click',function(){
   goPre();
   console.log('你好');//方便在控制台验证，查找错误
})
goNextBtn.addEventListener('click',function(){
   goNext();
   console.log('你好');//方便在控制台验证，查找错误
})
for (var i = 0; i < points.length; i++) {
   points[i].addEventListener('click',function(){
       var pointIndex=this.getAttribute('data-index');//data-index获取编号
       index=pointIndex;
       goIndex();
       time=0;
   })
}
//2s，跳转一次
function lunbo(){
id=setInterval(function(){
   time++;
   if(time==20){
   goNext();
   time=0;
   }
},100)}
// 鼠标划过整个容器时停止自动播放
function stop(){
clearInterval(id);
}
//事件会在页面加载完后，执行自动轮波函数
window.onload = function(){
lunbo();
}
</script>
</html>