图片不间断滚动效果

<!doctype html>

<html>

 	<head>

 		<meta charset="utf-8">

		<meta name="description" content="" />

		<title>图片不间断滚动效果(兼容火狐和IE) iygh.top收集</title>

		<style type="text/css">

			#colee img,#colee_bottom img,#colee_left img,#colee_right img{

				width:500px;height:253px;

			}

		</style>

	</head>

 

	<body>

		<!--下面是向上滚动代码-->

		<a href="<#ZC_BLOG_HOST#>">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net,站长js特效。

		<hr>

		

		向上滚动代码结束

		<div id="colee" style="overflow:hidden;width:500px;height:253px;margin-bottom: 50px;">

			<div id="colee1">

				<img src="http://seopic.699pic.com/photo/50047/8124.jpg_wh1200.jpg" onclick="javascript:window.open(this.src);" style="cursor:pointer;" />

 

				<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535965702595&di=92678036266b71f63028f88b85270422&imgtype=0&src=http%3A%2F%2Fwww.water8848.com%2Ffile%2Fupload%2F201608%2F17%2F09-15-38-99-4361.jpg"  onclick="javascript:window.open(this.src);" style="cursor:pointer;" />

 

				<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535965740283&di=b31f6c937eb117f124aa3f459c8d03ab&imgtype=0&src=http%3A%2F%2Fg.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F0dd7912397dda1443b5c9090bfb7d0a20cf486bf.jpg"  onclick="javascript:window.open(this.src);" style="cursor:pointer;" />

 

				<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535965740283&di=3b411b9075c69123159662b994a8e380&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F728da9773912b31b549fe00b8b18367adab4e125.jpg"  onclick="javascript:window.open(this.src);" style="cursor:pointer;" />

 

				<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535965740282&di=406f45d77c815804daddd76737ff9f7a&imgtype=0&src=http%3A%2F%2Fg.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F7af40ad162d9f2d359b91acca4ec8a136327cc6c.jpg"  onclick="javascript:window.open(this.src);" style="cursor:pointer;" />

 

				<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535965740282&di=c1fe20fe5e098cc00eccbd1ff345469e&imgtype=0&src=http%3A%2F%2Fa.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F0dd7912397dda1449dd17697bfb7d0a20cf4863e.jpg"  onclick="javascript:window.open(this.src);" style="cursor:pointer;" />

 

				<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535965760243&di=6daa632a49d5ee2811c10be9143beeb0&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F8d5494eef01f3a2966bddeeb9425bc315c607c99.jpg"  onclick="javascript:window.open(this.src);" style="cursor:pointer;" />

 

				<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535965760243&di=4b21abf82b810ad14b4bd9a8b0198d99&imgtype=0&src=http%3A%2F%2Fg.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F79f0f736afc37931a41d8d0ce6c4b74543a91199.jpg"  onclick="javascript:window.open(this.src);" style="cursor:pointer;" />

 

				<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535965760242&di=4dec12789a8fe2368431c88d1572a1ad&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F7c1ed21b0ef41bd5268ee0d15cda81cb39db3d31.jpg"  onclick="javascript:window.open(this.src);" style="cursor:pointer;" />

 

			</div>

			<div id="colee2"></div>

		</div>

		<script>

			var speed = 30;

			var colee2 = document.getElementById("colee2");

			var colee1 = document.getElementById("colee1");

			var colee = document.getElementById("colee");

			colee2.innerHTML = colee1.innerHTML; //克隆colee1为colee2

			function Marquee1() {

				//当滚动至colee1与colee2交界时

				if(colee2.offsetTop - colee.scrollTop <= 0) {

					colee.scrollTop -= colee1.offsetHeight; //colee跳到最顶端

				} else {

					colee.scrollTop++

				}

			}

			var MyMar1 = setInterval(Marquee1, speed) //设置定时器

			//鼠标移上时清除定时器达到滚动停止的目的

			colee.onmouseover = function() { clearInterval(MyMar1) }

			//鼠标移开时重设定时器

			colee.onmouseout = function() { MyMar1 = setInterval(Marquee1, speed) }

		</script>

		<!--向上滚动代码结束-->

 

		<!--下面是向下滚动代码-->

		向下滚动代码

		<div id="colee_bottom" style="overflow:hidden;width:500px;height:253px;">

			<div id="colee_bottom1">

				<img src="http://seopic.699pic.com/photo/50047/8124.jpg_wh1200.jpg"  onclick="javascript:window.open(this.src);" style="cursor:pointer;" />

 

				<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535965702595&di=92678036266b71f63028f88b85270422&imgtype=0&src=http%3A%2F%2Fwww.water8848.com%2Ffile%2Fupload%2F201608%2F17%2F09-15-38-99-4361.jpg"  onclick="javascript:window.open(this.src);" style="cursor:pointer;" />

 

				<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535965740283&di=b31f6c937eb117f124aa3f459c8d03ab&imgtype=0&src=http%3A%2F%2Fg.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F0dd7912397dda1443b5c9090bfb7d0a20cf486bf.jpg"  onclick="javascript:window.open(this.src);" style="cursor:pointer;" />

 

				<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535965740283&di=3b411b9075c69123159662b994a8e380&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F728da9773912b31b549fe00b8b18367adab4e125.jpg"  onclick="javascript:window.open(this.src);" style="cursor:pointer;" />

 

				<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535965740282&di=406f45d77c815804daddd76737ff9f7a&imgtype=0&src=http%3A%2F%2Fg.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F7af40ad162d9f2d359b91acca4ec8a136327cc6c.jpg"  onclick="javascript:window.open(this.src);" style="cursor:pointer;" />

 

				<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535965740282&di=c1fe20fe5e098cc00eccbd1ff345469e&imgtype=0&src=http%3A%2F%2Fa.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F0dd7912397dda1449dd17697bfb7d0a20cf4863e.jpg"  onclick="javascript:window.open(this.src);" style="cursor:pointer;" />

 

				<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535965760243&di=6daa632a49d5ee2811c10be9143beeb0&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F8d5494eef01f3a2966bddeeb9425bc315c607c99.jpg"  onclick="javascript:window.open(this.src);" style="cursor:pointer;" />

 

				<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535965760243&di=4b21abf82b810ad14b4bd9a8b0198d99&imgtype=0&src=http%3A%2F%2Fg.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F79f0f736afc37931a41d8d0ce6c4b74543a91199.jpg"  onclick="javascript:window.open(this.src);" style="cursor:pointer;" />

 

				<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1535965760242&di=4dec12789a8fe2368431c88d1572a1ad&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F7c1ed21b0ef41bd5268ee0d15cda81cb39db3d31.jpg"  onclick="javascript:window.open(this.src);" style="cursor:pointer;" />

 

			</div>

			<div id="colee_bottom2"></div>

		</div>

		<script>

			var speed = 30

			var colee_bottom2 = document.getElementById("colee_bottom2");

			var colee_bottom1 = document.getElementById("colee_bottom1");

			var colee_bottom = document.getElementById("colee_bottom");

			colee_bottom2.innerHTML = colee_bottom1.innerHTML

			colee_bottom.scrollTop = colee_bottom.scrollHeight

 

			function Marquee2() {

				if(colee_bottom1.offsetTop - colee_bottom.scrollTop >= 0)

					colee_bottom.scrollTop += colee_bottom2.offsetHeight

				else {

					colee_bottom.scrollTop--

				}

			} 

			var MyMar2 = setInterval(Marquee2, speed)

			colee_bottom.onmouseover = function() { clearInterval(MyMar2) }

			colee_bottom.onmouseout = function() { MyMar2 = setInterval(Marquee2, speed) }

		</script>

		<!--向下滚动代码结束-->

 

		<!--下面是向左滚动代码-->

		向左滚动代码

		<div id="colee_left" style="overflow:hidden;width:500px;height:253px;">

			<table cellpadding="0" cellspacing="0" border="0">

				<tr>

					<td id="colee_left1" valign="top" align="center">

						<table cellpadding="2" cellspacing="0" border="0">

							<tr align="center">

								<td>

									<img src="http://imgsrc.baidu.com/imgad/pic/item/ac6eddc451da81cbf7a8b6e35966d01609243155.jpg"  onclick="javascript:window.open(this.src);" style="cursor:pointer;" />

								</td>

								<td>

									<img src="http://img4.imgtn.bdimg.com/it/u=3248801285,1182515199&fm=26&gp=0.jpg"  onclick="javascript:window.open(this.src);" style="cursor:pointer;" />

								</td>

 

								<td>

									<img src="http://imgsrc.baidu.com/imgad/pic/item/b17eca8065380cd7ce6868c0aa44ad34598281ad.jpg"  onclick="javascript:window.open(this.src);" style="cursor:pointer;" />

								</td>

								<td>

									<img src="http://seopic.699pic.com/photo/50047/8124.jpg_wh1200.jpg"  onclick="javascript:window.open(this.src);" style="cursor:pointer;" />

								</td>

								<td>

									<img src="http://imgsrc.baidu.com/image/c0%3Dpixel_huitu%2C0%2C0%2C294%2C40/sign=ed78b181df3f8794c7f2406ebb636b98/72f082025aafa40f34c69ce4a064034f78f01982.jpg"  onclick="javascript:window.open(this.src);" style="cursor:pointer;" />

								</td>

								<td>

									<img src="http://imgsrc.baidu.com/image/c0%3Dpixel_huitu%2C0%2C0%2C294%2C40/sign=92648692083b5bb5aada28be5fabb055/77094b36acaf2edd199cced0861001e93901939e.jpg"  onclick="javascript:window.open(this.src);" style="cursor:pointer;" />

								</td>

								<td>

									<img src="http://imgsrc.baidu.com/image/c0%3Dpixel_huitu%2C0%2C0%2C294%2C40/sign=cc28892db399a9012f38537674ed6f17/472309f790529822a1166cfadcca7bcb0a46d4e6.jpg"  onclick="javascript:window.open(this.src);" style="cursor:pointer;" />

								</td>

							</tr>

						</table>

					</td>

					<td id="colee_left2" valign="top"></td>

				</tr>

			</table>

		</div>

		<script>

			//使用div时,请保证colee_left2与colee_left1是在同一行上.

			var speed = 30 //速度数值越大速度越慢

			var colee_left2 = document.getElementById("colee_left2");

			var colee_left1 = document.getElementById("colee_left1");

			var colee_left = document.getElementById("colee_left");

			colee_left2.innerHTML = colee_left1.innerHTML

 

			function Marquee3() {

				if(colee_left2.offsetWidth - colee_left.scrollLeft <= 0) //offsetWidth 是对象的可见宽度

					colee_left.scrollLeft -= colee_left1.offsetWidth //scrollWidth 是对象的实际内容的宽,不包边线宽度

				else {

					colee_left.scrollLeft++;

				}

			} 

			var MyMar3 = setInterval(Marquee3, speed)

			colee_left.onmouseover = function() { clearInterval(MyMar3) }

			colee_left.onmouseout = function() { MyMar3 = setInterval(Marquee3, speed) }

		</script>

		<!--向左滚动代码结束-->

 

		<!--下面是向右滚动代码-->

		向右滚动代码

		<div id="colee_right" style="overflow:hidden;width:500px;height:253px;">

			<table cellpadding="0" cellspacing="0" border="0">

				<tr>

					<td id="colee_right1" valign="top" align="center">

						<table cellpadding="2" cellspacing="0" border="0">

							<tr align="center">

								<td>

									<img src="http://imgsrc.baidu.com/imgad/pic/item/64380cd7912397ddc07c52295282b2b7d0a28792.jpg"  onclick="javascript:window.open(this.src);" style="cursor:pointer;" />

								</td>

								<td>

									<img src="http://img4.imgtn.bdimg.com/it/u=3248801285,1182515199&fm=26&gp=0.jpg"  onclick="javascript:window.open(this.src);" style="cursor:pointer;" />

								</td>

 

								<td>

									<img src="http://imgsrc.baidu.com/imgad/pic/item/b17eca8065380cd7ce6868c0aa44ad34598281ad.jpg"  onclick="javascript:window.open(this.src);" style="cursor:pointer;" />

								</td>

								<td>

									<img src="http://imgsrc.baidu.com/imgad/pic/item/b3b7d0a20cf431ada2d488144036acaf2edd989d.jpg"  onclick="javascript:window.open(this.src);" style="cursor:pointer;" />

								</td>

								<td>

									<img src="http://imgsrc.baidu.com/image/c0%3Dpixel_huitu%2C0%2C0%2C294%2C40/sign=ed78b181df3f8794c7f2406ebb636b98/72f082025aafa40f34c69ce4a064034f78f01982.jpg"  onclick="javascript:window.open(this.src);" style="cursor:pointer;" />

								</td>

							</tr>

						</table>

					</td>

					<td id="colee_right2" valign="top"></td>

				</tr>

			</table>

		</div>

		<script>

			var speed = 30 //速度数值越大速度越慢

			var colee_right2 = document.getElementById("colee_right2");

			var colee_right1 = document.getElementById("colee_right1");

			var colee_right = document.getElementById("colee_right");

			colee_right2.innerHTML = colee_right1.innerHTML

 

			function Marquee4() {

				if(colee_right.scrollLeft <= 0)

					colee_right.scrollLeft += colee_right2.offsetWidth

				else {

					colee_right.scrollLeft--;

				}

			}

			var MyMar4 = setInterval(Marquee4, speed)

			colee_right.onmouseover = function() { clearInterval(MyMar4) }

			colee_right.onmouseout = function() { MyMar4 = setInterval(Marquee4, speed) }

		</script>

		<!--向右滚动代码结束-->

	</body>

 

</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值