HTML+CSS+JavaScript制作轮播图

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

文章目录

轮播图

轮播图

主要功能及效果演示

鼠标移入出现按钮, 鼠标移出按钮消失

请添加图片描述

鼠标移入图片停止轮播(关闭定时器)

点击小图切换对应图片

代码分享

百度网盘下载地址
链接https://pan.baidu.com/s/1btcsI-hdbJ1O-adVD7J5tg
提取码d604
国内码云Gitee下载地址内含超多有趣案例
https://gitee.com/huang_weifu/JavaScript_demo.git
喜欢的老铁们可以点赞收藏喔~

一、HTML代码

<div id="box" class="box">
  <ul id="ball">
    <li><img src="images/1.webp" alt=""></li>
    <li><img src="images/2.webp" alt=""></li>
    <li><img src="images/3.webp" alt=""></li>
    <li><img src="images/4.webp" alt=""></li>
    <li><img src="images/5.webp" alt=""></li>
    <li><img src="images/6.webp" alt=""></li>
  </ul>
  <ul id="btns">
    <li><img src="images/1.webp" alt=""></li>
    <li><img src="images/2.webp" alt=""></li>
    <li><img src="images/3.webp" alt=""></li>
    <li><img src="images/4.webp" alt=""></li>
    <li><img src="images/5.webp" alt=""></li>
    <li><img src="images/6.webp" alt=""></li>
  </ul>
  <a href="javascript:void(0);" id="prev">&lt;</a>
  <a href="javascript:void(0);" id="next">&gt;</a>
</div>
</body>

二、CSS代码

<style type="text/css">
  *{
    margin:0;
    padding:0;
    list-style:none;
  }
  .box{
    width:300px;
    height:350px;
    overflow:hidden;
    position:relative;
    margin:20px auto;
  }
  #ball{
    width:2100px;
    overflow:hidden;
    position:absolute;
    left:0;
    top:0;
  }
  #ball li{
    float:left;
    height:300px;
    width:300px;
  }
  #ball img{
    width:100%;
    height:100%;
    display:block;
    border:0;
  }
  #btns{
    width:300px;
    overflow:hidden;
    position:absolute;
    top:300px;
    left:0;
  }
  #btns li{
    width:50px;
    height:50px;
    float:left;
  }
  #btns img{
    width:100%;
    height:100%;
    display:block;
    border:0;
  }
  .box a{
    position:absolute;
    top:135px;
    font-size:20px;
    width:30px;
    line-height:30px;
    height:30px;
    color:#ffffff;
    background:rgba(154,154,154,0.4);
    z-index:10;
    text-align:center;
    text-decoration:none;
    border-radius:50%;
    opacity:0;
    filter:alpha(opacity=0);
  }
  #prev{
    left:0;
  }
  #next{
    right:0;
  }
</style>

三、JavaScript代码

<script type="text/javascript" src="js/animation.js"></script>
<script type="text/javascript">
	var box = document.getElementById('box');
	var ball = document.getElementById('ball');
	var btns = document.getElementById('btns').getElementsByTagName('li');
	var prev = document.getElementById('prev');
	var next = document.getElementById('next');
	//复制第一张图添加到尾部
	var first = ball.children[0].cloneNode(true);
	ball.appendChild(first);
	//初始化相关数据
	var flag = true;
	box.index = 0;
	box.w = box.clientWidth;
	//添加计时器
	box.timer = setTimeout(move,3000);
	function move(){
		box.index--;
		if(box.index==-(btns.length+1)){
			box.index = -1;
			ball.style.left = 0;
		}
		animation(ball,'left',box.w * box.index,function(){
			clearTimeout(box.timer);
			if(flag){
				box.timer = setTimeout(move,3000);
			}
		});
	}
	//缩略图切换
	for(var i = 0;i < btns.length;i++){
		btns[i].index = -i;
		btns[i].onclick = function(){

			if(box.index==-btns.length){
				ball.style.left = 0;
			}
			box.index = this.index;

			animation(ball,'left',box.w*box.index);
		}
	}
	//左右切换
	box.onmouseover = function(){
		flag = false;
		clearTimeout(box.timer);
		animation(prev,'opacity',1);
		animation(next,'opacity',1);
	}

	box.onmouseout = function(){
		flag = true;
		box.timer = setTimeout(move,3000);
		animation(prev,'opacity',0);
		animation(next,'opacity',0);
	}
	//上一张图
	prev.onclick = function(){
		box.index++;
		if(box.index==1){
			box.index = -(btns.length-1);
			ball.style.left = -(box.w * btns.length) + 'px';
		}
		animation(ball,'left',box.w*box.index);
	}
	//下一张图片
	next.onclick = move;
 </script>