jq实现图片无缝滚动效果，兼容ie 7+

jq实现图片无缝滚动效果，适配PC端和移动端

废话不多说，先贴代码：

html:
<div class="wrap">
						<ul>
							<li><img src="img/p_banner1.jpg" alt="" ></li>
							<li><img src="img/p_banner2.jpg" alt="" ></li>
							<li><img src="img/p_banner3.jpg" alt="" ></li>
						</ul>
					</div>
					

jq:
$(function(){
	var oul = $('.wrap ul');
	var oulHtml = oul.html();
	oul.html(oulHtml+oulHtml)
	var timeId = null;

	var ali = $('.wrap ul li');
	var aliWidth = ali.eq(0).width();
	var aliSize = ali.size();
	var ulWidth = aliWidth*aliSize;
	oul.width(ulWidth);	//1600px
	
	//speed 为控制滚动速度值，值越大滚动越快，反之越慢
	var speed = 2;

	function slider(){

		if(speed>0){
			if(oul.css('left')=='0px'){
	 		oul.css('left',-ulWidth/2+'px');
		 	}
		 	oul.css('left','+='+speed+'px');
		}
	 }
	
	// setInterval()函数的作用是：每隔一段时间，执行该函数里的代码
	 timeId = setInterval(slider,30);

    //鼠标移入滚动停止
	$('.wrap').mouseover(function(){
		// clearInterval()函数的作用是用来清除定时器
		clearInterval(timeId);
	});
    //鼠标移出滚动继续
	$('.wrap').mouseout(function(){
		timeId = setInterval(slider,30);
	});
});

css：

//pc端:

.wrap{
	width: 100%;
	height: 420px;
	position: relative;
	overflow: hidden;
}

.wrap ul{
	overflow: hidden;
	position:absolute;
	width: 1600px;
	left: 0;
	top: 0;
	_height:1px;
}

.wrap ul li{
	float: left;
	width: 800px;
	margin-right: 150px;
}
.wrap ul li img{width: 100%;height: 100%;}

移动端：
.wrap{
	width: 100%;
	height: 160px;
	position: relative;
	overflow: hidden;
}

.wrap ul{
	overflow: hidden;
	position:absolute;
	width: 1600px;
	left: 0;
	top: 0;
	_height:1px;
}

.wrap ul li{
	float: left;
	width: 300px;
	margin-right: 60px;
}
.wrap ul li img{width: 100%;height: 100%;}

此为小编常用的一个效果，今天分享出来给大家；有不完善之处欢迎留言，小编会及时更正！！！