jquery实现图片的跑马灯效果
2024-04-16 19:28:37
样式一（无限循环，消耗内存）：
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title></title><script src="jquery-3.2.1.min.js"></script><style>.ExpertList {margin: 0 auto;margin-top: 50px;overflow: hidden;position: relative;text-align: center;width: 1200px;}.ExpertList ul {overflow: auto;}.ExpertList ul li {float: left;box-sizing: border-box;text-align: center;display: inline-block;width: 200px;list-style: none;}.ExpertList ul li img {height: 140px;}.ExpertList ul li p {font-size: 14px;color: #000;line-height: 22px;}</style></head><body><div class="ExpertList"><ul><li><img src="img2.png" alt="Michael Littlewood" title="Michael Littlewood" /><p>Michael Littlewood</p><p>标题</p></li><li><img src="img2.png" alt="Michael Littlewood" title="Michael Littlewood" /><p>Michael Littlewood</p><p>标题2</p></li><li><img src="img2.png" alt="Michael Littlewood" title="Michael Littlewood" /><p>Michael Littlewood</p><p>标题3</p></li><li><img src="img2.png" alt="Michael Littlewood" title="Michael Littlewood" /><p>Michael Littlewood</p><p>标题4</p></li><li><img src="img2.png" alt="Michael Littlewood" title="Michael Littlewood" /><p>Michael Littlewood</p><p>标题5</p></li><li><img src="img2.png" alt="Michael Littlewood" title="Michael Littlewood" /><p>Michael Littlewood</p><p>标题6</p></li><li><img src="img2.png" alt="Michael Littlewood" title="Michael Littlewood" /><p>Michael Littlewood</p><p>标题7</p></li></ul><!--左右白色渐变蒙版--><div class="ExpertLeft"></div><div class="Expertright"></div></div><script>//获取窗口的宽度var width_window = $(window).width();var liLengthu, BoxWidth, ExpertHtml, ExpertList;var a = 1,b = 1;$(function() {//轮播Expert();});function Expert() {//获取li的个数liLengthu = $(".ExpertList ul li").length;//获取轮播盒子的宽度BoxWidth = $(".ExpertList").outerWidth();//轮播的内容ExpertHtml = $(".ExpertList ul").html();//如果li的个数不够6个 就循环添加if (liLengthu < 6) {for (var i = liLengthu; i < 6; i++) {$(".ExpertList ul").append(ExpertHtml);}} else {}ExpertHtml = $(".ExpertList ul").html();$(".ExpertList ul").append(ExpertHtml);liLengthu = $(".ExpertList ul li").length;$(".ExpertList ul").css({"width": liLengthu * 200 + "px"});ExpertList = setInterval(ExpertBanner, 20);}//轮播function ExpertBanner() {a++;b++;if (b >= BoxWidth - 200) {b = 1;$(".ExpertList ul").append(ExpertHtml);liLengthu = $(".ExpertList ul li").length;$(".ExpertList ul").css({"width": liLengthu * 200 + "px"});} else {}$(".ExpertList ul").css({"margin-left": "-" + a + "px"});}//鼠标hover时 暂停轮播$(document).on("mouseover", ".ExpertList", function() {clearInterval(ExpertList);});//鼠标离开时 继续轮播$(document).on("mouseout", ".ExpertList", function() {ExpertList = setInterval(ExpertBanner, 20);});</script></body>
</html>
样式二（也是无线循环但是设置了最值当它到2000px的时候归零）：
<!DOCTYPE html>
<html>
<head><title>无缝跑马灯图片轮播</title><script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><style type="text/css">*{margin:0;padding:0;}li{list-style: none;}img{border:0;outline: none;}#warp{width:1200px;height: 250px;margin:0 auto;position:relative;overflow: hidden;}.content{width: 1000%;height: 250px;position: absolute;left:0;top:0;}.content li{width:200px;float: left;margin: 0 15px;}</style>
</head>
<body>
<div id="warp"><ul class="content"><li><a href="#"><img src="img.jpg"></a></li><li><a href="#"><img src="img.jpg"></a></li><li><a href="#"><img src="img.jpg"></a></li><li><a href="#"><img src="img.jpg"></a></li><li><a href="#"><img src="img.jpg"></a></li><li><a href="#"><img src="img2.png"></a></li><li><a href="#"><img src="img2.png"></a></li><li><a href="#"><img src="img2.png"></a></li><li><a href="#"><img src="img2.png"></a></li><li><a href="#"><img src="img2.png"></a></li></ul>
</div>
</body>
<script type="text/javascript">$(function(){var timer;var number = 0;var cont = document.getElementsByClassName('content')[0];cont.innerHTML += cont.innerHTML;function AutoPlay(){clearTimeout(timer);timer = setInterval(function(){number --;if(number == -2000){number = 0;}$('.content').css('left',number);},10);}AutoPlay();// 鼠标滑入暂停$('.content li').mouseenter(function(){clearTimeout(timer);}).mouseleave(function(){AutoPlay();})})
</script>
</html>应用实例：
<style>*{margin:0;padding:0;}li{list-style: none;}.mult{background-position: center top;background-repeat: repeat-x;background-attachment: scroll;}.mult-demo12{position:relative;overflow: hidden;height: 250px;}.mult-demo12 .content{height: 250px;position: absolute;left:0;top:0;}.mult-demo12 .content li{width:300px;float: left;margin: 0 5px;}.mult-demo12 .content li img{width: 100%;}.mult .place_holder{height: 1px;}
</style>
<div class="layout mult"><div class="container mult-demo12"><ul class="content"><li class="dt12-li"><a href="<?php if($moduleset['link'] == 0){ echo $v['link']; }else{?>javascript:void(0);<?php }?>" class="clearfix"><img src="<?php echo $v['pic'];?>"></a></li></ul></div><div class="container place_holder"></div>
</div>
<script>$(function(){var timer;var number = 0;var cont = document.getElementsByClassName('content')[0];cont.innerHTML += cont.innerHTML;function AutoPlay(){if($(window).width()>768 ){var mult_h=$(".mult").find(".place_holder").width()*0.25;//一排显示四个图片}else{var mult_h=$(".mult").find(".place_holder").width();}$(".dt12-li").css("width",mult_h);let num = $(".dt12-li").length*(mult_h+10);$(".mult-demo12").find(".content").css("width",num);var mult_h2=$(".mult").find(".place_holder").width();var num2=num-mult_h2;clearTimeout(timer);timer = setInterval(function(){number --;if(number == -num2){number = 0;}$('.content').css('left',number);},30);}AutoPlay();// 鼠标滑入暂停$('.content li').mouseenter(function(){clearTimeout(timer);}).mouseleave(function(){AutoPlay();})})
</script>jquery实现图片的跑马灯效果相关推荐
- vue 手写图片左右跑马灯 效果
效果图与代码贴上: 1.html部分 <template><div class="box"><Icon class="icons1 icon ...
- js html css 图片跑马灯效果（轮播）
js html css 图片跑马灯效果(轮播) js html css 实现图片跑马灯效果(轮播),效果图如下: 代码: html: <div id="marquee-box" ...
- 原生js的图片.文字.小框的跑马灯效果及弹幕效果
笔者在最近的一个点上项目中使用原生js遇到一个跑马灯效果,需要图片循环播放,可以根据图片的多少改变一定的样式,从而实现跑马灯效果.于是把图片的,文字的和另一种小框的都整合了一下,顺便基于小框的跑马灯增 ...
- android 图片跑马灯动画,【Android自定义View】- 文本跑马灯效果
简介 有些时候,文字过长,或者有多条需要展示的文本时,我们需要将文本进行左右滚动,多条文本时,还得上下滚动以实现展示不同的文本内容.这时候就需要我们自定义view来实现文本跑马灯效果了. 效果图 jj ...
- web展现mysql_web页面实现LED跑马灯效果(涉及web前端、原生JS、PHP、mysql)
本帖最后由 yoin 于 2019-11-21 16:24 编辑 产品需求: LED跑马灯页面展示内容(班级电脑展示) setLED更改内容(老师电脑更改内容) LED页面及时更新内容设计思路: 最初 ...
- 自定义ListView实现任意View跑马灯效果
自定义ListView实现任意View跑马灯效果 标签(空格分隔): 开源项目 看图 话不多说,先来看下大图效果吧,这里的GIF录制有点渣,不过真实的跑出来的效果还是挺不错的. 前言 最近项目中会加入 ...
- 原生js实现跑马灯效果，鼠标放下可以停止跑动
js原生代码跑马灯效果纯js代码如下: 1.首先html的内容(里面图片自己可以换,li里面也可以填文字) <div> <ul><li>呵呵呵呵呵3</li& ...
- TextView属性大全及跑马灯效果
TextView控件常见属性: android:autoLink :设置是否当文本为URL链接/email/电话号码/map时,文本显示为可点击的链接.可选值(none/web /email/phon ...
- 分别用Js和vue实现跑马灯效果
写在前面: 我是「扬帆向海」,这个昵称来源于我的名字以及女朋友的名字.我热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的. 这博客是对自己学习的一点点总结及记录,如果您对 Java.算法 感兴 ...
最新文章
- Fiddler抓包工具总结（转）
- (续)我对09毕业生说两句
- HashSet源码解析
- Apache Ranger、业务背景、现状与需求、大数据安全组件介绍与对别、系统架构及实践、ranger admin、UserSync、plugin、权限模型、权限实现等
- 【动态规划】机器分配 （ssl 1639）
- 无代码开发究竟是不是伪需求？
- 七年也扶不起的苹果 Siri
- 黄聪：移动应用抓包调试利器Charles
- 如何将屏幕截图保存到桌面以外的自定义文件夹？
- 【数据融合】基于DS证据理论实现数据融合附matlab代码
- 2016版excel_想要下班直接打卡，这些Excel技巧可以帮到你
- 2009年的MACBOOK苹果电脑重装MAC OS 10.8.5系统
- [debug][RDP开源项目]rdpwrapper中出现not listening的解决方案
- 使用PHPExcel生成Excel文件和图表
- oracle和mybatis自增,在Springboot项目中使用MybatisPlus和Oracle实现主键ID的自增
- Word高版本打开低版本显示兼容模式
- 数学语言缩写 c连续d可导,数学分析(1)复习题
- 让BIOS告诉您电脑哪不舒服
- 推挽电路原理“上P下N”及“上N下P”的区别
- android 实现微信的开门效果