jQuery无缝连接

一时失言乱红尘 2022-02-02 19:37 195阅读 0赞

**html代码**

<body>
    		<ul class="mscroll-ul">
    			<li class="item fore1">
    				<a>
    					<img width="250" height="164" src="img/1.png" class="loading-style2">
    				</a>
    			</li>
    			<li class="item fore2">
    				<a>
    					<img width="250" height="164" src="img/2.png" class="loading-style2">
    				</a>
    			</li>
    			<li class="item fore3">
    				<a>
    					<img width="250" height="164" src="img/3.png" class="loading-style2">
    				</a>
    			</li>
    			<li class="item fore4">
    				<a>
    					<img width="250" height="164" src="img/4.png" class="loading-style2">
    				</a>
    			</li>
    			<li class="item fore5">
    				<a>
    					<img width="250" height="164" src="img/5.png" class="loading-style2">
    				</a>
    			</li>
    			<li class="item fore6">
    				<a>
    					<img width="250" height="164" src="img/6.png" class="loading-style2">
    				</a>
    			</li>
    			<li class="item fore7">
    				<a>
    					<img width="250" height="164" src="img/7.png" class="loading-style2">
    				</a>
    			</li>
    		</ul>
    	</body>

**Css的代码**

<style type="text/css">
    		ul {
    			width: 1250px;
    			height: 200px;
    			overflow: hidden;
    			padding: 0px;
    			margin: 0px;
    		}
    		
    		li {
    			float: left;
    			list-style: none;
    			width: 250px;
    			height: 200px;
    		}
    	</style>

jQuery的代码

<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
    	<script type="text/javascript">		
    		$(function(){
    			//document 获取是页面
    			$(document).ready(function(){
    				var Ul=$('.mscroll-ul');
    				var timer;
    				new Gundong().start();
    				Ul.hover(function(){
    					clearInterval(timer);
    				}, function(){
    					new Gundong().start();
    				})
    				
    				//创建让其开始滚动的构造函数
    				function Gundong(){
    					this.start=function(){
    						if(Ul.children().length<this.maxLength){
    							Ul.append(Ul.children().clone());
    						}
    						timer=setInterval(timery,1000);
    						if(Ul.children().length<5){
    							clearInterval(timer);
    						}
    					}
    					timery=function(){
    						var img=Ul.children().eq(0);
    						var left=img.children().eq(0).width();
    						img.animate({
    							"marginLeft":(-1*left)+'px'
    						},1000,function(){
    							$(this).css("margin-left","auto").appendTo(Ul);
    						});
    					}
    					
    				}
    			});
    		})
    	</script>

发表评论取消回复

表情：

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

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

相关阅读

相关 jQuery kxbdMarquee 无缝滚动

转：http://code.ciaoca.com/jquery/kxbdmarquee/ <marquee> 曾是 IE 下独有的一个走马灯效果的标签，其他浏览器并不兼容，于

深碍√TFBOYSˉ_/ 2022年12月30日 10:58/ 0 赞/ 147 阅读

相关 JQuery无缝轮播图

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta nam

淩亂°似流年/ 2022年05月31日 09:51/ 0 赞/ 320 阅读

相关 jQuery实现的无缝轮播图

其实只要原生js学好了，能够实现轮播图无缝切换，再用jQuery写，感觉简单多了，嗯、为了熟悉jQuery的用法，还是动手把它实现了，废话不多说，看代码吧，实现的过程都注释在代

淩亂°似流年/ 2022年05月26日 00:53/ 0 赞/ 264 阅读

相关 jquery实现向上无缝轮播文案

此处记录一下，方便以后用 1.html样式自己布局就可以了 <div class="myscroll"> <ul> <

深碍√TFBOYSˉ_/ 2022年05月12日 01:16/ 0 赞/ 236 阅读

相关基于jquery的无缝循环新闻列表

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

港控/mmm°/ 2022年04月13日 14:11/ 0 赞/ 208 阅读

相关 js 无缝连接的轮播图

> <!DOCTYPE html> > <html lang="zh-cn"> > <head> > <meta charset="UTF-8"> >

柔光的暖阳◎/ 2022年03月11日 08:15/ 0 赞/ 298 阅读

相关 css3动画实现无缝连接

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

Love The Way You Lie/ 2022年02月22日 04:29/ 0 赞/ 412 阅读

相关 jQuery无缝连接

html代码 <body> <ul class="mscroll-ul"> <li class="item fore1">

一时失言乱红尘/ 2022年02月02日 19:37/ 0 赞/ 196 阅读

相关 liMarquee – jQuery无缝滚动插件

简介 `liMarquee` 是一款基于 `jQuery` 的无缝滚动插件，类似于 `HTML` 的 `marquee` 标签，但比 `marquee` 更强大。它可以应

女爷i/ 2021年06月26日 16:06/ 0 赞/ 1238 阅读

相关 Jquery+css实现图片无缝滚动轮播

Today，在XX学院的教学视频中，偶尔看到了Jquery+css实现图片无缝滚动轮播视频教程，虽然以前已写过类似的，但是我感觉他学的比较精简。为了方便以后做项目时直接拷...

系统管理员/ 2021年01月27日 15:32/ 0 赞/ 798 阅读