使用jQuery实现的图片左右来回轮播功能

一时失言乱红尘 2023-06-17 03:56 11阅读 0赞

## 使用jQuery实现的图片左右来回轮播功能 ##

第一次使用CSDN写博客，诸多不完善之处还望各位多多谅解。希望今后的日子和大家有更多的交流和发展。话不多说，进入主题。  
轮播功能有很多，我没事写了一个**左右来回轮播**的功能，鼠标进入可以暂停，移出续播，就是这样一个简单的功能。直接上代码：  
CSS部分：

<style type="text/css"> *{ 	padding: 0;margin: 0;	}
    		.out{ 
    			width: 1200px;
    			height: 200px;
    			background-color: cyan;
    			margin: 20px auto;
    			border: 2px solid green;
    			overflow: hidden;
    			position: relative;
    		}
    		.in{ 
    			width: 4800px;
    			height: 200px;
    			position: absolute;
    			display: flex;
    			left: 0; top: 0;
    		}
    		/* 其实用CSS做也行，不过难以实现左右轮回播放 */
    		@keyframes plays{ 
    			30%{  left: -1200px; }
    			60%{  left: -2400px; }
    			100%{  left: -3600px; }
    		}
    	</style>

HTML部分：

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title></title>
    	<script type="text/javascript" src="jquery-3.4.1.js"></script>
    	<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
    </head>
    <body>
    <div class="out">
    	<div class="in">
    		<img src="" alt="">
    		<img src="" alt="">
    		<img src="" alt="">
    		<img src="" alt="">
    		<img src="" alt="">
    		<img src="" alt="">
    		<img src="" alt="">
    		<img src="" alt="">
    		<img src="" alt="">
    		<img src="" alt="">
    		<img src="" alt="">
    		<img src="" alt="">
    		<img src="" alt="">
    		<img src="" alt="">
    		<img src="" alt="">
    		<img src="" alt="">
    		<img src="" alt="">
    		<img src="" alt="">
    		<img src="" alt="">
    		<img src="" alt="">
    		<img src="" alt="">
    		<img src="" alt="">
    		<img src="" alt="">
    		<img src="" alt="">
    	</div>
    </div>
    </body>
    </html>

jQuery部分：

<script>
    	$(function(){ 
    		// 代码添加图片
    		var imgs = document.getElementsByTagName('IMG')
    		for(var i=0;i<imgs.length;i++){ 
    			imgs[i].src = (i+1)+'.jpg';
    			imgs[i].width = 200;
    			imgs[i].height = 200;
    		}
    		// 定义需求变量
    		var mytimer;	// 定时器,在需要的地方关闭和开启
    		var newtime1, newtime2;	// 注意：要用Math的abs取绝对值，负值无法作为时间数值
    		var direct = 'left'	// 方向控制
    		var lefts;	// 移动距离控制
    		lefts = parseFloat($('.in').css('left'))	
    		newtime1 = Math.abs(parseInt((-3600-lefts)*(10000/3600)))	// 向左移动剩余时间
    		newtime2 = Math.abs(parseInt((lefts)*(10000/3600)))	// 向右移动剩余时间
    		// 页面载入就进行轮播
    		mytimer = setInterval(newplay, 100)
    		// 鼠标进入移出时的暂停/续播控制
    		$('.in').mouseenter(function(e){ 
    			// 鼠标进入时关闭计时器
    			clearInterval(mytimer)
    			// 暂停当前动画，注意：不要直接完成，仅仅停留在当前位置，后面获取当前位置要用
    			$('.in').stop(true)
    		}).mouseleave(function(){ 
    			// 鼠标移出，获取当前位置
    			lefts = parseFloat($('.in').css('left'))
    			// 改变向左和向右的时间，因为在这里是不知道向左还是向右移动的
    			newtime1 = Math.abs(parseInt((-3600-lefts)*(10000/3600)))
    			newtime2 = Math.abs(parseInt((lefts)*(10000/3600)))
    			// 重新开始计时器
    			mytimer = setInterval(newplay, 100)
    		})
    		// 移动处理函数
    		function newplay(){ 
    			// 向左
    			if(direct=='left'){ 
    				$('.in').animate({ left: '-3600px'}, newtime1, 'linear', function(){ 
    					// 记得在当前动画完成后，改变方向
    					direct = 'right';
    				}).animate({  left: '0px'}, 10000, 'linear', function(){ 
    					direct = 'left';
    				})
    				// 1.由于计时器的循环套用，时间newttime1不会改变，需要关闭当前计时器
    				clearInterval(mytimer)
    				// 2.然后改变时间的值，使时间更新
    				newtime1 = 10000
    				// 3.再次开启计时器
    				mytimer = setInterval(newplay, 100)
    			}else if(direct=='right'){ 	// 向右
    				$('.in').animate({ left: '0px'}, newtime2, 'linear', function(){ 
    					direct = 'left'
    				}).animate({  left: -3600+'px'}, 10000, 'linear', function(){ 
    					direct = 'right'
    				})
    				// 原理同向左
    				clearInterval(mytimer)
    				newtime2 = 10000
    				mytimer = setInterval(newplay, 100)
    			}
    		}
    	})
    </script>

第一次发表，就这么多。哪位大神如果有更好的方案，欢迎交流学习！最后，感谢大家的观看

发表评论取消回复

表情：

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

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

相关阅读

相关用jquery实现图片轮播

用jquery简单实现图片轮播效果，代码如下： <!DOCTYPE html> <html lang="en"> <head> <me

╰+攻爆jí腚メ/ 2023年10月09日 11:01/ 0 赞/ 84 阅读

相关 JQuery，JS实现图片轮播

JQuery实现图片轮播 JS代码： <script> var imgCount = 5;//定义图片数量 var index = 1; v

妖狐艹你老母/ 2023年06月30日 02:59/ 0 赞/ 11 阅读

相关使用jQuery实现的图片左右来回轮播功能

使用jQuery实现的图片左右来回轮播功能第一次使用CSDN写博客，诸多不完善之处还望各位多多谅解。希望今后的日子和大家有更多的交流和发展。话不多说，进入主题。轮

一时失言乱红尘/ 2023年06月17日 03:56/ 0 赞/ 12 阅读

相关 jquery实现图片自动轮播

这是自己以前实现的功能，在此和大家一起分享，以后多写博客咯，方便与大家共享知识，也为了自己可以更好的记忆。源代码： <!DOCTYPE html PUB

你的名字/ 2022年08月21日 03:15/ 0 赞/ 285 阅读

相关 jQuery 实现图片轮播

自从学习jQuery之后，简直怀疑人生了。因为，用JavaScript原生代码实现一个效果可能得用几十行代码甚至更多，而用jQuery简单的几行就轻松搞

忘是亡心i/ 2022年07月13日 11:07/ 0 赞/ 374 阅读

相关 js实现图片左右轮播（一）

js掌握的不是很熟练，但是经常会碰到页面有轮播图，所以这里就记录一下每次自己遇到的轮播效果。 ![20170619171107199][] 首先是html ![20

喜欢ヅ旅行/ 2022年06月14日 11:39/ 0 赞/ 219 阅读

相关用jquery实现图片轮播

{ margin: 0; padding: 0; } ul{ list-style:

谁践踏了优雅/ 2022年06月02日 12:21/ 0 赞/ 275 阅读

相关 jQuery实现图片定时轮播

参考出处：http://www.jb51.net/article/76153.htm <!DOCTYPE html> <html> <head>

骑猪看日落/ 2022年05月29日 07:47/ 0 赞/ 287 阅读

相关 JQuery实现简单图片轮播

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

系统管理员/ 2022年05月23日 05:13/ 0 赞/ 310 阅读

相关 jquery 实现图片轮播

html源码： <div class="middle_right"> <div id="lunbobox"> <div id=

水深无声/ 2021年11月23日 11:26/ 0 赞/ 454 阅读