js html css 图片跑马灯效果（轮播）

今天药忘吃喽~ 2023-01-05 01:26 166阅读 0赞

# js html css 图片跑马灯效果（轮播） #

js html css 实现图片跑马灯效果（轮播），效果图如下：

![pic][]  
代码：  
html:

<div id="marquee-box" >
    	<div id="marquee-con">
    		<div id="marquee-1"></div>
    		<div id="marquee" class="d-flex justify-content-between">
    			<img src="" class="marquee-img"/>
    			<img src="" class="marquee-img"/>
    			<img src="" class="marquee-img"/>
    			<img src="" class="marquee-img"/>
    		</div>
    	</div>
    </div>

css

#marquee-box{ 
    	width:100%;
    	overflow: hidden;
    	height:232px
    }
    #marquee-con{ 
    	width:500%;
    	float:left;
    }
    #marquee,#marquee-1{ 
    	float:left;
    }
    .marquee-img{ 
    	float:left;
    	height:232px;
    	width: 186px;
    	margin-left:16px
    }

javascript

<script type="text/javascript">
    window.onload = function () { 
      var marqueeBox = document.getElementById("marquee-box");
      var marquee = document.getElementById("marquee");
      var marqueeCopy = document.getElementById("marquee-1");
    
      marqueeCopy.innerHTML = marquee.innerHTML; 
      function fun() { 
       //从右向左
        if (marqueeBox.scrollLeft >= 800) { 
          marqueeBox.scrollLeft = 0;
        } else { 
          marqueeBox.scrollLeft++;
        }
        //从左向右
        // if (marqueeBox.scrollLeft >= 0) { 
        // marqueeBox.scrollLeft = 800;
        // } else { 
        // marqueeBox.scrollLeft -- ;
        // }
      }
    
      var fun1 = setInterval(fun, 50);
    
      marqueeBox.onmouseover = function () { 
        //鼠标经过时 清除定时器 停止图片的滚动
        clearInterval(fun1);
      };
      marqueeBox.onmouseout = function () { 
        //鼠标离开后 继续滚动图片
        fun1 = setInterval(fun, 50);
      };
    };
    </script>

[pic]: /images/20221119/4dee25a825544e36b094ed737d64025c.png

发表评论取消回复

表情：

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

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

相关阅读

相关纯CSS、JS简单实现图片轮播效果

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl

旧城等待，/ 2023年01月14日 01:59/ 0 赞/ 164 阅读

相关 js html css 图片跑马灯效果（轮播）

js html css 图片跑马灯效果（轮播） js html css 实现图片跑马灯效果（轮播），效果图如下： ![pic][] 代码： html:

今天药忘吃喽~/ 2023年01月05日 01:26/ 0 赞/ 167 阅读

相关 html原生js实现图片轮播,原生JS实现图片轮播切换效果

原生JS实现图片轮播切换效果 2019-01-06 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了原生JS实现图片轮播切换效果，

比眉伴天荒/ 2022年10月06日 07:52/ 0 赞/ 339 阅读

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

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

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

相关 HTML+CSS+JQ实现图片轮播效果

焦点图广泛运用于主页的醒目位置放置广告，简单好用，加上效果也很好看。实现的效果： 5张图片每两秒轮播一次，右下角的数字随图片而变换，鼠标放在数字上图片停止，移走

灰太狼/ 2022年09月25日 02:30/ 0 赞/ 241 阅读

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

<html> <head> <style type="text/css"> \\{background-color:green;\} \lunbo\{ w

雨点打透心脏的1/2处/ 2022年05月29日 06:28/ 0 赞/ 285 阅读

相关 iOS 封装跑马灯和轮播效果

> 代码地址如下： > [http://www.demodashi.com/demo/14075.html][http_www.demodashi.com_demo_140

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

相关 js+css+html实现个性化图片轮播

js+css+html实现个性化图片轮播学习js的时候按照教程写了一点简单的图片轮播，后来又发现了很多个性化轮播方式，于是学习借鉴完成了这个波浪式的图片轮播

迷南。/ 2022年03月30日 07:24/ 0 赞/ 209 阅读

相关 css3图片轮播效果

HTML5前端广告的轮播效果第一步轮播效果图分两部分 1. css样式的设计 2. js实现图片的轮播 css样式： <style type

ゝ一世哀愁。/ 2022年02月15日 14:53/ 0 赞/ 328 阅读

相关 HTML中图片轮播效果

这是一段简单的Html网页中嵌入的图片轮回播放的js源代码，为增添Html一点效果：代码： <!doctype html> <html> <he

左手的ㄟ右手/ 2021年10月24日 00:31/ 0 赞/ 401 阅读