html简单组件（八）：公告/广告自动轮播效果实现

桃扇骨 2022-11-06 05:50 169阅读 0赞

### html简单组件（八）：公告/广告自动轮播效果实现 ###

#### 实现效果： ####

![在这里插入图片描述][20210308113718370.gif]

#### HTML代码 ####

<div class="list">
    			<ul>
    				<li class="lt">广告1..........</li>
    				<li class="lt">广告2..........</li>
    				<li class="lt">广告3..........</li>
    				<li class="lt">广告4..........</li>
    				<li class="lt">广告5..........</li>
    				<li class="lt">广告6..........</li>
    			</ul>
    		</div>

#### Jquery代码 ####

var realHigh = 0;
    			var flag = 0;
    			var value = $(".lt").length;
    			
    			function sroll() { 
    				if(flag == 0){ 
    					realHigh = realHigh - 45;
    				}else { 
    					realHigh = realHigh + 45;
    				}
    				
    				if(realHigh == (value - 1) * (-45)){ 
    					flag = 1;
    				}
    				
    				if(realHigh == 0){ 
    					flag = 0;
    				}
    				
    				var cssVal = "translate3d(0, " + realHigh + "px, 0)";
    				$(".lt").css("transform", cssVal);
    			};
    			
    			timer = setInterval(function(){ 
    				sroll();
    			}, 3000);

#### CSS代码 ####

* { 
    				margin: 0;
    				padding: 0;
    			}
    			.list{ 
    				width: 400px;
    				height: 51px;
    				border: 2px solid blue;
    				overflow: hidden;
    				position: absolute;
    				border-radius: 10px;
    				left: 10%;
    			}
    			.box{ 
    				width: 370px;
    				height: 40px;
    				background-color: #FF0000;
    				margin: 10px 15px 10px 15px;
    			}
    			.lt{ 
    				margin-left: 25px;
    				font-size: 35px;
    				list-style: none;
    				transform: translate3d(0, 0px, 0);
    				transition: all 1s ease;
    			}

[20210308113718370.gif]: /images/20221023/1ab63974bcea4e8da718e0e57786578a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，169人围观）

还没有评论，来说两句吧...

相关阅读

相关 JQ实现简单的自动轮播图效果

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

傷城~/ 2023年03月02日 07:38/ 0 赞/ 167 阅读

相关 html简单组件（八）：公告/广告自动轮播效果实现

html简单组件（八）：公告/广告自动轮播效果实现实现效果： ![在这里插入图片描述][20210308113718370.gif] HTML代码

桃扇骨/ 2022年11月06日 05:50/ 0 赞/ 170 阅读

相关 JQuery实现简单图片自动轮播效果

原理:依靠子元素位移实现图片转换效果图原理： ![20210206114348447.gif][] 效果：不带自动切换的轮播，需要点击才能轮播 ![2021020

叁歲伎倆/ 2022年10月28日 12:25/ 0 赞/ 229 阅读

相关 html网页简单实现图片轮播效果,html+css+js简单实现图片轮播效果

\\{background-color:green;\} \lunbo\{ width:600px; height:600px;position:relative;left:

ゞ浴缸里的玫瑰/ 2022年10月06日 07:49/ 0 赞/ 292 阅读

相关简单的html5实现自动轮播,原生JS实现简单的无缝自动轮播效果

最近在不断的加强巩固js。在学习jq和vue之后发现很多东西其实都是不明所以，有些底层的东西自己不懂，到头来也只是一昧的使用，一直在用别人的东西，对自己的成长帮助也不大。万

曾经终败给现在/ 2022年10月06日 03:56/ 0 赞/ 170 阅读

相关 html广告轮播+自动播放,js简单的轮播自动播放的实现

Title //获取显示的盒子 var box = document.getElementById('box'); //设置图片地址 var imgs = \['./i

旧城等待，/ 2022年10月05日 12:47/ 0 赞/ 165 阅读

相关 html简单实现自动轮播代码怎么写,html + js 简单实现轮播图

哎，刚刚看到自己昨天写的如何实现搜索框获得了两个喜欢哎，真的是开心，感谢你们的喜欢。咳咳，回归正题。今天要分享的是如何利用 html + js 实现轮播图。先来看下效果：

Myth丶恋晨/ 2022年10月05日 10:46/ 0 赞/ 187 阅读

相关 html简单实现自动轮播代码怎么写,js+html+css实现手动轮播和自动轮播

本文实例为大家分享了js+html+css实现手动轮播和自动轮播的具体代码，供大家参考，具体内容如下原理：设置图片层的总长=单张图片长度\张数；在轮播层中利用overflo

左手的ㄟ右手/ 2022年10月05日 10:46/ 0 赞/ 303 阅读

相关 Android 最简单实现广告轮播效果ConvenientBanner

以前一直写广告轮播，都是自己实现，最近看帖子的时候，看到，有一个很不错的广告轮播第三发框架，赶快学习一下。详情其实再github上也有介绍ConvenientBanner

妖狐艹你老母/ 2022年06月07日 11:56/ 0 赞/ 208 阅读

相关 js无缝轮播效果实现，自动轮播

轮播图，是网站首页中最为常见的一种图片切换特效，那么今天就来分享一篇前端开发实战当中经常使用到的实现无缝轮播图效果的文章，希望对您有所帮助，欢迎留言探讨。 1、html结构

本是古典何须时尚/ 2022年04月06日 06:13/ 0 赞/ 355 阅读