一个好看的轮播图效果

最新推荐文章于 2024-06-29 11:45:56 发布
最新推荐文章于 2024-06-29 11:45:56 发布
阅读量1.7k 收藏 4
点赞数 1
分类专栏： JS 文章标签： 轮播图 JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45615791/article/details/103605228
版权

用js实现了一个好看的动态轮播图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>swiper</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			div {
				border: 1px solid red;
				height: 350px;
				max-width: 750px;
				display: flex;
				position: relative;
				margin: auto;
				overflow: hidden;
			}
			div>div {
				width: 750px;
				position: absolute;
				border: 0px solid blue;
				margin: auto;
				
			}
			div>div:nth-child(1) {
				background: blueviolet;
				background: url(img/niubi.jpg) no-repeat;
				z-index: 5;
			}
			div>div:nth-child(2) {
				background: aqua;
				background: url(img/xuexi.jpg) no-repeat;
				z-index: 4;
			}
			div>div:nth-child(3) {
				background: brown;
				background: url(img/car.jpg) no-repeat;
				z-index: 3;
			}
			div>div:nth-child(4) {
				background: burlywood;
				background: url(img/Miboy.jpg) no-repeat;
				z-index: 2;
			}
			div>div:nth-child(5) {
				background: burlywood;
				background: url(img/BTB.jpg) no-repeat;
				z-index: 1;
			}
			div>div:nth-child(6) {
				background: blueviolet;
				background: url(img/niubi.jpg) no-repeat;
				z-index: 0;
			}
			.trs {
				transition: transform 1.5s;
			}
		</style>
	</head>
	<body>
		<div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		<script type="text/javascript">
			let divAll = document.querySelectorAll('div div')
			let index= 0,i= 0;
			let der = 1600;
			let interval = setInterval(()=>{
				der= 1600
				index += 800
				divAll[i].classList.add('trs')
				divAll[i].style.transform =  "translateX("+(-1000)+"px)"
				i++
				if (i == divAll.length) {
					for (let i in Array.from(divAll)) {
						divAll[i].classList.remove('trs')
						divAll[i].style.transform =  "translateX("+0+"px)"
						}
					der= 16;
					i=0
				}
			},der)
		</script>
	</body>
</html>

 

Leisure_Time
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一个很好看又简单的轮播图Demo
09-19
一个用html+css+js实现的一个简单却有美观的轮播图demo
超漂亮的jQuery图片轮播特效
10-23
为大家分享了超漂亮的jQuery图片轮播特效，支持Ajax加载数据，响应式布局，支持移动端触屏，功能强大，感兴趣的小伙伴们可以参考一下
【博主推荐】html好看的图片轮播多种风格（源码）
热门推荐
接受定制，友情互惠，致力于前端的全类型模板，打造通用模板源码，进阶于前后端联合模板，适用于全类型。
07-18 1万+
html好看的图片轮播，支持各种配置，html设计自定义图片轮播，html图片轮播，好看的图片轮播效果，html图片轮播带源码。
Blue带你三种方式实现轮播图（超酷炫效果）
最新发布
Blue的博客
06-29 1367
本篇文章用三种方式实现轮播图效果，为前端开发人员提供一些思路。
一个好看的页面轮播图
前端菜鸟
07-31 2554
HTML： &lt;div id=lunbo&gt;&lt;!--轮播图片开始--&gt; &lt;div class="shutter"&gt; &lt;div class="shutter-img"&gt; &lt;a href="#" data-shutter-title="Iron Man"&gt;&lt;img src=&
一款漂亮的轮播图片
12-17
一款很漂亮的轮播图片源码 一款很漂亮的轮播图片源码
好看的轮播切换效果
weixin_34187862的博客
04-25 481
微博上看到@过气网红一丝 发的，特地收集。 预览 html <div class="slides"> <div class="slide 1th"></div> <div class="slide 2th"></div> <div class="...
html好看的图片轮播多种风格（源码）
10-17
多种轮播效果图，支持配置，可以自动切换，鼠标拖动，角标按钮切换，不一样的切换效果，可以直接嵌入项目使用，简单灵活。 示例地址：https://blog.csdn.net/weixin_43151418/article/details/125842089
超好看的图片切换效果
07-13
2. **JavaScript/jQuery库**：如jQuery，它简化了DOM操作和动画处理，可以轻松创建复杂的图片切换效果，例如轮播图、幻灯片等。 3. **Bootstrap或类似的框架**：这些前端框架内置了图片切换组件，如Bootstrap的...
最好看的jquery 图片轮播图片切换特效
03-31
"最好看的jquery 图片轮播图片切换特效"这个主题聚焦于如何利用jQuery库来创建引人入胜、视觉效果出色的图片轮播效果。 jQuery 是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画制作等任务。在创建...
导航轮播高级特效效果图
05-22
导航轮播高级特效效果图，导航下拉收缩，轮播图文字浮层动画加背景图，按钮可点，指示器进度条效果等等，挺好看的
js 很好看的轮播特效
05-18
ＪＳ　很好看的轮播特效　实用性很强哦 适合华丽的网站
漂亮的图片轮播
11-25
2种情况的图片切换，很实用，通过JS和Flash结合实现。
原生js轮播图
07-02
原生js写的轮播图,样式写的很好看.参考了大多数网站的轮播图样式和功能,实现方法简单巧妙,注释也比较丰富.
好看的图片轮播
JS小学生的博客
08-03 2084
 图片轮播使用简单的原生JS，更换 &lt;img&gt;的url就可以，但是这样做出来的不够美观，此处介绍两种方式来对图片轮播进行美化。（在我的博文中多次提到了AUI框架，我会在下一篇文章中详细介绍一下AUI。AUI官网地址：http://www.auicss.com） 第一种：使用AUI框架完成图片轮播 首先在HTML文件中引入以下文件： &lt;link rel="styleshee...
好看的轮播图插件
qq_42289365的博客
08-31 779
https://www.lmcjl.com/index/javascript/jqueryview?id=24 介绍一个好看的轮播图插件 这个一个企业类型的轮播图插件，也使用于大型网站的PC轮播图，如果有兴趣的小伙伴，可以既然网站下载...
android好看的轮播图
sunweihao2019的博客
12-25 350
1.项目地址： 2.步骤： 1.设置轮播效果 它的使用其实就是把RecycleView.LayoutManager改一下就可以实现了，其他都是recycleView的正常操作： MyAdapter myAdapter=new MyAdapter(MainActivity.this,arrayList); mRvMainTest.setAdapter(myAdapter); /** * 设置轮播图效果的布局管理者 * 参数介绍：
【特效】挺不错的一个轮播图
zuncle的博客
02-10 1328
使用前必看：图片换成自己的，样式调成自己喜欢的也可以，一般的项目够用了，如果图片有点多推荐使用插件 swiper， <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> /*通用样式*/ html,body{
各种各样的轮播图
吵吵丶的博客
05-07 564
https://www.swiper.com.cn/demo/index.html
html写一个好看的轮播图
08-19
### 回答1： HTML 轮播图通常是用 JavaScript 和 CSS 来实现的，但是也可以用 HTML 标签来制作。下面是一个用 HTML 写的简单的轮播图的例子： ``` <div id="slider"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> </div> ``` 这段 HTML 代码会创建一个名为 "slider" 的 div 元素，里面有三张图片。要使图片轮播起来，你可以使用 JavaScript 来改变 div 中图片的显示顺序。 如果你想要更好看的轮播图，你可以使用 CSS 来添加样式。例如，你可以给图片添加边框和圆角，或者给 div 添加背景色。 ``` #slider img { border-radius: 10px; border: 2px solid #333; } #slider { background-color: #ccc; } ``` 这样你就可以制作出一个漂亮的轮播图了。 ### 回答2： 要写一个好看的轮播图，首先需要使用HTML标记语言的基本结构来搭建网页的框架。然后使用CSS样式语言来美化轮播图的外观。 在HTML中，可以使用<div>元素来创建一个容器来放置轮播图的内容。通过设置容器的宽度和高度，可以确定轮播图的大小。同时，可以给容器添加一个唯一的ID，以方便后续的样式控制。 接下来，在轮播图容器中创建一个<ul>元素，用于放置轮播图片的列表。每张图片将使用<li>元素表示，并通过设置<li>元素的背景图或者<img>元素来显示图片的内容。 为了实现轮播的效果，可以使用JavaScript来控制图片的切换。通过设置计时器，在规定的时间间隔内，即可自动切换到下一张图片。可以使用setInterval()函数来实现定时切换。同时，还可以给轮播图添加左右箭头或者导航圆点，以方便用户手动切换图片。 在CSS样式中，可以设置轮播图容器的背景颜色、边框样式以及内外边距等。还可以设置图片的宽度、高度以及动画效果，如淡入淡出、滑动等。此外，可以通过CSS来调整箭头或者导航圆点的样式，使其更加美观。 综上所述，通过HTML标记语言搭建轮播图的基本结构，再通过CSS样式语言美化外观，最后结合JavaScript来实现图片的自动切换和手动切换。这样就能够创建一个好看的轮播图。 ### 回答3： 要写一个好看的轮播图，首先需要使用HTML结构搭建基本框架。可以使用div元素来创建轮播图的整体容器，再使用ul和li元素来创建图片的列表。每个图片都是一个li元素，并设置相应的样式，并添加一个img元素来加载图片。 在HTML中，我们可以使用以下代码来创建轮播图的基本结构： ```html <div class="carousel-container"> <ul class="carousel-list"> <li><img src="image1.jpg" alt="Image 1"></li> <li><img src="image2.jpg" alt="Image 2"></li> <li><img src="image3.jpg" alt="Image 3"></li> </ul> </div> ``` 接下来，为轮播图添加CSS样式，使其显示和动画效果更加美观。可以使用CSS的选择器来选中相关元素，并设置样式。 ```css .carousel-container { width: 500px; height: 300px; overflow: hidden; } .carousel-list { width: 1500px; /* 设置为图片总宽度的3倍，以便显示三张图片 */ list-style: none; margin: 0; padding: 0; animation: carouselAnimation 10s infinite; /* 添加动画效果，10秒自动切换图片 */ } .carousel-list li { float: left; width: 500px; height: 300px; } @keyframes carouselAnimation { 0% { margin-left: 0; /* 开始时显示第一张图片 */ } 33.33% { margin-left: -500px; /* 在1/3处显示第二张图片 */ } 66.66% { margin-left: -1000px; /* 在2/3处显示第三张图片 */ } 100% { margin-left: 0; /* 循环至开始位置 */ } } ``` 通过设置容器的宽度和高度，以及将图片列表设置为水平方向浮动，可以实现图片的横向滚动效果。添加动画效果，使得图片在一定时间内自动切换。 以上是一个简单的轮播图实现方式，当然，你还可以根据自己的需求进行修改和美化，比如加入导航指示器、左右切换按钮等，来增加用户体验和功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值