傲游JS焦点图代码轮播滚动切换特效

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是傲游JS焦点图代码轮播滚动切换特效的示例演示效果:

当前平台(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代码,焦点图,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为傲游JS焦点图代码" />
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script type="text/javascript" src="js/lanrenxixi.js"></script>
<title>傲游JS焦点图代码</title>
</head>

<body style="text-align:center">

<div id="index-splash-block" class="index-splash-block">
	<div id="feature-slide-block" class="feature-slide-block">
		<div class="feature-slide-preview" style="display: none; ">
			<h3><a href="#">鼠标手势</a></h3>
			<p>按住右键滑动鼠标，就能够执行前进、后退和刷新等常用操作。您还可以到设置中心对其进行自定义。</p>
			<a href="#" class="screenshot"><img alt="" src="./images/feature-preview-1.png" /></a>
		</div>
		<div class="feature-slide-preview" style="display: none; ">
			<h3><a href="#">撤销按钮</a></h3>
			<p>通过撤销按钮可以轻松找回失手关闭的重要网页，点击按钮旁边的下拉箭头还会显示最近关闭的页面列表。</p>
			<a href="#" class="screenshot"><img alt="" src="./images/feature-preview-2.png" /></a>
		</div>
		<div class="feature-slide-preview" style="display: none; ">
			<h3><a href="#">历史搜索</a></h3>
			<p>通过历史搜索你可以方便的浏览、搜索和清除浏览历史记录、RSS历史记录以及搜索关键字历史记录</p>
			<a href="#" class="screenshot"><img alt="" src="./images/feature-preview-3.png" /></a>
		</div>
		<div class="feature-slide-preview" style="display: none; ">
			<h3><a href="#">分屏浏览</a></h3>
			<p>将浏览器窗口一分为二，更大发挥宽屏显示器作用；你可以同时浏览两个网站，转载和对照更加方便。</p>
			<a href="#" class="screenshot"><img alt="" src="./images/feature-preview-4.png" /></a>
		</div>
		<div class="feature-slide-preview" style="display: none; ">
			<h3><a href="#">广告过滤</a></h3>
			<p>有效阻止各种弹窗、恶意网页的骚扰,还支持自定义过滤和免过滤列表。铺天盖地的广告，消失吧！</p>
			<a href="#" class="screenshot"><img alt="" src="./images/feature-preview-5.png" /></a>
		</div>
		<div class="feature-slide-preview" style="display: none; ">
			<h3><a href="#">在线收藏</a></h3>
			<p>让你随时随地都可以访问自己的私人收藏夹内容。浏览器会在后台自动保存和同步你的在线收藏夹。</p>
			<a href="#" class="screenshot"><img alt="" src="./images/feature-preview-6.png" /></a>
		</div>
		<div class="feature-slide-preview" style="display: none; ">
			<h3><a href="#">收集面板</a></h3>
			<p>随叫随到的在线版记事本。多标签让管理更加方便，可以随时上传下载，也可以另存为文本文档。</p>
			<a href="#" class="screenshot"><img alt="" src="./images/feature-preview-7.png" /></a>
		</div>
		<div class="feature-slide-preview" style="display: none; ">
			<h3><a href="#">屏幕截图</a></h3>
			<p>将网页内容保存为多种图片格式，方便存档和分享。无论是全屏、局部还是整个页面截图，都由你决定。</p>
			<a href="#" class="screenshot"><img alt="" src="./images/feature-preview-8.png" /></a>
		</div>
		<div class="feature-slide-preview" style="display: none; ">
			<h3><a href="#">智能填表</a></h3>
			<p>智能识别表单进行自动填写，网站注册登录一劳永逸。</p>
			<a href="#" class="screenshot"><img alt="" src="./images/feature-preview-9.png" /></a>
		</div>
		<div class="feature-slide-preview" style="display: none; ">
			<h3><a href="#">多重代理</a></h3>
			<p>通过设置代理规则，你可以通过不同代理服务器访问不同网站，有效提高浏览效率。</p>
			<a href="#" class="screenshot"><img alt="" src="./images/feature-preview-10.png" /></a>
		</div>
		<div class="feature-slide-preview" style="display: none; ">
			<h3><a href="#">扩展插件</a></h3>
			<p>通过安装各种插件进一步扩展浏览器的功能。您也可以编写插件与全球用户分享。</p>
			<a href="#" class="screenshot"><img alt="" src="./images/feature-preview-11.png" /></a>
		</div>
		<div class="feature-slide-preview" style="display: none; ">
			<h3><a href="#">个性皮肤</a></h3>
			<p>不同的皮肤使界面呈现不同的风格，美化浏览器，代言你的个性.你还可以制作皮肤与全球用户分享</p>
			<a href="#" class="screenshot"><img alt="" src="./images/feature-preview-12.png" /></a>
		</div>
		<div id="feature-slide-list" class="feature-slide-list">
			<a href="#" id="feature-slide-list-previous" class="feature-slide-list-previous"></a>
			<div id="feature-slide-list-items" class="feature-slide-list-items">
			</div>
			<a href="#" id="feature-slide-list-next" class="feature-slide-list-next"></a>
		</div>
	</div>
	<script type="text/javascript">
		initFeatureSlide();
	</script>
</div>
</body>
</html>

JS代码(lanrenxixi.js):

function initFeatureSlide(strId){
	var domRoot = document.getElementById('feature-slide-block');
	if (!domRoot) return;
	domRoot.list = [];
	var children = domRoot.childNodes;
	var offset = 0;
	for (var i in children){
	var domItem = children[i];
	if (domItem && domItem.className == 'feature-slide-preview'){
	domRoot.list.push(domItem);
	domItem.offset = offset;
	offset++;
}
}
var domList = document.getElementById('feature-slide-list-items');
	if (!domList) return;
	domList.innerHTML = '';
	domList.items = [];
	for (var i = 0;
	i < domRoot.list.length;
	i++){
	var temp = domRoot.list[i];
	var domItem = document.createElement('a');
	domList.appendChild(domItem);
	domItem.href = '#';
	domItem.onclick = function(){
	return false;
}
domList.items.push(domItem);
	domItem.offset = i;
}
var domPreviousBtn = document.getElementById('feature-slide-list-previous');
	var domNextBtn = document.getElementById('feature-slide-list-next');
	domPreviousBtn.onclick = function(evt){
	evt = evt || window.event;
	var target = evt.target || evt.srcElement;
	var offset = domList.current.offset;
	offset--;
	if (offset >= domList.items.length || offset < 0) offset = domList.items.length - 1;
	target.blur();
	doSlide(offset);
	return false;
}
domNextBtn.onclick = function(evt){
	evt = evt || window.event;
	var target = evt.target || evt.srcElement;
	var offset = domList.current.offset;
	offset++;
	if (offset >= domList.items.length || offset < 0) offset = 0;
	target.blur();
	doSlide(offset);
	return false;
}
domRoot.current = domRoot.list[0];
	domList.current = domList.items[0];
	domRoot.current.style.display = 'block';
	domList.current.className = 'current';
	function doSlide(offset,timeStamp){
	if ( timeStamp && ( domRoot.boolHover || timeStamp != domRoot.timeStamp ) ) return;
	if (typeof(offset) != 'number'){
	offset = domList.current.offset - (-1);
	if (offset >= domList.items.length || offset < 0) offset = 0;
}
domRoot.current.style.display = 'none';
	domList.current.className = '';
	domRoot.current = domRoot.list[offset];
	domList.current = domList.items[offset];
	domRoot.current.style.display = 'block';
	domList.current.className = 'current';
	if (domRoot.boolHover) return;
	var now = new Date();
	domRoot.timeStamp = now.valueOf();
	window.setTimeout(function(){
	doSlide(null,now.valueOf());
}
,5000);
}
domList.onmouseover = domList.onclick = function (evt){
	evt = evt || window.event;
	var target = evt.target || evt.srcElement;
	while (target && target != domList){
	if (target.tagName.toLowerCase() == 'a'){
	target.blur();
	doSlide(target.offset);
	return false;
}
target = target.parentNode;
}
}
domRoot.onmouseover = domRoot.onmousemove = function(){
	domRoot.boolHover = true;
}
domRoot.onmouseout = function(evt){
	domRoot.boolHover = false;
	var now = new Date();
	domRoot.timeStamp = now.valueOf();
	window.setTimeout(function(){
	doSlide(null,now.valueOf());
}
,5000);
}
var now = new Date();
	domRoot.timeStamp = now.valueOf();
	window.setTimeout(function(){
	doSlide(null,now.valueOf());
}
,5000);
}

CSS代码(style.css):

body{margin-top:40px;font:75% Tahoma;line-height:150%;}
h3{margin:0 0 10px;font-size:130%;line-height:150%;}
p{margin:0 0 10px;}
img{border:none;vertical-align:middle;}
a{color:#1A7AAE;text-decoration:none;}
a:hover{text-decoration:underline;}
.index-splash-block{width:364px;height:264px;background:url(../images/bg.png) center no-repeat;text-align:left;}
.index-splash-block .feature-slide-preview{margin:0 auto;padding-top:20px;display:none;width:300px;height:190px;overflow:hidden;}
.index-splash-block .feature-slide-preview .screenshot{display:block;margin:auto;}
.index-splash-block .feature-slide-list{width:308px;height:22px;overflow:hidden;margin:10px auto 0;}
.index-splash-block .feature-slide-list a{float:left;display:inline;width:22px;height:22px;background:url(../images/feature-point.png) center no-repeat;_background:url(../images/feature-point-4ie6.png) center no-repeat;}
.index-splash-block .feature-slide-list a.current{background:url(../images/feature-point-current.png) center no-repeat;_background:url(../images/feature-point-current-4ie6.png) center no-repeat;}
.index-splash-block .feature-slide-list .feature-slide-list-items{display:inline;}
.index-splash-block .feature-slide-list a.feature-slide-list-previous{background:url(../images/feature-point-previous.png);_background:url(../images/feature-point-previous-4ie6.png);}
.index-splash-block .feature-slide-list a.feature-slide-list-next{background:url(../images/feature-point-next.png);_background:url(../images/feature-point-next-4ie6.png);}

附件:下载该文件资源,减少时间成本(增值服务)