图片无缝滚动兼容ie6

最新推荐文章于 2021-05-12 22:22:07 发布

Bling_Bling_

最新推荐文章于 2021-05-12 22:22:07 发布

阅读量528

点赞数

分类专栏： ie6兼容性问题

本文链接：https://blog.csdn.net/Bling_Bling_/article/details/51752463

版权

ie6兼容性问题专栏收录该内容

11 篇文章 0 订阅

订阅专栏

图片无缝滚动，兼容ie6，以下例子，自己放图片就可以实现：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery图片左右连续滚动</title>
<style type="text/css"> 
*{ margin:0; padding:0;}
body { font:12px/1.8 Arial; color:#666;}
h1.tit-h1 { font-size:38px; text-align:center; margin:30px 0 15px; color:#f60;}
.go-back{ text-align:center; border-top:1px dashed #ccc; padding:10px; margin-top:20px; font-size:40px;}
.wrap{border:1px dashed #ccc; background:#f8f8f8; padding:20px;}

#slide{overflow:hidden;width:900px;margin:100px auto;}
ul{list-style:none;}
li{float:left;display:inline;}
.slideul1{width:3999px;}
</style> 
<script type="text/javascript" src="http://www.wufangbo.com/demo/jquery-1.4.4.min.js"></script>
</head>
<body>
<div class="wrap">

<div id="slide"> 
	<ul class="slideul1"> 
		<li class="slideli1"> 
      		<ul class="slideul2"> 
				<li><img src="1.jpg"/></li> 
				<li><img src="2.jpg"/></li> 
				<li><img src="3.jpg"/></li> 
				<li><img src="4.jpg"/></li> 
				<li><img src="5.jpg"/></li> 
			</ul>
		</li> 
		<li class="slideli2"></li> 
	</ul> 
</div> 
<script type="text/javascript">
var _speed=30;
var _slide = $("#slide");
var _slideli1 = $(".slideli1");
var _slideli2 = $(".slideli2");
_slideli2.html(_slideli1.html());
function Marquee(){
	if(_slide.scrollLeft() >= _slideli1.width())
		_slide.scrollLeft(0);
	else{
		_slide.scrollLeft(_slide.scrollLeft()+1);
	}
}
$(function(){
	//两秒后调用
	var sliding=setInterval(Marquee,_speed)
	_slide.hover(function() {
		//鼠标移动DIV上停止
		clearInterval(sliding);
	},function(){
		//离开继续调用
		sliding=setInterval(Marquee,_speed);
	});
});
</script>

    
</div>


</body> 
</html>

Bling_Bling_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片无缝滚动兼容ie6

图片无缝滚动，兼容ie6，以下例子，自己放图片就可以实现：jquery图片左右连续滚动 *{ margin:0; padding:0;}body { font:12px/1.8 Arial; color:#666;}h1.tit-h1 { font-size:38px; text-align:center; margin:30px 0 15px; color:#f60;
复制链接

扫一扫