效果图如下: 页面代码: 复制代码 代码如下: 百度有啊通栏展示效果 <BR>body,div,dl,dt,dd,ul,li,h3{margin:0;padding:0;} <BR>body{color:#333;font:12px/1.5 arial;} <BR>li{list-style:none;} <BR>a:link,a:visited,a:active{color:#333;text-decoration:none;} <BR>a:hover{color:#F30;} <BR>img{border:none;} <BR>#box{width:740px;margin:10px auto;} <BR>#container{position:relative;height:232px;background:#FCFCFC;} <BR>#container .item{position:absolute;top:0;left:0;width:492px;height:230px;overflow:hidden;background:#FAFAFA;border:1px solid #ddd;z-index:1;opacity:1;} <BR>#container .item .pic{float:left;width:210px;height:200px;display:inline;margin:15px;} <BR>#container .item .pic img{width:210px;height:200px;vertical-align:top;} <BR>#container .item .txt{float:left;width:250px;margin-top:12px;} <BR>#container .item .txt dt{font-size:14px;font-weight:700;} <BR>#container .item .txt .info{color:#999;} <BR>#container .item .txt dd{height:24px;line-height:24px;} <BR>#container .item .txt dd span{float:left;} <BR>#container .item .txt .star{position:relative;float:left;height:12px;width:69px;margin:6px 0 0 5px;} <BR>#container .item .txt .star .star_red{position:absolute;top:0;left:0;height:12px;width:69px;z-index:2;background:url(http://js.fgm.cc/learn/lesson10/img/youa/star.png) repeat-x scroll left top transparent;} <BR>#container .item .txt .star .star_grey{background:url(http://js.fgm.cc/learn/lesson10/img/youa/star.png) repeat-x scroll left -15px transparent;height:12px;width:69px;} <BR>#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;} <BR>#container .item .txt .blue{background:#96BAE7;} <BR>#container .item .txt .green{background:#9CDBC3;} <BR>#container .item .txt .comment{width:232px;height:99px;margin-top:10px;background:#FFF;border:1px solid #EAEAEA;} <BR>#container .item .txt .comment h3{font-size:12px;font-weight:400;height:24px;line-height:24px;border-bottom:1px solid #E9E9E9;padding:0 10px;} <BR>#container .item .txt .comment .comment_list{width:220px;height:60px;overflow:hidden;margin:8px 0 0 10px;} <BR>#container .item .txt .comment .comment_list ul{width:220px;} <BR>#container .item .txt .comment .comment_list ul li{height:20px;line-height:20px;white-space:nowrap;} <BR>#container .item .txt .comment .comment_list ul li b{color:#999;font-weight:400;} <BR>#control{height:37px;text-align:center;background:url(http://js.fgm.cc/learn/lesson10/img/youa/bg.png) no-repeat;} <BR>#control span{width:8px;height:8px;font-size:0;line-height:0;cursor:pointer;display:inline-block;background-color:#FEFEFE;border:1px solid #BCC1C5;margin:13px 2px 2px;} <BR>#control span.active{background-color:#848484;border:1px solid #6E6E6E;} <BR> <BR>function Youa (obj) <BR>{ <BR>this.obj = $(obj); <BR>this.container = $("container"); <BR>this.control = $("control"); <BR>this.items = $$$("item", this.container); <BR>this.iCenter = 2; <BR>this.aSort = []; <BR>this.timer = null; <BR>this.oData = [ <BR>{left:0, zIndex:2, opacity:30}, <BR>{left:40, zIndex:3, opacity:60}, <BR>{left:124, zIndex:4, opacity:100}, <BR>{left:208, zIndex:3, opacity:60}, <BR>{left:246, zIndex:2, opacity:30}, <BR>{left:40, zIndex:0, opacity:0} <BR>]; <BR>this.__create__() <BR>}; <BR>Youa.prototype.__create__ = function () <BR>{ <BR>var that = this; <BR>var oSpan = null; <BR>var i = 0; <BR>for (i = 0; i < that.items.length; i++) <BR>{ <BR>that.items[i].number = i; <BR>that.aSort[i] = that.items[i]; <BR>oSpan = document.createElement("span"); <BR>oSpan.number = i; <BR>that.control.appendChild(oSpan) <BR>} <BR>for (i = 0; i < 2; i++) this.aSort.unshift(this.aSort.pop()); <BR>that.aSpan = $$("span", that.control); <BR>that.control.onmouseover = function (ev) <BR>{ <BR>var oEv = ev || event; <BR>var oTarget = oEv.target || oEv.srcElement; <BR>if (oTarget.tagName.toUpperCase() == "SPAN") <BR>{ <BR>that.aSort.sort(function (a, b) {return a.number - b.number}); <BR>if (oTarget.number < that.iCenter) <BR>{ <BR>for (i = 0; i < that.iCenter - oTarget.number; i++) that.aSort.unshift(that.aSort.pop()); <BR>that.__set__(); <BR>return false <BR>} <BR>else if (oTarget.number > that.iCenter) <BR>{ <BR>for (i = 0; i < oTarget.number - that.iCenter; i++) that.aSort.push(that.aSort.shift()); <BR>that.__set__(); <BR>return false <BR>} <BR>else <BR>{ <BR>that.__set__() <BR>} <BR>} <BR>} <BR>this.__set__(); <BR>this.__switch__(); <BR>this.__autoPlay__() <BR>}; <BR>Youa.prototype.__set__ = function () <BR>{ <BR>var i = 0; <BR>for (i = 0; i < this.aSort.length; i++) this.container.appendChild(this.aSort[i]); <BR>for (i = 0; i < this.aSpan.length; i++) this.aSpan[i].className = ""; <BR>this.aSpan[this.aSort[this.iCenter].number].className = "active"; <BR>for (i = 0; i < this.aSort.length; i++) <BR>{ <BR>this.aSort[i].index = i; <BR>if (i < 5) <BR>{ <BR>new Animate(this.aSort[i], this.oData[i]); <BR>} <BR>else <BR>{ <BR>new Animate(this.aSort[i], this.oData[this.oData.length - 1]) <BR>} <BR>} <BR>}; <BR>Youa.prototype.__switch__ = function () <BR>{ <BR>var i = 0; <BR>var that = this; <BR>this.container.onclick = function (ev) <BR>{ <BR>var oEv = ev || event; <BR>var oTarget = oEv.target || oEv.srcElement; <BR>var index = findItem(oTarget); <br><br>if (index < that.iCenter) <BR>{ <BR>for (i = 0; i < that.iCenter - index; i++) that.aSort.unshift(that.aSort.pop()); <BR>that.__set__(); <BR>return false <BR>} <BR>else if (index > that.iCenter) <BR>{ <BR>for (i = 0; i < index - that.iCenter; i++) that.aSort.push(that.aSort.shift()); <BR>that.__set__(); <BR>return false <BR>} <BR>function findItem (element) <BR>{ <BR>return element.className == "item" ? element.index : arguments.callee(element.parentNode) <BR>} <BR>}; <BR>}; <BR>Youa.prototype.__autoPlay__ = function () <BR>{ <BR>var that = this; <BR>that.timer = setInterval(function () <BR>{ <BR>that.aSort[3].click() <BR>}, 3000); <BR>that.obj.onmouseover = function () <BR>{ <BR>clearInterval(that.timer) <BR>}; <BR>that.obj.onmouseout = function () <BR>{ <BR>that.timer = setInterval(function () <BR>{ <BR>that.aSort[3].click() <BR>}, 3000) <BR>} <BR>}; <BR>function $ (id) <BR>{ <BR>return typeof id === "string" ? document.getElementById(id) : id <BR>}; <BR>function $$ (tagName, oParent) <BR>{ <BR>return (oParent || document).getElementsByTagName(tagName) <BR>}; <BR>function $$$ (className, element, tagName) <BR>{ <BR>var i = 0; <BR>var aClass = []; <BR>var reClass = new RegExp("(^|//s)" + className + "(//s|$)"); <BR>var aElement = $$(tagName || "*", element || document); <BR>for (i = 0; i < aElement.length; i++) reClass.test(aElement[i].className) && aClass.push(aElement[i]); <BR>return aClass <BR>}; <BR>function css (element, attr, value) <BR>{ <BR>if (arguments.length == 2) <BR>{ <BR>if (typeof arguments[1] === "string") <BR>{ <BR>return element.currentStyle ? element.currentStyle[attr] : getComputedStyle(element, null)[attr] <BR>} <BR>else <BR>{ <BR>for (var property in attr) <BR>{ <BR>property == "opacity" ? <BR>(element.style.filter = "alpha(opacity=" + attr[property] + ")", element.style.opacity = attr[property] / 100) : <BR>element.style[property] = attr[property] <BR>} <BR>} <BR>} <BR>else if (arguments.length == 3) <BR>{ <BR>switch (attr) <BR>{ <BR>case "width": <BR>case "height": <BR>case "top": <BR>case "left": <BR>case "right": <BR>case "bottom": <BR>element.style[attr] = value + "px"; <BR>break; <BR>case "opacity" : <BR>element.style.filter = "alpha(opacity=" + value + ")"; <BR>element.style.opacity = value / 100; <BR>break; <BR>default : <BR>element.style[attr] = value; <BR>break <BR>} <BR>} <BR>return element <BR>}; <BR>function Animate (element, options, fnCallBack) <BR>{ <BR>this.obj = $(element); <BR>this.options = options; <BR>this.__onEnd__ = fnCallBack; <BR>this.__startMove__() <BR>}; <BR>Animate.prototype.__startMove__ = function () <BR>{ <BR>var that = this; <BR>clearInterval(that.obj.timer); <BR>that.obj.timer = setInterval(function () <BR>{ <BR>that.__doMove__() <BR>}, 30); <BR>}; <BR>Animate.prototype.__doMove__ = function () <BR>{ <BR>var complete = true; <BR>var property = null; <BR>for (property in this.options) <BR>{ <BR>var iCur = parseFloat(css(this.obj, property)); <BR>property == "opacity" && (iCur = parseInt(iCur.toFixed(2) * 100)); <BR>var iSpeed = (this.options[property] - iCur) / 5; <BR>iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); <BR>this.options[property] == iCur || (complete = false, css(this.obj, property, iSpeed + iCur)) <BR>} <BR>complete && (clearInterval(this.obj.timer), this.__onEnd__ && this.__onEnd__.apply(this.obj)) <BR>}; <BR>window.onload = function () <BR>{ <BR>new Youa("box") <BR>}; <BR> 必图拳馆 不要把自己困住 你需要释放! 总体评价: 用户印象:过瘾带劲有活力 用户评价 thaifight:是一个非常好的一个拳... 快乐小友:散打课的实战机会挺多... 爱情赛车:白天人很少,喜欢安静... 北京「七田阳光」全脑教育培训中心 点亮孩子智慧人生 总体评价: 用户印象:亲切耐心干净 用户评价 Jcenter:如此诚恳的教育机构 ... citaslin:孩子的进步很大 甲鱼爱媛媛:七田阳光很注重品质,... 慕纱莹雪婚纱礼服馆 物超所值的性价比,尽在慕纱莹雪! 总体评价: 用户印象:精致做工好专业 用户评价 小企鹅快跑:这个周末去取了我定的... 月逢明时:这家婚纱店的婚纱做工... 日历本丢了:上周末去取了婚纱,婚... 北京金三优装饰有限责任公司 一站式服务让你省时、省力、省钱、省心 总体评价: 用户印象:口碑好规模很大讲信誉 用户评价 紫婧之梦:这家店不错哦! gotometop:装修工都还挺朴实的,... libangcheng1:这家公司还可以,去年... 鸿喜族休闲俱乐部—潘家园店 专注人类健康,打造财富传奇! 总体评价: 用户印象:真好专业手法好 用户评价 永封de铁盒:环境挺不错,灯光控制... 老冯爱国:不错的地方,是个很有... 白云寺方丈:我不会打台球,但朋友... 北京心拓城拓展培训 客户第一 执行有力 激情勤奋 简单团结 总体评价: 用户印象:专业安全积极 用户评价 janice19891:很负责任~ 旺达是条鱼:朋友参加过他们的拓展... bjftxiaoniu:吼吼,在这里看到他们... 韩医生专业祛痘连锁机构北京直营店 我们只祛痘 所以更专业 总体评价: 用户印象:效果好细心专业 用户评价 天涯hehaijiao:这家店很好,顾客很多... 爱神马geili:我治疗了两天感觉的好... 天上的语言:这几天已经看到明显效... 罗曼卡婚纱摄影 口碑好 性价比高 无额外消费 总体评价: 用户印象:口碑好很喜欢完美 用户评价 明确指出i:拍的很不错,老妈都夸... 爱就一直走吧:他们家服务态度好,衣... 爱过你me:最后照片拍出来后朋友...
用户评价