经验分享程序开发文档资料数据资源其它资源

房产网循环滚动图片效果特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 房产网循环滚动图片效果特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

房产网循环滚动图片效果特效代码

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,{keyword},JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为{title}，属于站长常用代码" />
<title>{title}</title>
<link href="css/index.css" type=text/css rel=stylesheet>
<script type="text/javascript" src="js/action.js"></script>
</head>
<body>
<!-- 代码 开始 -->
<div id="dHomePageCarousel" style="padding-left:15px">
	<div id=dLocalHomesCarousel>
		<img id="imgSmallLeft" class="imgBorder"  style="height:50px; width:70px; left:10px; bottom:5px;" onclick="clearInterval(autoplay);moveD('l');"/>
		<img id="imgMiddleLeft" class="imgBorder"  style="height:75px; width:100px; left:110px; bottom:5px;" onclick="clearInterval(autoplay);move('l');"/>
		<img id="imgBig" class="imgBorder"  style="height:105px;	width:140px; left:240px; bottom:5px;" onclick="openNewPage();"/>
		<img id="imgMiddleRight" class="imgBorder"  style="height:75px; width:100px;	left:410px;	bottom:5px;" onclick="clearInterval(autoplay);move('r');"/>
		<img id="imgSmallRight" class="imgBorder"  style="width:70px; height:50px; left:540px; bottom:5px;" onclick="clearInterval(autoplay);moveD('r');"/>
		<img id="imgHidden" class="imgBorder"  style="width:10px; height:10px; left:-90px; bottom:5px;"/>
	</div>
	<div id=divCarouselInfo class="divCarouselInfo">
		<div class=divCarouselInfoLt>
			<a id="btnCarouselLt" class="btnCarouselLT" style="left: 10px;" onclick="clearInterval(autoplay);move('l');"></a>
			<table id=fadeSec align=center>
				<tbody>
					<tr>
						<td align=center><a id="adname" class="name" href="#"></a>&nbsp;&nbsp;&nbsp;&nbsp;售楼热线：<span id="adtel" class="tel"></span></td>
					</tr>
					<tr></tr>
					<tr></tr>
					<tr></tr>
					<tr>
						<td align=center><span id="adaddr"></span>&nbsp;&nbsp;&nbsp;&nbsp;价格：<span id="adprice" class="org"></span>&nbsp;&nbsp;&nbsp;&nbsp;开盘时间：<span id="adtime" class="org"></span></td>
					</tr>
				</tbody>
			</table>
			<a id="btnCarouselRt" class="btnCarouselRT" style="right: 10px;" onclick="clearInterval(autoplay);move('r');"></a>
		</div>
	</div>
	<script type="text/javascript">
		function AdItem(name,phone,address,Photo,price,time,url) {
			this.name = name;
			this.phone = phone;
			this.address = address;
			this.Photo = Photo;
			this.url = url;
			this.price = price;
			this.time = time;
		}
		var ad = new Array();
		ad[0] = new AdItem('远中风华园（城宝）','4006887777-770162','静安区新闸路1068号 ','images/1.jpg','80000元/平方','2010年5月','#'); 
		ad[1] = new AdItem('莱茵美墅','4006887777-770183','浦东区南六公路567弄','images/2.jpg','3300000元起','2010-04','#'); 
		ad[2] = new AdItem('临港蓝色城邦(蓝色家园)','400-666-3572','浦东区临港新城分城区泥城霞光路78弄','images/3.jpg','8000元/平方','2010年4月','#'); 
		ad[3] = new AdItem('尼德兰北岸(高桥新城3期)','4006887777-770765','浦东区溪兰路169弄','images/4.jpg','6500000元起','2010-04','#'); 
		ad[4] = new AdItem('南郊中华园（两河流域）','4006887777-770511','南汇区航头镇航鹤路1699号','images/5.jpg','19000元/平方','2010-04','#'); 
		ad[5] = new AdItem('保利湖畔阳光苑','4006887777-770455','裕民南路336弄','images/6.jpg','16000元/平方','2010-04','#'); ;
		var img = new Array();
		img[0] = document.getElementById("imgSmallLeft");
		img[1] = document.getElementById("imgMiddleLeft");
		img[2] = document.getElementById("imgBig");
		img[3] = document.getElementById("imgMiddleRight");
		img[4] = document.getElementById("imgSmallRight");
		img[5] = document.getElementById("imgHidden");
	
		var position = 0;
		for(i=0;i<img.length;i++){
			img[i].src = ad[i].Photo;
		}

		var adname = document.getElementById("adname");
		var adtel = document.getElementById("adtel");
		var adaddr = document.getElementById("adaddr");
		var adprice = document.getElementById("adprice");
		var adtime = document.getElementById("adtime");

		var cur = 2;
		adname.href = ad[2].url;
		if(navigator.userAgent.indexOf("Firefox")>0){
			adname.textContent = ad[2].name;
			adtel.textContent = ad[2].phone;
			adaddr.textContent = ad[2].address;
			adprice.textContent = ad[2].price;
			adtime.textContent = ad[2].time;
		} else {
			adname.innerText = ad[2].name;
			adtel.innerText = ad[2].phone;
			adaddr.innerText = ad[2].address;
			adprice.innerText = ad[2].price;
			adtime.innerText = ad[2].time;
		}
	</script>
</div>
<!-- 代码 结束 -->
</body>
</html>

JS代码(action.js):

function roll(direction){
	var imgLength = img.length;
	var dataLength = ad.length;
	var start = position;
	if('r' == direction){
	for(var i=0;
	i<imgLength;
	i++){
	start = start + 1;
	if(start > (dataLength-1))start = start - dataLength;
	img[i].src = ad[start].Photo;
}
position = position + 1;
	if(position > (dataLength-1))position = position - dataLength;
}
if('l' == direction){
	var a = true;
	for(var i=0;
	i<imgLength;
	i++){
	if(a){
	start = start - 1;
	if(start < 0){
	start = start + dataLength;
	a = false;
}
if(start < (dataLength-1)){
	a = false;
}
}
else{
	start = start + 1;
	if(start > (dataLength-1)){
	start = start - dataLength;
	a = true;
}
}
//alert(position + " === " + i + " === " + start);
	img[i].src = ad[start].Photo;
	if(start == (dataLength-1)){
	start = -1;
}
}
position = position - 1;
	if(position < 0)position = position + dataLength;
}
}
function right(){
	i++;
	var img0H = parseFloat(img[0].style.height);
	var img0W = parseFloat(img[0].style.width);
	var img0L = parseFloat(img[0].style.left);
	var img1H = parseFloat(img[1].style.height);
	var img1W = parseFloat(img[1].style.width);
	var img1L = parseFloat(img[1].style.left);
	var img2H = parseFloat(img[2].style.height);
	var img2W = parseFloat(img[2].style.width);
	var img2L = parseFloat(img[2].style.left);
	var img3H = parseFloat(img[3].style.height);
	var img3W = parseFloat(img[3].style.width);
	var img3L = parseFloat(img[3].style.left);
	var img4H = parseFloat(img[4].style.height);
	var img4W = parseFloat(img[4].style.width);
	var img4L = parseFloat(img[4].style.left);
	var img5H = parseFloat(img[5].style.height);
	var img5W = parseFloat(img[5].style.width);
	var img5L = parseFloat(img[5].style.left);
	//解决IE兼容性问题if(navigator.userAgent.indexOf("MSIE")>0 && i%2==0){
	img1W = img1W + 1;
	img2H = img2H + 1;
	img2L = img2L + 1;
	img3H = img3H + 1;
	img3L = img3L + 1;
	img4L = img4L + 1;
	img4W = img4W + 1;
}
img[0].style.height = (img0H - 2).toString() + "px";
	img[0].style.left = (img0L - 5).toString() + "px";
	img[0].style.width = (img0W - 3).toString() + "px";
	img[1].style.height = (img1H - 1).toString() + "px";
	img[1].style.left = (img1L - 5).toString() + "px";
	img[1].style.width = (img1W - 1.5).toString() + "px";
	img[2].style.height = (img2H - 1.5).toString() + "px";
	img[2].style.left = (img2L - 6.5).toString() + "px";
	img[2].style.width = (img2W - 2).toString() + "px";
	img[3].style.height = (img3H + 1.5).toString() + "px";
	img[3].style.left = (img3L - 8.5).toString() + "px";
	img[3].style.width = (img3W + 2).toString() + "px";
	img[4].style.height = (img4H + 1).toString() + "px";
	img[4].style.left = (img4L - 6.5).toString() + "px";
	img[4].style.width = (img4W + 1.5).toString() + "px";
	img[5].style.height = (img5H + 2).toString() + "px";
	img[5].style.left = (img5L - 5).toString() + "px";
	img[5].style.width = (img5W + 3).toString() + "px";
	//alert(img[1].style.width);
	if(i>19){
	clearInterval(hide);
	reset();
	roll('r');
	isRunning = 'false';
}
}
function left(){
	i++;
	var img0H = parseFloat(img[0].style.height);
	var img0W = parseFloat(img[0].style.width);
	var img0L = parseFloat(img[0].style.left);
	var img1H = parseFloat(img[1].style.height);
	var img1W = parseFloat(img[1].style.width);
	var img1L = parseFloat(img[1].style.left);
	var img2H = parseFloat(img[2].style.height);
	var img2W = parseFloat(img[2].style.width);
	var img2L = parseFloat(img[2].style.left);
	var img3H = parseFloat(img[3].style.height);
	var img3W = parseFloat(img[3].style.width);
	var img3L = parseFloat(img[3].style.left);
	var img4H = parseFloat(img[4].style.height);
	var img4W = parseFloat(img[4].style.width);
	var img4L = parseFloat(img[4].style.left);
	var img5H = parseFloat(img[5].style.height);
	var img5W = parseFloat(img[5].style.width);
	var img5L = parseFloat(img[5].style.left);
	//解决IE兼容性问题if(navigator.userAgent.indexOf("MSIE")>0 && i%2==0){
	img0W = img0W + 1;
	img1H = img1H + 1;
	img1L = img1L + 1;
	img2H = img2H + 1;
	img2L = img2L + 1;
	img3L = img3L + 1;
	img3W = img3W + 1;
}
img[0].style.height = (img0H + 1).toString() + "px";
	img[0].style.left = (img0L + 5).toString() + "px";
	img[0].style.width = (img0W + 1.5).toString() + "px";
	img[1].style.height = (img1H + 1.5).toString() + "px";
	img[1].style.left = (img1L + 6.5).toString() + "px";
	img[1].style.width = (img1W + 2).toString() + "px";
	img[2].style.height = (img2H - 1.5).toString() + "px";
	img[2].style.left = (img2L + 8.5).toString() + "px";
	img[2].style.width = (img2W - 2).toString() + "px";
	img[3].style.height = (img3H - 1).toString() + "px";
	img[3].style.left = (img3L + 6.5).toString() + "px";
	img[3].style.width = (img3W - 1.5).toString() + "px";
	img[4].style.height = (img4H - 2).toString() + "px";
	img[4].style.left = (img4L + 5).toString() + "px";
	img[4].style.width = (img4W - 3).toString() + "px";
	img[5].style.height = (img5H + 2).toString() + "px";
	img[5].style.left = (img5L + 5).toString() + "px";
	img[5].style.width = (img5W + 3).toString() + "px";
	//alert(img[1].style.left);
	if(i>19){
	clearInterval(hide);
	reset();
	roll('l');
	isRunning = 'false';
}
}
var isRunning;
	function move(direction){
	//alert(isRunning);
	if(isRunning != 'udefined' && isRunning == 'true')return;
	frequency = 20;
	if(navigator.userAgent.indexOf("MSIE")>0){
	frequency = 15;
}
if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
	frequency = 20;
}
i = 0;
	if(direction == 'r'){
	cur = cur + 1;
	img[5].style.left = "640px";
	hide = setInterval("right()",frequency);
	isRunning = 'true';
}
if(direction == 'l'){
	cur = cur - 1;
	img[5].style.left = "-90px";
	var pos = position - 1;
	if(pos < 0)pos = pos + ad.length;
	img[5].src = ad[pos].Photo;
	hide = setInterval("left()",frequency);
	isRunning = 'true';
}
if(cur > (ad.length - 1))cur = 0;
	if(cur < 0)cur = ad.length - 1;
	//alert(cur);
	adname.href = ad[cur].url;
	if(navigator.userAgent.indexOf("Firefox")>0){
	adname.textContent = ad[cur].name;
	adtel.textContent = ad[cur].phone;
	adaddr.textContent = ad[cur].address;
	adprice.textContent = ad[cur].price;
	adtime.textContent = ad[cur].time;
}
else{
	adname.innerText = ad[cur].name;
	adtel.innerText = ad[cur].phone;
	adaddr.innerText = ad[cur].address;
	adprice.innerText = ad[cur].price;
	adtime.innerText = ad[cur].time;
}
}
function moveC(direction){
	if(isRunning != 'true'){
	move(direction);
	clearInterval(movec);
}
}
function moveD(direction){
	move(direction);
	if('r' == direction){
	movec = setInterval("moveC('r')",5);
}
else{
	movec = setInterval("moveC('l')",5);
}
}
function reset(){
	img[0].style.width = "70px";
	img[0].style.height = "50px";
	img[0].style.left = "10px";
	img[1].style.width = "100px";
	img[1].style.height = "75px";
	img[1].style.left = "110px";
	img[2].style.width = "140px";
	img[2].style.height = "105px";
	img[2].style.left = "240px";
	img[3].style.width = "100px";
	img[3].style.height = "75px";
	img[3].style.left = "410px";
	img[4].style.width = "70px";
	img[4].style.height = "50px";
	img[4].style.left = "540px";
	img[5].style.width = "10px";
	img[5].style.height = "10px";
	img[5].style.left = "-90px";
}
autoplay = setInterval("move('r')",2000);
	function openNewPage(){
	window.open(ad[cur].url);
}

CSS代码(index.css):

@charset "utf-8";body{margin:20px auto;width:100%;height:auto;}
#dHomePageCarousel{background:url("../images/pic_bg.gif") no-repeat scroll 0 0 transparent;height:221px;width:670px;position:relative;margin:40px auto;}
#dLocalHomesCarousel{height:131px;margin:0px 2px 3px 1px;overflow:hidden;position:relative;}
.divCarouselInfo{color:#3C404E;font-size:12px;width:639px;height:64px;line-height:16px;margin-right:15px;padding-top:10px;position:relative;}
.imgBorder{border:2px solid #fff;position:absolute;cursor:pointer;}
.imgBorder:hover{border:2px solid #FFAA55;cursor:pointer;position:absolute;}
.btnCarouselLT{background:url("../images/btn_nav_carousel.png") no-repeat scroll left top transparent;display:block;height:41px;overflow:hidden;position:absolute;cursor:pointer;top:17px;width:40px;}
.btnCarouselRT{background:url("../images/btn_nav_carousel.png") no-repeat scroll right top transparent;display:block;height:41px;overflow:hidden;position:absolute;cursor:pointer;top:17px;width:40px;}
img{border:medium none;}
.author{width:700px;margin:0 auto;height:auto;text-align:center;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
40.37 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
40.37 KB
立即下载
袁希
了解
打赏作者 鼓励作者
Html JS 图片特效6
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章