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

js图片叠加滚动切换代码轮播滚动特效

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

以下是 js图片叠加滚动切换代码轮播滚动特效 的示例演示效果:

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

部分效果截图:

js图片叠加滚动切换代码轮播滚动特效

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=utf-8" />
<title>js图片叠加滚动切换代码</title> 
<script type="text/javascript">
function Youa (obj)
{
	this.obj = $(obj);
	this.container = $("container");
	this.control = $("control");
	this.items = $$$("item", this.container);
	this.iCenter = 2;
	this.aSort = [];
	this.timer = null;
	this.oData = [
		{left:0, zIndex:2, opacity:30},
		{left:40, zIndex:3, opacity:60},
		{left:124, zIndex:4, opacity:100},
		{left:208, zIndex:3, opacity:60},
		{left:246, zIndex:2, opacity:30},
		{left:40, zIndex:0, opacity:0}
	];
	this.__create__()	
};
Youa.prototype.__create__ = function ()
{
	var that = this;
	var oSpan = null;
	var i = 0;
	for (i = 0; i < that.items.length; i++)
	{
		that.items[i].number = i;
		that.aSort[i] = that.items[i];
		oSpan = document.createElement("span");
		oSpan.number = i;
		that.control.appendChild(oSpan)
	}
	for (i = 0; i < 2; i++) this.aSort.unshift(this.aSort.pop());
	that.aSpan = $$("span", that.control);	
	that.control.onmouseover = function (ev)
	{
		var oEv = ev || event;
		var oTarget = oEv.target || oEv.srcElement;		
		if (oTarget.tagName.toUpperCase() == "SPAN")
		{
			that.aSort.sort(function (a, b) {return a.number - b.number});
			if (oTarget.number < that.iCenter)
			{
				for (i = 0; i < that.iCenter - oTarget.number; i++) that.aSort.unshift(that.aSort.pop());	
				that.__set__();
				return false
			}
			else if (oTarget.number > that.iCenter)
			{
				for (i = 0; i < oTarget.number - that.iCenter; i++) that.aSort.push(that.aSort.shift());
				that.__set__();
				return false
			}
			else
			{
				that.__set__()
			}
		}
	}
	this.__set__();
	this.__switch__();
	this.__autoPlay__()
};
Youa.prototype.__set__ = function ()
{
	var i = 0;
	for (i = 0; i < this.aSort.length; i++) this.container.appendChild(this.aSort[i]);
	for (i = 0; i < this.aSpan.length; i++) this.aSpan[i].className = "";
	this.aSpan[this.aSort[this.iCenter].number].className = "active";
	for (i = 0; i < this.aSort.length; i++)
	{
		this.aSort[i].index = i;		
		if (i < 5)
		{
			new Animate(this.aSort[i], this.oData[i]);
		}
		else
		{
			new Animate(this.aSort[i], this.oData[this.oData.length - 1])
		}
	}
};
Youa.prototype.__switch__ = function ()
{
	var i = 0;
	var that = this;
	this.container.onclick = function (ev)
	{
		var oEv = ev || event;
		var oTarget = oEv.target || oEv.srcElement;
		var index = findItem(oTarget);
		
		if (index < that.iCenter)
		{
			for (i = 0; i < that.iCenter - index; i++) that.aSort.unshift(that.aSort.pop());
			that.__set__();
			return false
		}
		else if (index > that.iCenter)
		{
			for (i = 0; i < index - that.iCenter; i++) that.aSort.push(that.aSort.shift());
			that.__set__();
			return false
		}		
		function findItem (element)
		{
			return element.className == "item" ? element.index : arguments.callee(element.parentNode)
		}
	};
};
Youa.prototype.__autoPlay__ = function ()
{
	var that = this;
	that.timer = setInterval(function ()
	{
		that.aSort[3].click()
	}, 3000);
	that.obj.onmouseover = function ()
	{
		clearInterval(that.timer)
	};
	that.obj.onmouseout = function ()
	{
		that.timer = setInterval(function ()
		{
			that.aSort[3].click()
		}, 3000)	
	}
};
function $ (id)
{
	return typeof id === "string" ? document.getElementById(id) : id
};
function $$ (tagName, oParent)
{
	return (oParent || document).getElementsByTagName(tagName)	
};
function $$$ (className, element, tagName)
{
	var i = 0;
	var aClass = [];
	var reClass = new RegExp("(^|//s)" + className + "(//s|$)");
	var aElement = $$(tagName || "*", element || document);
	for (i = 0; i < aElement.length; i++) reClass.test(aElement[i].className) && aClass.push(aElement[i]);
	return aClass
};
function css (element, attr, value)
{
	if (arguments.length == 2)
	{
		if (typeof arguments[1] === "string")
		{
			return element.currentStyle ? element.currentStyle[attr] : getComputedStyle(element, null)[attr]	
		}
		else
		{
			for (var property in attr)
			{
				property == "opacity" ?
				(element.style.filter = "alpha(opacity=" + attr[property] + ")", element.style.opacity = attr[property] / 100) :
				element.style[property] = attr[property]
			}
		}
	}
	else if (arguments.length == 3)
	{
		switch (attr)
		{
			case "width":
			case "height":
			case "top":
			case "left":
			case "right":
			case "bottom":
				element.style[attr] = value + "px";
				break;
			case "opacity" :
				element.style.filter = "alpha(opacity=" + value + ")";
				element.style.opacity = value / 100;
				break;
			default :
				element.style[attr] = value;
				break
		}	
	}
	return element
};
function Animate (element, options, fnCallBack)
{
	this.obj = $(element);
	this.options = options;
	this.__onEnd__ = fnCallBack;
	this.__startMove__()
};
Animate.prototype.__startMove__ = function ()
{
	var that = this;
	clearInterval(that.obj.timer);
	that.obj.timer = setInterval(function ()
	{
		that.__doMove__()
	}, 30);
};
Animate.prototype.__doMove__ = function ()
{
	var complete = true;
	var property = null;
	for (property in this.options)
	{
		var iCur = parseFloat(css(this.obj, property));
		property == "opacity" && (iCur = parseInt(iCur.toFixed(2) * 100));
		var iSpeed = (this.options[property] - iCur) / 5;
		iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
		this.options[property] == iCur || (complete = false, css(this.obj, property, iSpeed + iCur))
	}
	complete && (clearInterval(this.obj.timer), this.__onEnd__ && this.__onEnd__.apply(this.obj))
};
window.onload = function ()
{
	new Youa("box")
};
</script>

<link href="css.css" rel="stylesheet" type="text/css" />

</head>
<body>

<div id="box">
	<div id="container">
    	<div class="item">
        	<div class="pic">
            	<a href="#"><img src="images/1.jpg" /></a>
            </div>
            <div class="txt">
                <dl>
                    <dt><a href="#">必图拳馆</a></dt>
                    <dd class="info">不要把自己困住 你需要释放！</dd>
                    <dd><span>总体评价：</span><div class="star"><div style="width:48px;" class="star_red"></div><div class="star_grey"></div></div></dd>
                    <dd><span>用户印象：</span><span class="pink">过瘾</span><span class="blue">带劲</span><span class="green">有活力</span></dd>
                </dl>
                <div class="comment">
                    <h3>用户评价</h3>
                    <div class="comment_list">
                        <ul id="list">
                        <li><b>thaifight：</b>是一个非常好的一个拳...</li>
                        <li><b>快乐小友：</b>散打课的实战机会挺多...</li>
                        <li><b>爱情赛车：</b>白天人很少，喜欢安静...</li>            
                        </ul>
                    </div>
                </div>
            </div>            
        </div>
        <div class="item">
            <div class="pic">
                <a href="#"><img  src="images/2.jpg"></a>
            </div>
            <div class="txt">
                <dl>
                    <dt><a href="#">北京「七田阳光」全脑教育培训中心</a></dt>
                    <dd class="info">点亮孩子智慧人生</dd>
                    <dd><span>总体评价：</span><div class="star"><div style="width:48px;" class="star_red"></div><div class="star_grey"></div></div></dd>
                    <dd><span>用户印象：</span><span class="pink">亲切</span><span class="blue">耐心</span><span class="green">干净</span></dd>
                </dl>            
                <div class="comment">
                    <h3>用户评价</h3>
                    <div class="comment_list">
                        <ul id="list">
                            <li><b>Jcenter：</b>如此诚恳的教育机构 ...</li>
                            <li><b>citaslin：</b>孩子的进步很大</li>
                            <li><b>甲鱼爱媛媛：</b>七田阳光很注重品质，...</li>
                            
                        </ul>
                    </div>
                </div>
            </div>        
        </div>
    	<div class="item">
        	<div class="pic">
            	<a href="#"><img src="images/3.jpg" /></a>
            </div>
            <div class="txt">
                <dl>
                    <dt><a href="#">慕纱莹雪婚纱礼服馆</a></dt>
                    <dd class="info">物超所值的性价比，尽在慕纱莹雪！</dd>
                    <dd><span>总体评价：</span><div class="star"><div style="width:62px;" class="star_red"></div><div class="star_grey"></div></div></dd>
                    <dd><span>用户印象：</span><span class="pink">精致</span><span class="blue">做工好</span><span class="green">专业</span></dd>
                </dl>
                <div class="comment">
                    <h3>用户评价</h3>
                    <div class="comment_list">
                        <ul id="list">
                            <li><b>小企鹅快跑：</b>这个周末去取了我定的...</li>
                            <li><b>月逢明时：</b>这家婚纱店的婚纱做工...</li>
                            <li><b>日历本丢了：</b>上周末去取了婚纱，婚...</li>                            
                        </ul>
                    </div>
                </div>
            </div>            
        </div>
        <div class="item">
        	<div class="pic">
                <a href="#"><img src="images/4.jpg"></a>
            </div>
            <div class="txt">
                <dl>
                    <dt><a href="#">北京金三优装饰有限责任公司</a></dt>
                    <dd class="info">一站式服务让你省时、省力、省钱、省心</dd>
                    <dd><span>总体评价：</span><div class="star"><div style="width:48px;" class="star_red"></div><div class="star_grey"></div></div></dd>
                    <dd><span>用户印象：</span><span class="pink">口碑好</span><span class="blue">规模很大</span><span class="green">讲信誉</span></dd>
                </dl>
                <div class="comment">
                    <h3>用户评价</h3>
                    <div class="comment_list">
                        <ul id="list">
                            <li><b>紫婧之梦：</b>这家店不错哦！</li>
                            <li><b>gotometop：</b>装修工都还挺朴实的，...</li>
                            <li><b>libangcheng1：</b>这家公司还可以，去年...</li>
                            
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
        	<div class="pic">
                <a href="#"><img src="images/5.jpg"></a>
            </div>
            <div class="txt">
                <dl>
                    <dt><a href="#">鸿喜族休闲俱乐部—潘家园店</a></dt>
                    <dd class="info">专注人类健康，打造财富传奇！</dd>
    
                    <dd><span>总体评价：</span><div class="star"><div style="width:48px;" class="star_red"></div><div class="star_grey"></div></div></dd>
                    <dd><span>用户印象：</span><span class="pink">真好</span><span class="blue">专业</span><span class="green">手法好</span></dd>
                </dl>
                <div class="comment">
                    <h3>用户评价</h3>
                    <div class="comment_list">
                        <ul id="list">
                            <li><b>永封de铁盒：</b>环境挺不错，灯光控制...</li>
                            <li><b>老冯爱国：</b>不错的地方，是个很有...</li>
                            <li><b>白云寺方丈：</b>我不会打台球，但朋友...</li>
                            
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
        	<div class="pic">
                <a href="#"><img src="images/6.jpg"></a>
            </div>
            <div class="txt">
                <dl>
                    <dt><a href="#">北京心拓城拓展培训</a></dt>
                    <dd class="info">客户第一 执行有力 激情勤奋 简单团结</dd>
                    <dd><span>总体评价：</span><div class="star"><div style="width:48px;" class="star_red"></div><div class="star_grey"></div></div></dd>
                    <dd><span>用户印象：</span><span class="pink">专业</span><span class="blue">安全</span><span class="green">积极</span></dd>
                </dl>
                <div class="comment">
                    <h3>用户评价</h3>
                    <div class="comment_list">
                        <ul id="list">
                            <li><b>janice19891：</b>很负责任~</li>
                            <li><b>旺达是条鱼：</b>朋友参加过他们的拓展...</li>
                            <li><b>bjftxiaoniu：</b>吼吼，在这里看到他们...</li>
                            
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="item">
        	<div class="pic">
                <a href="#"><img src="images/7.jpg"></a>
            </div>
            <div class="txt">
                <dl>
                    <dt><a href="#">韩医生专业祛痘连锁机构北京直营店</a></dt>
                    <dd class="info">我们只祛痘 所以更专业</dd>
                    <dd><span>总体评价：</span><div class="star"><div style="width:62px;" class="star_red"></div><div class="star_grey"></div></div></dd>
                    <dd><span>用户印象：</span><span class="pink">效果好</span><span class="blue">细心</span><span class="green">专业</span></dd>
                </dl>
                <div class="comment">
                    <h3>用户评价</h3>
                    <div class="comment_list">
                        <ul id="list">
                            <li><b>天涯hehaijiao：</b>这家店很好，顾客很多...</li>
                            <li><b>爱神马geili：</b>我治疗了两天感觉的好...</li>
                            <li><b>天上的语言：</b>这几天已经看到明显效...</li>
                        </ul>
                  </div>
                </div>
            </div>
        </div>
        <div class="item">
        	<div class="pic">
                <a href="#"><img src="images/8.jpg"></a>
            </div>
            <div class="txt">
                <dl>
                    <dt><a href="#">罗曼卡婚纱摄影</a></dt>
                    <dd class="info">口碑好 性价比高 无额外消费</dd>
                    <dd><span>总体评价：</span><div class="star"><div style="width:62px;" class="star_red"></div><div class="star_grey"></div></div></dd>
                    <dd><span>用户印象：</span><span class="pink">口碑好</span><span class="blue">很喜欢</span><span class="green">完美</span></dd>
                </dl>
                <div class="comment">
                    <h3>用户评价</h3>
                    <div class="comment_list">
                        <ul id="list">
                            <li><b>明确指出i：</b>拍的很不错，老妈都夸...</li>
                            <li><b>爱就一直走吧：</b>他们家服务态度好，衣...</li>
                            <li><b>爱过你me：</b>最后照片拍出来后朋友...</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>	
    <div id="control"></div>
</div>
</body>
</html>
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
372.96 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
372.96 KB
立即下载
温亚苑翠
了解
打赏作者 鼓励作者
Html 焦点滚动特效1
最新结算
股权转让协议意向书模板
类型: .docx 金额: CNY 2.23￥ 状态: 待结算 详细>
股权转让协议意向书模板
类型: .docx 金额: CNY 0.28￥ 状态: 待结算 详细>
CSS3图片向上3D翻转渐隐消失特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3图片向上3D翻转渐隐消失特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
.net c# 将金额转人名币大写金额
类型: .rar 金额: CNY 2.39￥ 状态: 待结算 详细>
.net c# 将金额转人名币大写金额
类型: .rar 金额: CNY 0.3￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 2.23￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 0.28￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 2.23￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 0.28￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章