轮播图专题

最新推荐文章于 2022-07-06 20:58:10 发布
最新推荐文章于 2022-07-06 20:58:10 发布
阅读量138 收藏
点赞数
分类专栏： JAVA开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44825185/article/details/116259400
版权

CSS轮播 JavaScript轮播 纯CSS动画 Flex布局 jQuery定时器
关键词由CSDN通过智能技术生成

在Web开发中，首页中经常会使用轮播图展示内容，但是实现方法各不相同，根据所学内容进行整理。

一、纯CSS实现

  用纯CSS实现有一个需要注意的地方就是如何通过@keyframes来设置达到轮播的效果。

（一）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播</title>
		<link rel="stylesheet" type="text/css" href="css/lunbo.css"/>
	</head>
	<body>
<div id="container">
    <div id="photo">
        <img src="./image/lb1.jpg" />
        <img src="./image/lb2.jpg" />
        <img src="./image/lb3.jpg" />
    </div>
</div>
	</body>
</html>


#container {
	width: 601px;
	height: 338px;
	overflow: hidden;
}
 
#photo {
	width: 1803px;
	animation: switch 10s ease-in-out infinite;
}
 
#photo > img {
	float: left;
	width: 601px;
	height: 338px;
}
 
@keyframes switch {
	0%, 28% {
		margin-left: 0;
	}
	33%, 61% {
		margin-left: -601px;
	}
	66%, 100% {
		margin-left: -1202px;
	}
}
（二）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播1</title>
		<link rel="stylesheet" type="text/css" href="css/lunbo1.css"/>
	</head>
	<body>
		<div id="container">
			<div id="box"><img src="image/lb1.jpg" ></div>
			<div id="box"><img src="image/lb2.jpg" ></div>
			<div id="box"><img src="image/lb3.jpg" ></div>
		</div>
	</body>
</html>


body{
	display: flex;
	justify-content: center;
	/* 主轴居中 */
	align-items: center;
	/* 交叉轴局中 */
	padding-top: 100px;
}
#container{
	position: relative;
	width: 601px;
	height: 338px;
	/* background-color: #C7CFC6; */
	overflow: hidden;
}
#box{
	position: absolute;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	animation: box 5s ease-out infinite;
}
#box>img{
	width: 601px;
	height: 338px;
}
@keyframes box{
	0%{transform:translateX(0%) ;}
	30%{transform:translateX(-100%) ;}
	60%{transform:translateX(-200%) ;}
	100%{transform:translateX(-300%) ;}
}
#box:nth-child(1){
	left: 100%;
}
#box:nth-child(2){
	left: 200%;
}
#box:nth-child(3){
	left: 300%;
}
（三）

------------------------------------------------推荐使用-------------------------------------------

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./css/lunbo2.css">
</head>

<body>
  <div id="carousel-box">
    <!-- 表示图片顺序的索引 -->
    <a id="a1" class="num">1</a>
    <a id="a2" class="num">2</a>
    <a id="a3" class="num">3</a>
    <a id="a4" class="num">4</a>
    <a id="a5" class="num">5</a>
    <!-- 设定为五张图片 -->
    <div id="carousel-item">
      <img src="./image/lb1.jpg" alt="">
      <img src="./image/lb2.jpg" alt="">
      <img src="./image/lb3.jpg" alt="">
      <img src="./image/lb1.jpg" alt="">
      <img src="./image/lb2.jpg" alt="">

      <!-- 五张图片的标题 -->
      <ul id="showTag">
        <li>图片一</li>
        <li>图片二</li>
        <li>图片三</li>
        <li>图片四</li>
        <li>图片五</li>
      </ul>
    </div>
  </div>
</body>

</html>

* {
  margin: 0;
  padding: 0;
}

#carousel-box {
  position: relative;
  width: 601px;
  height: 338px;
  border-radius: 5px;
  margin: 0 auto;
  overflow: hidden;
}

#carousel-item {
  position: absolute;
  width: calc(601px * 5);
}

/* 将轮播器中的每张图片平铺开来形成一张图片 */
#carousel-item img {
  float: left;
  width: 601px;
  height: 338px;
}

#showTag {
  position: absolute;
  /* 调整标题项的垂直位置 */
  top: 10px;
  opacity: 0.5;
}

#showTag li {
  /* 根据图片宽度来设定标题宽度，并让标题平铺以放置在对应的轮播图片中 */
  width: 200px;
  height: 30px;
  line-height: 30px;
  margin: 0 200px;
  float: left;
  text-align: center;
  color: #fff;
  border-radius: 15px;
  background: #000;
}

/* 设定图片索引位置 */
.num {
  width: 20px;
  height: 20px;
  color: #666;
  text-align: center;
  line-height: 20px;
  cursor: pointer;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  z-index: 10;
  bottom: 10px;
  right: 10px;
  display: block;
  opacity: 0.6;
  font-size: 12px;
}

/* 调整索引位置 */
.num:nth-child(4) {
  margin-right: 30px;
}
.num:nth-child(3) {
  margin-right: 60px;
}
.num:nth-child(2) {
  margin-right: 90px;
}
.num:nth-child(1) {
  margin-right: 120px;
}

/* 初试轮播动画 */
@keyframes initAnimation {
  /* 0-4s */
  0%, 20% {
    margin-left: 0px;
  }
  /* 4-8s */
  25%, 40% {
    margin-left: -601px;
  }
  /* 8-12s */
  45%, 60% {
    margin-left: -1202px;
  }
  /* 12-16s */
  65%, 80% {
    margin-left: -1803px;
  }
  /* 16-20s */
  85%, 100% {
    margin-left: -2404px;
  }
}

/* 动画部署 */
#carousel-item {
  animation: initAnimation 20s ease-out infinite;
}

/* 索引悬浮高亮效果 */
.num:hover {
  color: #fff;
  cursor: pointer;
  background:rgba(61,61,61,0.5)
}

/* 轮播悬浮暂停效果 */
#carousel-item:hover, .num:hover {
  animation-play-state: paused;
}

/* 索引悬浮触发动画 */
@keyframes Anim1 {
  100% {
    margin-left: 0;
  }
}

@keyframes Anim2 {
  100% {
    margin-left: -601px;
  }
}
@keyframes Anim3 {
  100% {
    margin-left: -1202px;
  }
}
@keyframes Anim4 {
  100% {
    margin-left: -1803px;
  }
}
@keyframes Anim5 {
  100% {
    margin-left: -2404px;
  }
}

/* 索引触发轮播效果 */
#a1:hover ~ #carousel-item {
  animation: Anim1 1s ease-out forwards;
}
#a2:hover ~ #carousel-item {
  animation: Anim2 1s ease-out forwards;
}
#a3:hover ~ #carousel-item {
  animation: Anim3 1s ease-out forwards;
}
#a4:hover ~ #carousel-item {
  animation: Anim4 1s ease-out forwards;
}
#a5:hover ~ #carousel-item {
  animation: Anim5 1s ease-out forwards;
}
(四)
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Carousel</title>
</head>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 100px
  }

  .carousel-wrap {
    position: relative;
    width: 400px;
    height: 200px;
    background-color: antiquewhite;
    overflow: hidden;
  }

  .box {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: blueviolet;
    animation: box 20s infinite ease-out;
    display: flex;
    justify-content: center;
    align-items: center
  }

  @keyframes box {
    0% {
      transform: translateX(0%);
    }

    10%,
    20% {
      transform: translateX(-100%);
    }

    30%,
    40% {
      transform: translateX(-200%);
    }

    50%,
    60% {
      transform: translateX(-300%);
    }

    70%,
    80% {
      transform: translateX(-400%);
    }

    90%,
    100% {
      transform: translateX(-500%);
    }
  }

  .box:nth-child(1) {
    background-color: violet;
    left: 100%
  }

  .box:nth-child(2) {
    background-color: aqua;
    left: 200%
  }

  .box:nth-child(3) {
    background-color: turquoise;
    left: 300%
  }

  .box:nth-child(4) {
    background-color: tomato;
    left: 400%;
  }

  .box:nth-child(5) {
    background-color: chartreuse;
    left: 500%
  }
</style>

<body>
  <div class="carousel-wrap">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
  </div>
</body>

</html>
（五）
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                background: silver;
            }
            /*初始化页面*/
            .CarouselBox {
                width: 601px;
                height: 338px;
                margin: 100px auto;
                overflow: hidden;   
            }
            /*设置放置轮播图的盒子*/
            li {
                width: 601px;
                height: 338px;
                float: left;
                list-style: none;
            }
            /*对放置图片的li进行设置*/

            /*设置动画的主要属性*/
            ul {
                width: 3606px;
                height: 338px;
                animation: myani 10s ease-in-out infinite;

            }



            /* 对动画的关键帧进行设置*/
            @keyframes myani {
                0% {
                    margin-left: 0px;
                }
                20% {
                    margin-left: -601px;
                }
                40% {
                    margin-left: -1202px;
                }
                60% {
                    margin-left: -1803px;
                }
                80% {
                    margin-left: -2404px;
                }
                100% {
                    margin-left: -3005px;
                }
            }
          
            
        </style>
    </head>

    <body>
        <div class="CarouselBox">
            <ul>
                <li>
                    <a href="##"><img src="./image/lb1.jpg" width="601" height="338"></a>
                </li>
                <li>
                    <a href="##"><img src="./image/lb2.jpg" width="601" height="338"></a>
                </li>
                <li>
                    <a href="##"><img src="./image/lb3.jpg" width="601" height="338"></a>
                </li>
                <li>
                    <a href="##"><img src="./image/lb1.jpg" width="601" height="338"></a>
                </li>
                <li>
                    <a href="##"><img src="./image/lb2.jpg" width="601" height="338"></a>
                </li>
                <li>
                    <a href="##"><img src="./image/lb3.jpg" width="601" height="338"></a>
                </li>
            </ul>
        </div>
    </body>

</html>
（六）
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>纯css3实现轮播</title>
  <link rel="stylesheet" href="./css/lunbo6.css">
</head>

<body>
  <section class="slider-container">
    <!-- 轮播器 -->
    <ul class="slider">
      <li class="slider-item slider-item1"></li>
     <li class="slider-item slider-item2"></li>
      <li class="slider-item slider-item3"></li>
      <li class="slider-item slider-item4"></li>
      <li class="slider-item slider-item5"></li>
    </ul>
    <!-- 轮播焦点 -->
    <div class="focus-container">
      <ul class="floatfix">
        <li>
          <div class="focus-item focus-item1"></div>
        </li>
        <li>
          <div class="focus-item focus-item2"></div>
        </li>
        <li>
          <div class="focus-item focus-item3"></div>
        </li>
        <li>
          <div class="focus-item focus-item4"></div>
        </li>
        <li>
          <div class="focus-item focus-item5"></div>
        </li>
      </ul>
    </div>
  </section>

</body>

</html>

* {
  margin: 0;
  padding: 0;
}

ul,
li {
  list-style: none;
}

.slider-container {
  width: 50%;
  position: relative;
  margin: 0 auto;
}

.slider,
.slider-item {
  padding-bottom: 40%;
}

.slider-item {
  position: absolute;
  /* 父辈.slider默认继承了.slide-container的宽度 */
  width: 100%;
  /* 相当于background-size: 100% auto */
  background-size: 100%;
  animation: fade 20s linear;
  animation-iteration-count: infinite;
}

/* 设置背景图片 */
.slider-item1 {
  background-image: url(../image/lb1.jpg);
}

.slider-item2 {
  background-image: url(../image/lb2.jpg);
}

.slider-item3 {
  background-image: url(../image/lb3.jpg);
}

.slider-item4 {
  background-image: url(../image/lb2.jpg);
}

.slider-item5 {
  background-image: url(../image/lb3.jpg);
}

/* 设置动画 */
@keyframes fade {
  0% {
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

/*  15% {
    opacity: 1;
  }

  35% {
    opacity: 0;
  } */

  100% {
    opacity: 0;
  }
}

.slider-item {
  opacity: 0;
}

.slider-item1 {
  animation-delay: -1s;
}

.slider-item2 {
  animation-delay: 3s;
}

.slider-item3 {
  animation-delay: 7s;
}

.slider-item4 {
  animation-delay: 11s;
}

.slider-item5 {
  animation-delay: 15s;
}

.focus-container {
  position: absolute;
  bottom: 2%;
  z-index: 7;
  left: 50%;
  margin-left: -45px;
}

.focus-container li {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  float: left;
  margin-right: 10px;
  background: #fff;
}

.focus-item {
  width: 100%;
  height: 100%;
  position: relative;
  opacity: 0;
  background: #51B1D9;
  border-radius: inherit;
  animation-duration: 20s;
  animation-timing-function: linear;
  animation-name: fade;
  animation-iteration-count: infinite;
}

.focus-item1 {
  animation-delay: -1s;
}

.focus-item2 {
  animation-delay: 3s;
}

.focus-item3 {
  animation-delay: 7s;
}

.focus-item4 {
  animation-delay: 11s;
}

.focus-item5 {
  animation-delay: 15s;
}

二、JS（JQuery）实现

js（jquery）实现轮播图主要是通过定时器来实现，通过添加指定类让图片展示。

(一)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
</head>
<body>
<!--
分析：
1.展示图片
2.定义一个方法，修改图片对象的src方法
3.定义一个定时器，每隔几秒调用一次方法
-->
<!--第一步-->
    <img id = "img1" src="img/banner_1.jpg" alt="" width = "100%">
<!--第二步-->
<script>
    var num = 1;
    function fun() {
        num++;
        if(num>2){
            num = 1;
        }

        var img = document.getElementById("img1");
        img.src = "img/banner_"+num+".jpg";
    }
//    设置循环
    setInterval(fun,3000);
</script>
</body>
</html>
（二）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img id = "img1" src="img/banner_1.jpg" alt="" width = "100%">
    <script>
        var num = 0;
        function fun() {
            var namelist = ["img/banner_1.jpg","img/banner_2.jpg"];
            num++;
            if(num>1){
                num = 0;
            }
            var img = document.getElementById("img1");
            img.src = namelist[num];
        }
        //    设置循环
        setInterval(fun,1000);
    </script>
</body>
</html>
(三)
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/lunbotest1.css"/>
	</head>
	<body>
		<div class="CarouselBox">
			<ul>
			    <li class="one">
			        <img src="./image/lb1.jpg" >
			    </li>
			    <li>
			        <img src="./image/lb2.jpg" >
			    </li>
			    <li>
			        <img src="./image/lb3.jpg" >
			    </li>
			</ul>
			<span id="left">
				<
			</span>
			<span id="right">
				>
			</span>
			<ol class="dots">
				<li class="active"></li>
				<li></li>
				<li></li>
			</ol>
		</div>
		<script src="js/jquery-3.4.1.min.js"></script>
		<script>
			var banner = $('.CarouselBox');
			var ul_li = $('.CarouselBox>ul>li');
			var left = $('.CarouselBox>#left');
			var right = $('.CarouselBox>#right');
			var dot = $('.CarouselBox>.dots>li');
			var timer = null;
			var num = 0;
			
			function autoplay(){
				timer = setInterval(function(){
					num++;
					num = num % ul_li.length;
					ul_li.eq(num).stop().fadeIn(500).siblings().fadeOut(1000);
					dot.eq(num).addClass('active').siblings().removeClass('active');
				},3000)
			}

			autoplay();
			
			banner.hover(function(){
				clearInterval(timer);
			},function(){
				autoplay()
			});
			
			left.click(function(){
				num--;
				num = num % ul_li.length;
				ul_li.eq(num).stop().fadeIn(200).siblings().fadeOut(500);
				dot.eq(num).addClass('active').siblings().removeClass('active');
			});
			right.click(function(){
				num++;
				num = num % ul_li.length;
				ul_li.eq(num).stop().fadeIn(200).siblings().fadeOut(500);
				dot.eq(num).addClass('active').siblings().removeClass('active');
			});
		</script>
	</body>
</html>


*{
	margin: 0;
	padding:0;
}
body{
	background: url(../image/bk1.jpg);
	background-size: cover;
}
.CarouselBox{
	width: calc(1202px*0.7);
	height: calc(676px*0.7);
	margin: 80px auto;
	/* border: 10px solid red; */
	box-shadow: 0 5px -10px rgba(0,0,0,0.5);
	position: relative;
}
.CarouselBox>ul{
	width: 100%;
	height: 100%;
	
}
.CarouselBox>ul>li>img:hover{
	cursor: pointer;
}
.CarouselBox>span{
	font-size: 40px;
	/* font-family: "_宋体_"; */
	width: 50px;
	height: 80px;
	background-color: rgba(0,0,0,0.5);
	text-align: center;
	line-height: 80px;
	color: #FFFFFF;
	position: absolute;
	left: 0;	top: 50%;
	cursor: pointer;
	transform: translateY(-50%);

}
.CarouselBox #right{
	left: auto;
	right: 0;
}
.CarouselBox>ul>li{
	list-style-type: none;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}
.CarouselBox>ul>li.one{
	display: block;
}

.CarouselBox>ul>li>img{
	width: calc(1202px*0.7);
}
.dots{
	position: absolute;
	left: 50%;
	bottom: 20px;
	transform: translateX(-50%);
	list-style-type: none;
}
.dots li{
	width: 15px;
	height: 15px;
	background: rgba(255,255,255,0.6);
	float: left;
	border-radius: 50%;
	margin: 0 5px;
	box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
.dots li.active{
	background: rgba(0,0,0,0.6);
}
（四）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/own.css" />
	</head>
	<body>
		<div class="banner">
			<div class="wrap">
				<ul class="image">
					<li><img src="image/lb1.jpg"></li>
					<li><img src="image/lb2.jpg"></li>
					<li><img src="image/lb3.jpg"></li>
				</ul>
				<ul class="dot"> 
					<li class="active" data-index = "0"></li>
					<li data-index = "1"></li>
					<li data-index = "2"></li>
				</ul>
				<ul class="btn">
					<button type="button" class="leftbtn">
						< </button> <button type="button" class="rightbtn"> >
					</button>
				</ul>
			</div>
		</div>
		<script src="js/jquery-3.4.1.min.js"></script>
		<script type="text/javascript">
			// 实现自动轮播
			// 设置变量，获取操作对象
			var num = 0;
			var timer = null;
			var images = $(".image");
			var img_li = $(".banner .wrap .image li");
			var dots_li = $(".dot li");
			var left = $(".leftbtn");
			var right = $(".rightbtn");
			function autoplay(){
				num++;
				num = num%img_li.length;
				img_li.eq(num).stop().fadeIn(500).siblings().fadeOut(500);
				dots_li.eq(num).addClass("active").siblings().removeClass("active");
			}
			timer = setInterval(autoplay,3000);
			// 图片切换时小点同步
			for (var i = 0; i < dots_li.length; i++) {
				dots_li[i].addEventListener('click',function(){
					var pointindex = this.getAttribute('data-index');
					clearInterval(timer);
					img_li.eq(pointindex).stop().fadeIn(500).siblings().fadeOut(1000);
					dots_li.eq(pointindex).addClass("active").siblings().removeClass("active");
					
				})
			}
			// 鼠标悬浮在图片上时停止自动轮播,离开继续
			images.hover(
			function(){
				clearInterval(timer);
			},
			function(){
				timer = setInterval(autoplay,3000);
			});
			
			left.click(function() {
				num--;
				num = num % img_li.length;
				img_li.eq(num).stop().fadeIn(200).siblings().fadeOut(500);
				dots_li.eq(num).addClass("active").siblings().removeClass("active");
			});
			right.click(function() {
				num++;
				num = num % img_li.length;
				img_li.eq(num).stop().fadeIn(200).siblings().fadeOut(500);
				dots_li.eq(num).addClass("active").siblings().removeClass("active");
			});
		</script>
	</body>
</html>


*{
	margin: 0;
	padding: 0;
}
body{
	background: url(../image/bk1.jpg);
	background-size: cover;
}
li{
	list-style-type: none;
}
.banner{
	width: 100%;
	/* background-color: #0077AA; */
	margin-top: 100px;
	
}
.wrap{
	width: 601px;
	height: 338px;
	margin: 0 auto;
	position: relative;
	/* background-color: #57aa3d; */
}
.image li{
	position: absolute;
	display: none;
}
.image li:nth-child(1){
	display: block;
}
.banner img{
	width: 601px;
	height: 338px;
	/* z-index: -100000; */
	cursor: pointer; 
}
.dot{
	/* background-color: orangered; */
	position: absolute;
	bottom: 20px;
	right: 20px;
}
.dot li{
	margin-right: 20px;
	float: left;
	width: 10px;
	height: 10px;
	border: 2px solid rgba(204, 204, 204, 0.6) ;
	border-radius: 100%;
	background-color: rgba(109, 109, 109, 0.9);
	cursor: pointer;
} 
.dot li.active{
	background-color: #f1976e;
}
/* 
如果点中间有个空格,意思是选择 li 的子元素类名为 active 的元素对其生效
如果点中间没有空格,是选择类名为 active 的 li 对其生效
*/
.btn{
	/* height: 50px; */
	position: absolute;
	/* background-color: greenyellow; */
	top: 50%;
	transform: translateY(-50%);
}
.btn button{
	color: #fff7fb;
	cursor: pointer;
	width: 30px;
	height: 50px;
	border: 0.5px solid rgba(80, 80, 80, 0.9);
	border-radius: 5px;
	font-size: 30px;
	background-color: rgba(53, 53, 53, 0.9);
}
.btn button:nth-child(2){
	position: absolute;
	left: 571px;
}
（五）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/lunbotest1.css" />
	</head>
	<body>
		<div class="CarouselBox">
			<ul>
				<li class="one">
					<img src="./image/lb1.jpg">
				</li>
				<li>
					<img src="./image/lb2.jpg">
				</li>
				<li>
					<img src="./image/lb3.jpg">
				</li>
			</ul>
			<span id="left">
				< </span> <span id="right">
					>
			</span>
			<ol class="dots">
				<li class="active"></li>
				<li></li>
				<li></li>
			</ol>
		</div>
		<script src="js/jquery-3.4.1.min.js"></script>
		<script>
			var banner = $('.CarouselBox');
			var ul_li = $('.CarouselBox>ul>li');
			var left = $('.CarouselBox>#left');
			var right = $('.CarouselBox>#right');
			var dot = $('.CarouselBox>.dots>li');
			var timer = null;
			var num = 0;

			function autoplay() {
				timer = setInterval(function() {
					num++;
					num = num % ul_li.length;
					ul_li.eq(num).stop().fadeIn(500).siblings().fadeOut(1000);
					dot.eq(num).addClass('active').siblings().removeClass('active');
				}, 3000)
			}

			autoplay();

			banner.hover(
				function() {
					clearInterval(timer);
				},
				function() {
					autoplay()
				});

			left.click(function() {
				num--;
				num = num % ul_li.length;
				ul_li.eq(num).stop().fadeIn(200).siblings().fadeOut(500);
				dot.eq(num).addClass('active').siblings().removeClass('active');
			});
			right.click(function() {
				num++;
				num = num % ul_li.length;
				ul_li.eq(num).stop().fadeIn(200).siblings().fadeOut(500);
				dot.eq(num).addClass('active').siblings().removeClass('active');
			});
		</script>
	</body>
</html>


*{
	margin: 0;
	padding:0;
}
body{
	background: url(../image/bk1.jpg);
	background-size: cover;
}
.CarouselBox{
	width: calc(1202px*0.7);
	height: calc(676px*0.7);
	margin: 80px auto;
	/* border: 10px solid red; */
	box-shadow: 0 5px -10px rgba(0,0,0,0.5);
	position: relative;
}
.CarouselBox>ul{
	width: 100%;
	height: 100%;
	
}
.CarouselBox>ul>li>img:hover{
	cursor: pointer;
}
.CarouselBox>span{
	font-size: 40px;
	/* font-family: "_宋体_"; */
	width: 50px;
	height: 80px;
	background-color: rgba(0,0,0,0.5);
	text-align: center;
	line-height: 80px;
	color: #FFFFFF;
	position: absolute;
	left: 0;	top: 50%;
	cursor: pointer;
	transform: translateY(-50%);

}
.CarouselBox #right{
	left: auto;
	right: 0;
}
.CarouselBox>ul>li{
	list-style-type: none;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}
.CarouselBox>ul>li.one{
	display: block;
}

.CarouselBox>ul>li>img{
	width: calc(1202px*0.7);
}
.dots{
	position: absolute;
	left: 50%;
	bottom: 20px;
	transform: translateX(-50%);
	list-style-type: none;
}
.dots li{
	width: 15px;
	height: 15px;
	background: rgba(255,255,255,0.6);
	float: left;
	border-radius: 50%;
	margin: 0 5px;
	box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
.dots li.active{
	background: rgba(0,0,0,0.6);
}
/* 
如果点中间有个空格,意思是选择 li 的子元素类名为 active 的元素对其生效
如果点中间没有空格,是选择类名为 active 的 li 对其生效
*/
@彼岸花
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简单自动切换轮播图
weixin_42134836的博客
11-14 349
<style type="text/css"> .slider { position: relative; overflow: hidden; min-height: 1px; } .slider-groups { position: relative; overflow: hid...
css3动画属性--animation（动画）
每天多懂一点点
03-27 3936
CSS3中的animation与HTML5中的Canvas绘制动画又不同，animation只应用在页面上已存在的DOM元素上。 运用animation能创建自己想要的一些动画效果，但是有点粗糙。 了解animation之前得知道"Keyframes",我们把他叫做“关键帧”。 Keyframes具有其自己的语法规则，它的命名是由"@keyframes"开头，后面紧接着是这个“动画的名称
02微信小程序-轮播的宽度100%显示和轮播的基础配置
weixin_30301183的博客
09-21 282
1==》如何让轮播的宽度100%显示？ 你先给swiper 外面添加一个大盒子,给大盒子一个类 。 <view class='lunbobox'> 然后wxss 里面设置 image , width: 100%; 在设置大盒子的宽度 width: 100%; 这样就可以了. <view class='lunbobox'> <...
用@keyframe实现图片轮播
x311609001028的博客
01-08 2298
通过keyframe实现4张图片轮播 通过无序列表放置5张图片，第5张和第1张相同，使当第4张播放时后方不会出现空白 每个li放置一张，li浮动，使图片位于一行，超出框子的隐藏（框子设置overflow:hidden;） 通过ul向左移动，第四张移出后返回原位，再次重复移动，实现轮播的效果 未隐藏时效果图 <!DOCTYPE html> <html lan...
轮播图的多种实现及原理
热门推荐
梦起丶的博客
12-28 3万+
【写在前面】 最近，在自己的项目中遇到了很多轮播图。 这里的很多，并非数量多，指的是种类很多，即多种实现。 本篇主要内容： 1、轮播图的多种实现。 2、效果对比和更好的建议。 【正文开始】 方法一： 相当常见简单的实现方法： 1、将所有的图片并排。 2、依次平移即可。 HMTL 和 CSS部分： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
详解js图片轮播效果实现原理
11-25
3. **图片切换方法**： - `setSrc(i)` 函数接收一个参数，代表要显示的图片索引。它会更新`image`元素的`src`属性，实现图片的切换。 4. **导航控制**： - `pre()`, `next()`, `setSrc()` 和 `play()` 函数提供了...
js实现图片无缝循环轮播
10-16
JavaScript 实现图片无缝循环轮播是一种常见的网页动态效果，它为用户提供了一种优雅的方式来展示一组图片，让图片在用户眼前连续、平滑地切换。在本文中，我们将深入探讨如何利用 JavaScript 实现这一功能。 首先...
slider图片轮播代码
01-17
- **图片轮播组件**：一种网页元素，用于循环展示一组图片或内容，通常包含前进、后退按钮和自动切换功能。 - **DOM（Document Object Model）**：网页的结构树，用于访问和操作网页元素。 - **CSS（Cascading ...
首页图片轮播
11-24
5. 动画效果：图片切换时加入过渡动画可以使用户体验更好。jQuery提供了多种动画方法，如fadeIn()和fadeOut()，可以实现淡入淡出效果；slideToggle()则可以实现滑动切换。 6. 兼容性和响应式设计：考虑到不同设备和...
配音网站专题html模板
12-04
它可能包含动态轮播图、导航栏、特色服务模块、最新资讯区域等，旨在吸引用户并引导他们深入了解网站。 2. **新闻详情页（news_info.html）**：这个页面主要用于展示单条新闻或文章的详细内容，包括新闻标题、内容...
CSS3 animation动画与js动画的优缺点
wenxin_liu的博客
04-26 806
CSS的animation属性 在网页中加入动画是一件很有意思的事情，一般我们可以使用js添加事件来实现动画。但还有一种方法可以实现动画效果，就是使用css 的animation属性。 CSS3中添加的新属性animation是用来为元素实现动画效果的。但是animation无法单独担当起实现动画的效果。这个我们会在后面讲到。我们先来讲讲animation的相关用法。这里我的代码均是采用标准的cs...
JS实战——轮播图
qq_65715980的博客
07-06 3万+
html+css+js实现目前各大网站上轮播图的效果，可以利用我的代码稍加改装就能实现想要的效果。
轮播图详解
qq_35892775的博客
10-15 4199
我理解的轮播图思想是这样：一些图片按指定顺序依次播放，就像一幅卷轴徐徐打开一般，一手打开，一手又卷起。所以可以将所要轮播的图片“拼在一起”构成一幅大图，在窗口前拉动。 每个黑边框模拟一张需要轮播的图片，一组黑边框构成一幅大图，红色边框模拟窗口，代表每次能显示的区域。 1.构建窗口 .container { position: relative; width: 1...
php怎么做图片轮播,如何利用纯css实现图片轮播
weixin_33851180的博客
03-12 148
代码解析：这里创建了三个 img 元素，img 元素外面是图片容器，图片容器外面是展示容器。css代码：#container {width: 400px;height: 300px;overflow: hidden;}#photo {width: 1200px;animation: switch 5s ease-out infinite;}#photo > img {float: left;...
css轮播图_前端组件之轮播图
weixin_39736150的博客
11-27 394
前端组件之轮播图继续更新组件的文章,今天来说说轮播图组件。相信这个组件应该在各大网站都能经常见到，大家面试的时候可能也会被问到轮播图的原理和实现。 所以，下面来说说说我自己实现的时候的一些心得!~上面图这个就是京东的一个轮播图.我们就模仿类似的做一个轮播图。原理将图片在一行中平铺，然后计算偏移量再利用定时器实现定时轮播。需求分析功能分析要实现这个效果，首先需要分析一下。轮播图最重要就是图片通过轮播...
JavaScript案例（一）：点击按钮切换图片
weixin_44825185的博客
03-24 1561
代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload = function () { var image = document.getElementById("a"); va
JavaScript（十二）：定时器显示时间
weixin_44825185的博客
03-29 763
代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } </style> </head> <b
JavaScript案例（十）：留言评论功能
weixin_44825185的博客
03-26 723
代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>评论</title> <style> *{ padding: 0; margin: 0; } #out{ width: 512px;
JavaScript案例（三）：大小图切换
weixin_44825185的博客
03-24 413
代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>大小图切换</title> <style> *{ padding: 0; margin: 0; } ul{ list-style: non
在JS中做一个专题网站，至少有四个网页
最新发布
06-11
您可以在此页面上添加一些动态元素，例如轮播图或滚动新闻。 2. 关于我们页面（About Us Page）：这个页面应该包含有关您或您的公司的信息，例如历史，愿景和使命。此页面也可以包含您的联系信息，例如电子邮件地址...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值