轮播图

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

轮播图表面样式

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.transfrom_image{
			width: 420px;
			height: 200px;
			margin: 0 auto;
		}


		a{
			text-decoration: none;
			color: black;
		}

		.img{
			display: block;
			width: 420px;
			height: 200px;
			background-size: 420px 200px;
			background-image: url(images/03.png);
		}

		.left, .right{
			display: block;
			height: 20px;
			line-height: 20px;	
			background-color: white;
			opacity: 0.5;
			position: absolute;
			text-align: center;
			top: 50%;
			margin-top: -10px;
		}

		.left{
			left: 0;
			
		}

		.right{
			right: 0;
			
		}

		.bottom{
			position: absolute;
			bottom: 10px;
			left: 50%;
			margin-left: -35px;
			width: 70px;
			height: 10px;
			background-color: white;
			opacity: 0.5;
			border-radius: 20px;
		}

		.bottom div{
			
			display: inline-block;

			width: 8px;
			height: 8px;
			margin: 1px;
			margin-left: 4px;
			margin-bottom: 8px;
			border-radius: 50%;
			background-color: black;
		}

		.bottom div:hover{
			background-color: #7fffd4;
		}



		
	</style>
</head>
<body>
	<div style="position: relative;" class="transfrom_image">
		<a class="img" href=""></a>
		<a class="left" href=""><</a>
		<a class="right" href="">></a>
		<div class="bottom">
			<div ></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</div>

</body>
</html>

轮播图的小点

在这里插入图片描述

<a class="pic1 fl" href="">
		    		<button class="lb"><</button>
		    		<button class="rb">></button>
		    		<div class="circle">
		    			<span class="awake"></span><span></span><span></span><span></span><span></span>
		    		</div>
	    		</a>

#display .center .first .pic1 .circle{
	position: absolute;
	bottom: 15px;
	left: 50%;
	border-radius: 10px;
	padding: 3px 0;
	font-size: 0;// 会保留字体高度，所以要设置font-size为零
	margin-left: -35px;
	background-color: rgba(255,255,255,0.3);
}
#display .center .first .pic1 .circle span{
	
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #fff;
	margin: 0 3px;
	cursor: pointer;

}

#display .center .first .pic1 .circle .awake{
	background-color: #ff5000;
}
#display .center .second{
	margin: 10px 10px 0 10px;
	width: 690px;
	height: 230px;
	
}

简单轮播图

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0
    }

    ul {
      list-style: none
    }

    img {
      vertical-align: top
    }

    .box {
      width: 730px;
      height: 454px;
      margin: 100px auto;
      padding: 5px;
      border: 1px solid #ccc;
    }

    .inner {
      width: 730px;
      height: 454px;
      background-color: pink;
      overflow: hidden;
      position: relative;
    }

    .inner ul {
      width: 1000%;
      position: absolute;
      top: 0;
      left: 0;
    }

    .inner li {
      float: left;
    }

    .square {
      position: absolute;
      right: 10px;
      bottom: 10px;
    }

    .square span {
      display: inline-block;
      width: 16px;
      height: 16px;
      background-color: #fff;
      text-align: center;
      line-height: 16px;
      cursor: pointer;
    }

    .square span.current {
      background-color: orangered;
      color: #fff;
    }

  </style>
</head>
<body>
<div class="box" id="box">
  <div class="inner"><!--相框-->
    <ul>
      <li><a href="#"><img src="images/1.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/2.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/3.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/4.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/5.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/6.jpg" alt=""/></a></li>
    </ul>
    <div class="square">
      <span class="current">1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
      <span>6</span>
    </div>
  </div>
</div>
<script>
  //获取最外面的div
  var box=document.getElementById("box");
  //获取相框
  var inner=box.children[0];
  //获取相框的宽度
  var imgWidth=inner.offsetWidth;
  //获取ul
  var ulObj=inner.children[0];
  //获取所有的span标签
  var spanObjs=inner.children[1].children;
  //循环遍历所有的span标签,注册鼠标进入的事件
  for(var i=0;i<spanObjs.length;i++){
    //循环的时候把索引值保存在每个span的自定义属性中
    spanObjs[i].setAttribute("index",i);
    //注册鼠标进入事件
    spanObjs[i].onmouseover=function () {
      //先干掉所有的span的背景颜色
      for(var j=0;j<spanObjs.length;j++){
        //移除了每个span的类样式
        spanObjs[j].removeAttribute("class");
      }
      //设置当前的span的背景颜色
      this.className="current";
      //移动ul(每个图片的宽*鼠标放在这个按钮的索引值)
      //获取当前鼠标进入的span的索引
      var index=this.getAttribute("index");
      animate(ulObj,-index*imgWidth);
    };
  }
  //设置任意的一个元素,移动到指定的目标位置
  function animate(element, target) {
    clearInterval(element.timeId);
    //定时器的id值存储到对象的一个属性中
    element.timeId = setInterval(function () {
      //获取元素的当前的位置,数字类型
      var current = element.offsetLeft;
      //每次移动的距离
      var step = 10;
      step = current < target ? step : -step;
      //当前移动到位置
      current += step;
      if (Math.abs(current - target) > Math.abs(step)) {
        element.style.left = current + "px";
      } else {
        //清理定时器
        clearInterval(element.timeId);
        //直接到达目标
        element.style.left = target + "px";
      }
    }, 20);
  }


</script>
</body>
</html>

左右焦点轮播图

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    body, ul, ol, li, img {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    #box {
      width: 520px;
      height: 280px;
      padding: 5px;
      position: relative;
      border: 1px solid #ccc;
      margin: 100px auto 0;
    }

    .ad {
      width: 520px;
      height: 280px;
      overflow: hidden;
      position: relative;
    }

    #box img {
      width: 520px;
    }

    .ad ol {
      position: absolute;
      right: 10px;
      bottom: 10px;
    }

    .ad ol li {
      width: 20px;
      height: 20px;
      line-height: 20px;
      border: 1px solid #ccc;
      text-align: center;
      background: #fff;
      float: left;
      margin-right: 10px;
      cursor: pointer;
      _display: inline;
    }

    .ad ol li.current {
      background: yellow;
    }

    .ad ul li {
      float: left;
    }

    .ad ul {
      position: absolute;
      top: 0;
      width: 2940px;
    }

    .ad ul li.current {
      display: block;
    }

    #focusD {
      display: none;
    }

    #focusD span {
      width: 40px;
      height: 40px;
      position: absolute;
      left: 5px;
      top: 50%;
      margin-top: -20px;
      background: #000;
      cursor: pointer;
      line-height: 40px;
      text-align: center;
      font-weight: bold;
      font-family: '黑体';
      font-size: 30px;
      color: #fff;
      opacity: 0.3;
      border: 1px solid #fff;
    }

    #focusD #right {
      right: 5px;
      left: auto;
    }
  </style>
</head>
<body>
<div id="box" class="all">
  <div class="ad">
    <ul id="imgs">
      <li><img src="images/01.jpg"/></li>
      <li><img src="images/02.jpg"/></li>
      <li><img src="images/03.jpg"/></li>
      <li><img src="images/04.jpg"/></li>
      <li><img src="images/05.jpg"/></li>
    </ul>
  </div><!--相框-->
  <div id="focusD"><span id="left">&lt;</span><span id="right">&gt;</span>
  </div>
</div>
<script>

  //获取最外面的div
  var box = document.getElementById("box");
  //获取相框
  var ad = box.children[0];
  //获取相框的宽度
  var imgWidth = ad.offsetWidth;
  //获取ul
  var ulObj = ad.children[0];
  //获取左右焦点的div
  var focusD = document.getElementById("focusD");

  //显示和隐藏左右焦点的div----为box注册事件
  box.onmouseover = function () {
    focusD.style.display = "block";
  };
  box.onmouseout = function () {
    focusD.style.display = "none";
  };


  //点击右边按钮
  var index=0;
  document.getElementById("right").onclick = function () {
    if(index<ulObj.children.length-1){
      index++;
      animate(ulObj,-index*imgWidth);
    }

  };
  //点击左边按钮
  document.getElementById("left").onclick = function () {
    if(index>0){
      index--;
      animate(ulObj,-index*imgWidth);
    }
  };


  //设置任意的一个元素,移动到指定的目标位置
  function animate(element, target) {
    clearInterval(element.timeId);
    //定时器的id值存储到对象的一个属性中
    element.timeId = setInterval(function () {
      //获取元素的当前的位置,数字类型
      var current = element.offsetLeft;
      //每次移动的距离
      var step = 10;
      step = current < target ? step : -step;
      //当前移动到位置
      current += step;
      if (Math.abs(current - target) > Math.abs(step)) {
        element.style.left = current + "px";
      } else {
        //清理定时器
        clearInterval(element.timeId);
        //直接到达目标
        element.style.left = target + "px";
      }
    }, 20);
  }

</script>

</body>
</html>

无缝轮播图

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;

    }

    img {
      vertical-align: top;
    }

    /*取消图片底部3像素距离*/
    .box {
      width: 300px;
      height: 200px;
      margin: 100px auto;
      background-color: pink;
      border: 1px solid red;
      position: relative;
      overflow: hidden;
    }

    .box ul li {
      float: left;
    }

    .box ul {
      width: 1500px;
      position: absolute;
      left: 0;
      top: 0;
    }
  </style>
</head>
<body>
<div class="box" id="screen">
  <ul>
    <li><img src="imagess/01.jpg" alt=""/></li>
    <li><img src="imagess/02.jpg" alt=""/></li>
    <li><img src="imagess/03.jpg" alt=""/></li>
    <li><img src="imagess/04.jpg" alt=""/></li>
    <li><img src="imagess/01.jpg" alt=""/></li>
  </ul>
</div>
<script src="common.js"></script>
<script>
  var current = 0;//只声明了一次
  function f1() {
    var ulObj = document.getElementById("screen").children[0];
    current -= 10;

    if (current < -1200) {
      ulObj.style.left = 0 + "px";
      current = 0;
    } else {
      ulObj.style.left = current + "px";
    }


  }

  var timeId=setInterval(f1, 20);


  document.getElementById("screen").onmouseover=function () {
    //停止
    clearInterval(timeId);
  };
  document.getElementById("screen").onmouseout=function () {
    //继续
    timeId=setInterval(f1, 20);
  };

</script>

</body>
</html>

最终版

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    * {
      padding: 0;
      margin: 0;
      list-style: none;
      border: 0;
    }

    .all {
      width: 500px;
      height: 200px;
      padding: 7px;
      border: 1px solid #ccc;
      margin: 100px auto;
      position: relative;
    }

    .screen {
      width: 500px;
      height: 200px;
      overflow: hidden;
      position: relative;
    }

    .screen li {
      width: 500px;
      height: 200px;
      overflow: hidden;
      float: left;
    }

    .screen ul {
      position: absolute;
      left: 0;
      top: 0px;
      width: 3000px;
    }

    .all ol {
      position: absolute;
      right: 10px;
      bottom: 10px;
      line-height: 20px;
      text-align: center;
    }

    .all ol li {
      float: left;
      width: 20px;
      height: 20px;
      background: #fff;
      border: 1px solid #ccc;
      margin-left: 10px;
      cursor: pointer;
    }

    .all ol li.current {
      background: #DB192A;
    }

    #arr {
      display: none;
    }

    #arr span {
      width: 40px;
      height: 40px;
      position: absolute;
      left: 5px;
      top: 50%;
      margin-top: -20px;
      background: #000;
      cursor: pointer;
      line-height: 40px;
      text-align: center;
      font-weight: bold;
      font-family: '黑体';
      font-size: 30px;
      color: #fff;
      opacity: 0.3;
      border: 1px solid #fff;
    }

    #arr #right {
      right: 5px;
      left: auto;
    }
  </style>
</head>
<body>
<div class="all" id='box'>
  <div class="screen"><!--相框-->
    <ul>
      <li><img src="images/1.jpg" width="500" height="200"/></li>
      <li><img src="images/2.jpg" width="500" height="200"/></li>
      <li><img src="images/3.jpg" width="500" height="200"/></li>
      <li><img src="images/4.jpg" width="500" height="200"/></li>
      <li><img src="images/5.jpg" width="500" height="200"/></li>
    </ul>
    <ol>
    </ol>
  </div>
  <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
</div>
<script>
  //获取最外面的div
  var box = document.getElementById("box");
  //获取相框
  var screen = box.children[0];
  //获取相框的宽度
  var imgWidth = screen.offsetWidth;
  //获取ul
  var ulObj = screen.children[0];
  //获取ul中的所有的li
  var list = ulObj.children;
  //获取ol
  var olObj = screen.children[1];
  //焦点的div
  var arr = document.getElementById("arr");

  var pic = 0;//全局变量
  //创建小按钮----根据ul中的li个数
  for (var i = 0; i < list.length; i++) {
    //创建li标签,加入到ol中
    var liObj = document.createElement("li");
    olObj.appendChild(liObj);
    liObj.innerHTML = (i + 1);
    //在每个ol中的li标签上添加一个自定义属性,存储索引值
    liObj.setAttribute("index", i);
    //注册鼠标进入事件
    liObj.onmouseover = function () {
      //先干掉所有的ol中的li的背景颜色
      for (var j = 0; j < olObj.children.length; j++) {
        olObj.children[j].removeAttribute("class");
      }
      //设置当前鼠标进来的li的背景颜色
      this.className = "current";
      //获取鼠标进入的li的当前索引值
      pic = this.getAttribute("index");
      //移动ul
      animate(ulObj, -pic * imgWidth);
    };
  }
  //设置ol中第一个li有背景颜色
  olObj.children[0].className = "current";


  //克隆一个ul中第一个li,加入到ul中的最后=====克隆
  ulObj.appendChild(ulObj.children[0].cloneNode(true));

  //自动播放
 var timeId= setInterval(clickHandle,1000);

  //鼠标进入到box的div显示左右焦点的div
  box.onmouseover = function () {
    arr.style.display = "block";
    //鼠标进入废掉之前的定时器
    clearInterval(timeId);
  };
  //鼠标离开到box的div隐藏左右焦点的div
  box.onmouseout = function () {
    arr.style.display = "none";
    //鼠标离开自动播放
    timeId= setInterval(clickHandle,1000);
  };
  //右边按钮
  document.getElementById("right").onclick =clickHandle;
  function clickHandle() {
    //如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,
    //所以,如果用户再次点击按钮,用户应该看到第二个图片
    if (pic == list.length - 1) {
      //如何从第6个图,跳转到第一个图
      pic = 0;//先设置pic=0
      ulObj.style.left = 0 + "px";//把ul的位置还原成开始的默认位置
    }
    pic++;//立刻设置pic加1,那么此时用户就会看到第二个图片了
    animate(ulObj, -pic * imgWidth);//pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片
    //如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,
    if (pic == list.length - 1) {
      //第五个按钮颜色干掉
      olObj.children[olObj.children.length - 1].className = "";
      //第一个按钮颜色设置上
      olObj.children[0].className = "current";
    } else {
      //干掉所有的小按钮的背景颜色
      for (var i = 0; i < olObj.children.length; i++) {
        olObj.children[i].removeAttribute("class");
      }
      olObj.children[pic].className = "current";
    }

  };
  //左边按钮
  document.getElementById("left").onclick = function () {
    if (pic == 0) {
      pic = 5;
      ulObj.style.left = -pic * imgWidth + "px";
    }
    pic--;
    animate(ulObj, -pic * imgWidth);
    //设置小按钮的颜色---所有的小按钮干掉颜色
    for (var i = 0; i < olObj.children.length; i++) {
      olObj.children[i].removeAttribute("class");
    }
    //当前的pic索引对应的按钮设置颜色
    olObj.children[pic].className = "current";

  };

  //设置任意的一个元素,移动到指定的目标位置
  function animate(element, target) {
    clearInterval(element.timeId);
    //定时器的id值存储到对象的一个属性中
    element.timeId = setInterval(function () {
      //获取元素的当前的位置,数字类型
      var current = element.offsetLeft;
      //每次移动的距离
      var step = 10;
      step = current < target ? step : -step;
      //当前移动到位置
      current += step;
      if (Math.abs(current - target) > Math.abs(step)) {
        element.style.left = current + "px";
      } else {
        //清理定时器
        clearInterval(element.timeId);
        //直接到达目标
        element.style.left = target + "px";
      }
    }, 10);
  }
</script>


<script>


  //  var num=0;
  //  function f1(){
  //
  //    num=1000;
  //  }
  //  f1();
  //  console.log(num);
</script>
</body>
</html>
广东话的蛇皇
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
利用js实现轮播图功能，同时使下面小点跟随位置正确显示
jilihui2003的博客
03-25 1615
1轮播图实现的原理就是利用js中定时器，根据时间来改变盒子的位置实现动画，但是为了美观以及合理化，我们需要对其添加一些功能 1：首先是缓动动画，如果直接平移或者在点击瞬间改变位置会很不美观，所以我们需要制定一个缓动动画的函数，使用函数会让代码变得简洁方便 function animate(obj,target){ clearInterval(obj.timer);//先把上一个定时器清除 obj.timer=setInterval(function(){ //缓
轮播图上小圆点制作过程
weixin_52269009的博客
01-19 5925
首先创建一个盒子模型，利用img标签引入背景图，并为其设置相对定位： 利用有序列表ol，创建四个li标签，为其设置绝对定位，更改样式为无，左浮动后，利用left:50%表示相对于背景图片距左端的距离为50%，但未真正的实现居中,需利用transform标签实现真正的居中： 在实现居中后，随便在四个li标签中选择一个为其命名，作为轮播图中此图所在位置的实心表示，并为其设置成白色： 实现最终效果。 ...
JavaScript——网页轮播图（ 实现点击小圆点、图片滑动、小圆点样式改变）
鹿蹊zz的博客
07-05 9103
实现点击小圆点、图片滑动、小圆点样式改变1.利用html+css完成轮播图片，底部小点的整体效果的布局。2.通过原生js完成图片轮播，无缝自动切换，底部小点随图片切换而切换。 html部分 JS部分 动态效果图如下：...
轮播图小圆点跟着滑动(非写死)
10-24
非写死状态的轮播图自动轮播,可以随意多张图片匹配。
viewpager实现图片自动轮播，带小点标明当前位置
06-07
实现了viewpager自动播放，点击播放，下方与小点图片跟随大图变化，显示当前的位子
jquery图片轮播图多图切换效果（带小图左右箭头）
03-16
jQuery提供了一系列的动画方法，如`fadeIn`、`fadeOut`等，可以用来实现平滑的图片切换效果。同时，Swiper也内置了丰富的过渡动画效果，可以根据需求进行设置。 总的来说，“jquery图片轮播图多图切换效果（带小图...
纯div+css轮播图片切换图片
11-07
下面将详细讲解这个主题，包括如何使用div和css创建图片切换、电子相册以及轮播图片的效果。 一、图片切换 图片切换是通过CSS控制图片的显示和隐藏，实现图片的动态变化。这通常涉及到CSS的`display`属性，通过改变...
图片切换，轮播图
03-17
在网页设计和开发中，图片切换与轮播图是一种常见的元素，用于展示多张图片或内容，特别是当页面空间有限但需要展示的信息量较大时。它们通常被用于产品展示、新闻更新、广告轮播等场景。轮播图设计的核心目标是提供...
css轮播图片百叶窗切换
12-29
在网页设计中，动态效果的使用可以极大地提升用户体验，其中轮播图（Slider）是一种常见的展示方式，它能够以优雅的方式展示多张图片或内容。而“百叶窗”切换效果则是轮播图动画中的一种独特设计，它模拟了百叶窗...
IOS轮播图合集（视频+图片）
02-16
在iOS开发中，轮播图（Carousel）是一种常见的UI组件，用于展示一组可滑动的图片或视频，常用于广告、推荐内容或者展示多种产品。本资源“IOS轮播图合集（视频+图片）”显然是一个包含了实现这种功能代码示例的...
轮播图带小点的
guanyulong1059的博客
05-23 1151
private void startRool()  { // 开始轮播 handler.sendEmptyMessageDelayed(0,2000); } //小点的设置 private void initDots()  { dotsList = new ArrayList(); dotsList.clear(); // 移除小点 lines.removeAllViews(
你还在为轮播图上的小点 发愁吗，请速速围观围观
qq_37721739的博客
04-09 1892
html 的demo如下：                 css 样式： li{ color: red; font-siz
小程序修改轮播图的小点样式
weixin_40344560的博客
11-10 7970
  本功能参考自https://www.cnblogs.com/momozjm/p/8609728.html  在原来的代码上添加部分js 效果如下：                                                            wxml：  &lt;view class='swiper-box'&gt; &lt;swiper indic...
修改swiper轮播图下部的小点点
weixin_45688725的博客
04-20 3989
在日常开发中我们使用swiper插件时，底部的小点点需要修改成如上图样式的形状，那么上代码吧 <!-- Add Pagination --> <div class="swiper-pagination"> </div> 上面代码即为html中s...
viewpage+LinearLayout 实现轮播图+小圆点
jialangji的博客
10-12 1582
//轮播布局 <android.support.v4.view.ViewPager android:id="@+id/vp" android:layout_width="match_parent" android:layout_height="200dp"> <LinearLayout android:id="@+id/linear" android
轮播图小圆点自动轮播（非写死）
刘 争
10-24 2868
轮播图大家用得很多了,经常使用viewpager+和几个圆点组成的布局,随意组合在一起就完成了,这样可以完成任务,但是我们是在使用服务器返回不定量图片数量的时候,就会和实际数据匹配不上了。 这里就用一个demo讲解灵活使用多张图片和对应的小圆点组成轮播的组件，以及小圆点跟着动的效果。啥都不说了，直接写代码： 布局文件: "1.0" encoding="utf-8"?> "http:/
轮播图--小圆点篇
qq_41196874的博客
09-05 3666
9.3小T学前端 小圆点轮播 练习思路： 小圆点随着左右两边的按钮来进行移动来显示相对应的图片 在选择单一的小圆点时会同时播放相对应的图片 代码： prebtn.onclick = function() { n--; if (n < 0) { n = imgItems.length - 1 } imgItems.forEach(function(item, e) { item.class
轮播图 左右点击及底部小圆点
diwuyanting的博客
10-18 5434
最近pc项目有两处一样的轮播图  有左右点击按钮及底部小圆点 接下来 代码奉上： css的写法，可以让子元素根据父元素定位，让它们定位在同一位置，再给子元素根据顺序加上z-index值，第一个最大，一次减小； 左右两侧点击按钮直接根据父元素定位，z-index值最大； js代码如下： // 轮播图 const Banner = function () { const
轮播图图片切换背景根据图片颜色渐变怎么弄
最新发布
07-22
要实现轮播图图片切换背景根据图片颜色渐变的效果，可以使用CSS和JavaScript来实现。下面是一种实现方式的示例代码： HTML部分： ```html ``` CSS部分： ```css .slideshow { position: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值