js超炫焦点图通栏展示效果

作者：袖梨 2022-06-25

提示：您可以先修改部分代码再运行

<!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>百度有啊通栏展示效果</title>
<style type="text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>">
body,div,dl,dt,dd,ul,li,h3{margin:0;padding:0;}
body{color:#333;font:12px/1.5 arial;}
li{list-style:none;}
a:link,a:visited,a:active{color:#333;text-decoration:none;}
a:hover{color:#F30;}
img{border:none;}
#box{margin:10px auto;}
#container{position:relative;background:#FCFCFC;}
#container .item{position:absolute;top:0;left:0;overflow:hidden;background:#FAFAFA;border:1px solid #ddd;z-index:1;opacity:1;}
#container .item .pic{float:left;display:inline;margin:15px;}
#container .item .pic img{vertical-align:top;}
#container .item .txt{float:left;margin-top:12px;}
#container .item .txt dt{font-size:14px;font-weight:700;}
#container .item .txt .info{color:#999;}
#container .item .txt dd{line-}
#container .item .txt dd span{float:left;}
#container .item .txt .star{position:relative;float:left;margin:6px 0 0 5px;}
#container .item .txt .star .star_red{position:absolute;top:0;left:0;z-index:2;background:url(img/youa/star.png) repeat-x scroll left top transparent;}
#container .item .txt .star .star_grey{background:url(img/youa/star.png) repeat-x scroll left -15px transparent;}
#container .item .txt .pink,#container .item .txt .blue,#container .item .txt .green{color:#FFF;font-weight:700;margin-right:2px;background:#F66B5B;padding:0 5px;}
#container .item .txt .blue{background:#96BAE7;}
#container .item .txt .green{background:#9CDBC3;}
#container .item .txt .comment{margin-top:10px;background:#FFF;border:1px solid #EAEAEA;}
#container .item .txt .comment h3{font-size:12px;font-weight:400;line-border-bottom:1px solid #E9E9E9;padding:0 10px;}
#container .item .txt .comment .comment_list{overflow:hidden;margin:8px 0 0 10px;}
#container .item .txt .comment .comment_list ul{}
#container .item .txt .comment .comment_list ul li{line-white-space:nowrap;}
#container .item .txt .comment .comment_list ul li b{color:#999;font-weight:400;}
#control{text-align:center;background:url(img/youa/bg.png) no-repeat;}
#control span{font-size:0;line-height:0;cursor:pointer;display:inline-block;background-color:#FEFEFE;border:1px solid #BCC1C5;margin:13px 2px 2px;}
#control span.active{background-color:#848484;border:1px solid #6E6E6E;}
</style>
<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>
</head>
<body>
<div id="box">
	<div id="container">
    	<div class="item">
        	<div class="pic">
            	<a href="javascript:;"><img  src="https://img.111cn.netimg/youa/1.jpg" /></a>
            </div>
            <div class="txt">
                <dl>
                    <dt><a href="javascript:;">必图拳馆</a></dt>
                    <dd class="info">不要把自己困住 你需要释放！</dd>
                    <dd><span>总体评价：</span><div class="star"><div style="" 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 title="thaifight：是一个非常好的一个拳馆。国内数一数二了。教练全是各个方面的专家。"><b>thaifight：</b>是一个非常好的一个拳馆。国内数一数二了。教练全是各个方面的专家。</li>
                        <li title="快乐小友：散打课的实战机会挺多 很过瘾 能和杨教练学到真东西！"><b>快乐小友：</b>散打课的实战机会挺多 很过瘾 能和杨教练学到真东西！</li>
                        <li title="爱情赛车：白天人很少，喜欢安静的朋友可以去这练，晚上也不乱而且气氛刚刚好，感觉很好比健身俱乐部好"><b>爱情赛车：</b>白天人很少，喜欢安静的朋友可以去这练，晚上也不乱而且气氛刚刚好，感觉很好比健身俱乐部好</li>            
                        </ul>
                    </div>                            </div>
        </div>
            </section>
    <section class="wrap-box">
        <div class="g-tit">
            <h2>相关文章</h2>
        </div>
        <ul class="s-list nobord notop">
                            <li>
                    <a href="/art-429325.htm" class="s-card">
                        <div class="s-card-l">
                            <p class="tit">AstroBWTv3 算法：区块链与加密货币挖矿的未来技术解析</p>
                            <div class="info">
                                <span class="person">游戏攻略</span>
                                <span class="time">2025-05-16</span>
                            </div>
                        </div>
                        <div class="s-card-pic">
                            <img src="/images/lazy.gif" data-src="/uploads/20250516/logo_6826e7221fdb21.jpg" alt="AstroBWTv3 算法：区块链与加密货币挖矿的未来技术解析" />
                        </div>
                    </a>
                </li>
                            <li>
                    <a href="/art-429230.htm" class="s-card">
                        <div class="s-card-l">
                            <p class="tit">CF手游选图界面优化有哪些</p>
                            <div class="info">
                                <span class="person">游戏攻略</span>
                                <span class="time">2025-05-16</span>
                            </div>
                        </div>
                        <div class="s-card-pic">
                            <img src="/images/lazy.gif" data-src="/uploads/20250516/logo_682690bbd171a1.webp" alt="CF手游选图界面优化有哪些" />
                        </div>
                    </a>
                </li>
                            <li>
                    <a href="/art-429231.htm" class="s-card">
                        <div class="s-card-l">
                            <p class="tit">崩坏3沧海市东城区宝箱全怎么收集</p>
                            <div class="info">
                                <span class="person">游戏攻略</span>
                                <span class="time">2025-05-16</span>
                            </div>
                        </div>
                        <div class="s-card-pic">
                            <img src="/images/lazy.gif" data-src="/uploads/20250516/logo_682690bc521951.webp" alt="崩坏3沧海市东城区宝箱全怎么收集" />
                        </div>
                    </a>
                </li>
                            <li>
                    <a href="/art-429232.htm" class="s-card">
                        <div class="s-card-l">
                            <p class="tit">奇迹暖暖真爱魔法全方位介绍</p>
                            <div class="info">
                                <span class="person">游戏攻略</span>
                                <span class="time">2025-05-16</span>
                            </div>
                        </div>
                        <div class="s-card-pic">
                            <img src="/images/lazy.gif" data-src="/uploads/20250516/logo_682690bc9f55f1.webp" alt="奇迹暖暖真爱魔法全方位介绍" />
                        </div>
                    </a>
                </li>
                            <li>
                    <a href="/art-429233.htm" class="s-card">
                        <div class="s-card-l">
                            <p class="tit">火影忍者手游极境修行风影之章怎样</p>
                            <div class="info">
                                <span class="person">游戏攻略</span>
                                <span class="time">2025-05-16</span>
                            </div>
                        </div>
                        <div class="s-card-pic">
                            <img src="/images/lazy.gif" data-src="/uploads/20250516/logo_682690bc657ee1.webp" alt="火影忍者手游极境修行风影之章怎样" />
                        </div>
                    </a>
                </li>
                            <li>
                    <a href="/art-429323.htm" class="s-card">
                        <div class="s-card-l">
                            <p class="tit">NXPC币2025市场表现 欧易支持的高增长潜力</p>
                            <div class="info">
                                <span class="person">游戏攻略</span>
                                <span class="time">2025-05-16</span>
                            </div>
                        </div>
                        <div class="s-card-pic">
                            <img src="/images/lazy.gif" data-src="/uploads/20250516/6826dd292e60a.jpg" alt="NXPC币2025市场表现 欧易支持的高增长潜力" />
                        </div>
                    </a>
                </li>
                    </ul>
    </section>
    <section class="wrap-box">
        <div class="g-tit">
            <h2>精彩推荐</h2>
        </div>
        <ul class="card-box">
                            <li class="card3">
                    <a href="/app/104700.htm" target="_self" class="figure">
                        <div class="figure-box">
                            <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250430/logo_6811caf0a88eb1.png" alt="茶杯头甜蜜终章dlc 官方手机版v1.0.0.3" />
                        </div>
                        <p class="figure-head">茶杯头甜蜜终章dlc 官方手机版v1.0.0.3</p>
                        <span class="figure-btn">下载</span>
                    </a>
                </li>
                            <li class="card3">
                    <a href="/app/104676.htm" target="_self" class="figure">
                        <div class="figure-box">
                            <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250430/logo_6811cab87dfe81.png" alt="火柴人传说暗影格斗内置菜单 最新版v3.0.1" />
                        </div>
                        <p class="figure-head">火柴人传说暗影格斗内置菜单 最新版v3.0.1</p>
                        <span class="figure-btn">下载</span>
                    </a>
                </li>
                            <li class="card3">
                    <a href="/app/104628.htm" target="_self" class="figure">
                        <div class="figure-box">
                            <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250430/logo_68119aea40ebd1.png" alt="荒野乱斗测试服 安卓版v61.10.3" />
                        </div>
                        <p class="figure-head">荒野乱斗测试服 安卓版v61.10.3</p>
                        <span class="figure-btn">下载</span>
                    </a>
                </li>
                            <li class="card3">
                    <a href="/app/104614.htm" target="_self" class="figure">
                        <div class="figure-box">
                            <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250430/logo_68119aa23457c1.png" alt="荒野乱斗彩虹服 安卓版v61.10.3" />
                        </div>
                        <p class="figure-head">荒野乱斗彩虹服 安卓版v61.10.3</p>
                        <span class="figure-btn">下载</span>
                    </a>
                </li>
                    </ul>
        <ul class="card-box-b">
                            <li class="card10">
                    <a href="/app/104699.htm" target="_self" class="figure2">
                        <div class="figure-box">
                            <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250430/logo_6811caec6cfea1.png" alt="寒霜启示录 安卓版v1.25.10" />
                        </div>
                        <div class="figure-cont">
                            <p class="figure-head">寒霜启示录 安卓版v1.25.10</p>
                            <div class="figure-desc">
                                <span>模拟经营</span>
                                <span>寒霜启示录 安卓版v1.25.10</span>
                            </div>
                            <div class="figure-desc">
                                <p>寒霜启示录是一款生存模拟游戏，不少玩家可能对于末日都有着自己</p>
                            </div>
                        </div>
                        <span class="figure-btn">下载</span>
                    </a>
                </li>
                            <li class="card10">
                    <a href="/app/104698.htm" target="_self" class="figure2">
                        <div class="figure-box">
                            <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250430/logo_6811caeb150841.png" alt="末日城堡免广告版 安卓最新版v0.7.1" />
                        </div>
                        <div class="figure-cont">
                            <p class="figure-head">末日城堡免广告版 安卓最新版v0.7.1</p>
                            <div class="figure-desc">
                                <span>模拟经营</span>
                                <span>末日城堡免广告版 安卓最新版v0.7.1</span>
                            </div>
                            <div class="figure-desc">
                                <p>末日城堡免广告版是一款非常好玩的模拟经营类游戏，内部可以不看</p>
                            </div>
                        </div>
                        <span class="figure-btn">下载</span>
                    </a>
                </li>
                            <li class="card10">
                    <a href="/app/104696.htm" target="_self" class="figure2">
                        <div class="figure-box">
                            <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250430/logo_6811cae5834611.png" alt="甜蜜人生模拟器 最新版v1.4.5" />
                        </div>
                        <div class="figure-cont">
                            <p class="figure-head">甜蜜人生模拟器 最新版v1.4.5</p>
                            <div class="figure-desc">
                                <span>模拟经营</span>
                                <span>甜蜜人生模拟器 最新版v1.4.5</span>
                            </div>
                            <div class="figure-desc">
                                <p>甜蜜人生模拟器是一款非常好玩的模拟恋爱手游，玩家在这里能够对</p>
                            </div>
                        </div>
                        <span class="figure-btn">下载</span>
                    </a>
                </li>
                            <li class="card10">
                    <a href="/app/104679.htm" target="_self" class="figure2">
                        <div class="figure-box">
                            <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250430/logo_6811cabe2a4361.png" alt="武器锻造师内置功能菜单 v10.4" />
                        </div>
                        <div class="figure-cont">
                            <p class="figure-head">武器锻造师内置功能菜单 v10.4</p>
                            <div class="figure-desc">
                                <span>模拟经营</span>
                                <span>武器锻造师内置功能菜单 v10.4</span>
                            </div>
                            <div class="figure-desc">
                                <p>武器锻造师内置菜单版是游戏的破解版本，在该版本中为玩家提供了</p>
                            </div>
                        </div>
                        <span class="figure-btn">下载</span>
                    </a>
                </li>
                            <li class="card10">
                    <a href="/app/104644.htm" target="_self" class="figure2">
                        <div class="figure-box">
                            <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250430/logo_68119b20cd7bb1.png" alt="开放空间overfield 安卓版v1.0.5" />
                        </div>
                        <div class="figure-cont">
                            <p class="figure-head">开放空间overfield 安卓版v1.0.5</p>
                            <div class="figure-desc">
                                <span>模拟经营</span>
                                <span>开放空间overfield 安卓版v1.0.5</span>
                            </div>
                            <div class="figure-desc">
                                <p>开放空间Overfield是一款箱庭养成经营手游，让你在广阔</p>
                            </div>
                        </div>
                        <span class="figure-btn">下载</span>
                    </a>
                </li>
                    </ul>
    </section>
    <footer class="foot">
    <a href="/" class="logo-icon">
        <img src="/mobile/images/logo2.png" alt="一聚教程网">
    </a>
    <p>Copyright © 2010-2022</p>
    <p>111cn.net All Rights Reserved</p>

</footer>
<script>
    var advData = {"img_fixed_pc_adv":"https:\/\/img.111cn.net\/uploads\/20240509\/663c2e9729f58.jpg","img_fixed_mob_adv":"https:\/\/img.111cn.net\/uploads\/20240509\/663c2e8793225.jpg","url_adv":"http:\/\/shop.hushen.cn\/shop\/c\/baojianpin.html","str_adv":"\u864e\u795e\u5546\u57ce\uff1a\u5173\u7231\u7537\u6027\uff0c\u66f4\u61c2\u7537\u4eba\u3002\u89e3\u51b3\u5927\u4f17\u7684\u7537\u8a00\u4e4b\u9690","img_popup_adv":"https:\/\/img.111cn.net\/uploads\/20240509\/663c2e748238d.png","pc_show_img":"2","pc_show_popup":"2","pc_show_video":"2","mob_show_img":"2","mob_show_popup":"2","mob_show_video":"2","close_adv":"https:\/\/img.111cn.net\/uploads\/20240508\/663b20650801e.png","video_adv":"\/pc\/images\/pc-adv.mp4"};
</script>
<script src="/jspc/funcmob.js" type="text/javascript"></script>

<script async src="https://www.googletagmanager.com/gtag/js?id=G-DSRRGRV1TL"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

gtag('config', 'G-DSRRGRV1TL');
</script>    <div class="back-top" style="display: block;">
        <span class="icon-box">
            <svg class="icon" viewBox="0 0 1024 1024">
                <path d="M213.333333 640h170.666667v256h256v-256h170.666667l-298.666667-341.333333zM170.666667 128h682.666666v85.333333H170.666667z" fill="#0374f3"></path>
            </svg>
        </span>
    </div>
</div>
<script src="/js/stat.js"></script>
</body>
</html>