jquery实现图片滚动展示

最新推荐文章于 2018-08-23 16:21:00 发布

视力

最新推荐文章于 2018-08-23 16:21:00 发布

阅读量1.5k

点赞数

文章标签： jquery实现图片向左滚动可以随时停随时动

本文链接：https://blog.csdn.net/PentaKillwusha/article/details/80049566

版权

Web黑科技专栏收录该内容

1 篇文章 0 订阅

订阅专栏

所需jquery.timers-1.2.js插件地址https://download.csdn.net/download/pentakillwusha/10483261

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>app2</title>
		<style type="text/css">
			.tu{
				float: left;
				position: relative;
				width: 350px;
				font-size: 0px;
			}
			#box{
				border: 2px solid red;
				width:350px;
				overflow:hidden;
			}
		</style>
		<script src="../../../../jquery/jquery-2.1.0.js"></script>
		<script src="../../../../jquery/jquery.timers-1.2.js"></script>
		<script>
			var flag=true;
			function start(){
				$(this).everyTime("4s",function () {
                    if (flag) {
						$("#tu1").animate({right:"350px"},
		    		    function() {
		    		    	$("#tu1").css("right","-350px");//图片大小350px
		    		    });
		    		    $("#tu2").animate({right:"350px"});
						flag=false;
					} else{
						$("#tu1").animate({right:"0px"});
		    		    $("#tu2").animate({right:"700px"},
		    		    function () {
		    		    	$("#tu2").css("right","0px");
		    		    });
						flag=true;
					}
				})
	        }
			
			function stop(){
				$(this).stopTime();
	        }
            $(document).ready(function(){
                start();
            });
		</script>
	</head>

	<body>
		<div id="box">
			<div style="width:700px;">
				<div id="tu1" class="tu">
					<img src="img/1.png" οnmοuseοver="stop()" οnmοuseleave="start()"/>
				</div>
				<div id="tu2" class="tu">
					<img src="img/2.png" οnmοuseοver="stop()" οnmοuseleave="start()"/>
				</div>
			</div>
		</div>
	</body>
</html>

视力

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery实现图片滚动展示

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;app2&lt;/title&gt; &lt;style type="text/css"&gt; .tu{ float: left; posit
复制链接

扫一扫

专栏目录