（1）淘宝网4种JS图片切换幻灯焦点图代码
<!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/css">
body {margin:0px;padding:0px;background:url(/jscss/demoimg/201109/bg.jpg);}
ul, li {margin:0px;padding:0px;float:left;list-style-type:none;}
.frame {width:1010px;height:auto;overflow:hidden;margin:40px auto 0 auto;}
.box {width:490px;height:170px;padding:1px;float:left;display:inline;margin:5px;background:#fff;position:relative;border:1px solid #dedede;}
.list {width:490px;height:170px;float:left;overflow:hidden; position:relative;}
.list ul {position:absolute;top:0px;left:0px;}
.list li {width:490px;height:170px;float:left;}
.list li.opacity {position:absolute;top:0px;left:0px;opacity:0;filter:alpha(opacity:0)}
.but {width:105px;height:16px;right:1px;bottom:5px;position:absolute;z-index:1;}
.but li {width:14px;height:14px;float:left;color:#fff;font-size:10px;text-align:center;line-height:14px;font-family:Verdana;background:#bbb;display:inline;margin:0 5px 0 0;cursor:pointer;border:1px solid #a9abaa;}
.but li.hove {background:#ff902a;border:1px solid #ff6502;}
</style>
<script type="text/javascript">
function $(id){
return typeof id === "string" ? document.getElementById(id) : id;
}
function $$(oParent, elem){
return (oParent || document).getElementsByTagName(elem);
}
function $$$(oParent, sClass){
var aElem = $$(oParent, '*');
var aClass = [];
var i = 0;
for(i=0;i<aElem.length;i++)if(aElem[i].className == sClass)aClass.push(aElem[i]);
return aClass;
}
function Slide(){
this.initialize.apply(this, arguments);
}
Object.extend = function(destination, source){
for (var property in source) {
destination[property] = source[property];
}
return destination;
};
Slide.prototype = {
initialize : function(obj, list, but, hove, onEnd){
if($(obj)){
this.obj = $(obj);
this.oList = $$$(this.obj, list)[0];
this.oUl = $$(this.oList, 'ul')[0];
this.aList = $$(this.oList, 'li');
this.aListH = this.aList[0].offsetHeight;
this.aListW = this.aList[0].offsetWidth;
this.oBut = $$$(this.obj, but)[0];
this.aBut = $$(this.oBut, 'li');
this.oEve(onEnd);
this.oAction = this.onEnd.action;
this.onEnd.method == 'mouseover' ? this.method = "mouseover" : this.method = "click";
this.onEnd.autoplay == 'stop' ? this.autoplay = "stop" : this.autoplay = "play";
if(this.oAction == 'top'){
this.oUl.style.height = this.aListH * this.aList.length +'px';
}else if(this.oAction == 'left'){
this.oUl.style.width = this.aListW * this.aList.length +'px';
}else if(this.oAction == 'opacity'){
this.oUl.style.height = this.aListH +'px';
var i = 0;
for(i=0;i<this.aList.length;i++){
this.aList[i].style.position = 'absolute';
this.aList[i].className = 'opacity';
}
this.aList[0].className = '';
}else{
this.oUl.style.height = this.aListH * this.aList.length +'px';
}
this.getEvent(hove);
}
},
oEve: function(onEnd){
this.onEnd = {
method : 'click',
autoplay: 'stop'
};
Object.extend(this.onEnd, onEnd || {});
},
addEvent : function(oElm, strEvent, fuc) {
window.addEventListener ? oElm.addEventListener(strEvent, fuc, false) : oElm.attachEvent('on' + strEvent, fuc);
},
getEvent : function(hove) {
var _this = this;
var i = iNow = 0;
for(i=0;i<this.aBut.length;i++){
(function(){
var j = i;
_this.addEvent(_this.aBut[j], _this.method, function(){
_this.fnClick(j, hove);
_this.autoPlayTab(j, hove);
});
})();
}
this.autoPlayTab(i, hove);
},
autoPlayTab : function(iNow, hove){
if(this.autoplay == 'play'){
var _this = this;
this.iNow = iNow;
this.obj.onmouseover = function(){
clearInterval(_this.timer);
};
this.obj.onmouseout = function(){
clearInterval(_this.timer);
_this.timer = setInterval(playTab,3000);
};
clearInterval(_this.timer);
_this.timer = setInterval(playTab,3000);
function playTab(){
if(_this.iNow == _this.aBut.length)_this.iNow = 0;
_this.fnClick(_this.iNow, hove);
_this.iNow++;
}
}
},
fnClick : function(oBut, hove){
var i = 0;
for(i=0;i<this.aBut.length;i++)this.aBut[i].className = '';
this.aBut[oBut].className = hove;
if(this.oAction == 'top'){
this.sMove(this.oUl, {top:-(this.aListH * oBut)});
}else if(this.oAction == 'left'){
this.sMove(this.oUl, {left:-(this.aListW * oBut)});
}else if(this.oAction == 'opacity'){
var i = 0;
for(i=0;i<this.aList.length;i++){
this.sMove(this.aList[i], {opacity:0});
}
this.sMove(this.aList[oBut], {opacity:100});
}else{
this.sMove(this.oUl, {top:-(this.aListH * oBut)});
}
},
getStyle : function(obj, attr)
{
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj, false)[attr];
},
sMove : function(obj, json, onEnd){
var _this = this;
clearInterval(obj.timer);
obj.timer = setInterval(function(){
_this.dMove(obj, json, onEnd);
},30);
},
dMove : function(obj, json, onEnd){
this.attr = '';
this.bStop = true;
for(this.attr in json){
this.iCur = 0;
this.attr == 'opacity' ? this.iCur = parseInt(parseFloat(this.getStyle(obj, this.attr))*100) : this.iCur = parseInt(this.getStyle(obj, this.attr));
this.iSpeed = (json[this.attr] - this.iCur) / 7;
this.iSpeed = this.iSpeed > 0 ? Math.ceil(this.iSpeed) : Math.floor(this.iSpeed);
if(json[this.attr] != this.iCur)this.bStop = false;
if(this.attr == 'opacity'){
obj.style.filter = 'alpha(opacity:' + (this.iCur + this.iSpeed) +')';
obj.style.opacity = (this.iCur + this.iSpeed ) / 100;
}else{
obj.style[this.attr] = this.iCur + this.iSpeed + 'px';
}
}
if(this.bStop){
clearInterval(obj.timer);
if(onEnd)onEnd();
}
}
};
</script>
<script type="text/javascript">
window.onload = function(){
new Slide('box', 'list', 'but', 'hove', {action : 'opacity'});
new Slide('box1', 'list', 'but', 'hove', {method : 'mouseover', action : 'top', autoplay : 'play'});
new Slide('box2', 'list', 'but', 'hove', {action : 'left', autoplay : 'play'});
new Slide('box3', 'list', 'but', 'hove', {action : 'opacity', autoplay : 'play'});
};
</script>
</head>
<body>
<div class="frame">
<div class="box" id="box">
<div class="list">
<ul>
<li><img src="/jscss/demoimg/201109/01.png" /></li>
<li><img src="/jscss/demoimg/201109/02.jpg" /></li>
<li><img src="/jscss/demoimg/201109/03.jpg" /></li>
<li><img src="/jscss/demoimg/201109/04.jpg" /></li>
<li><img src="/jscss/demoimg/201109/05.jpg" /></li>
</ul>
</div>
<div>
<div class="but">
<ul>
<li class="hove">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
</div>
<div class="box" id="box1">
<div class="list">
<ul>
<li><img src="/jscss/demoimg/201109/01.png" /></li>
<li><img src="/jscss/demoimg/201109/02.jpg" /></li>
<li><img src="/jscss/demoimg/201109/03.jpg" /></li>
<li><img src="/jscss/demoimg/201109/04.jpg" /></li>
<li><img src="/jscss/demoimg/201109/05.jpg" /></li>
</ul>
</div>
<div>
<div class="but">
<ul>
<li class="hove">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
</div>
<div class="box" id="box2">
<div class="list">
<ul>
<li><img src="/jscss/demoimg/201109/01.png" /></li>
<li><img src="/jscss/demoimg/201109/02.jpg" /></li>
<li><img src="/jscss/demoimg/201109/03.jpg" /></li>
<li><img src="/jscss/demoimg/201109/04.jpg" /></li>
<li><img src="/jscss/demoimg/201109/05.jpg" /></li>
</ul>
</div>
<div>
<div class="but">
<ul>
<li class="hove">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
</div>
<div class="box" id="box3">
<div class="list">
<ul>
<li><img src="/jscss/demoimg/201109/01.png" /></li>
<li><img src="/jscss/demoimg/201109/02.jpg" /></li>
<li><img src="/jscss/demoimg/201109/03.jpg" /></li>
<li><img src="/jscss/demoimg/201109/04.jpg" /></li>
<li><img src="/jscss/demoimg/201109/05.jpg" /></li>
</ul>
</div>
<div>
<div class="but">
<ul>
<li class="hove">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>来源： 点击打开链接
（2）经典图片切换
<!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>
<title>经典的图片幻灯</title>
<style type="text/css">
.d1{width:443px;height:auto;overflow:hidden;border:#666666 2px solid;background-color:#000000;position:relative;}
.loading{width:443px;border:#666666 2px solid;background-color:#000000;color:#FFCC00;font-size:12px;height:179px;text-align:center;padding-top:30px;font-family:Verdana, Arial, Helvetica, sans-serif;font-weight:bold;}
.d2{width:100%;height:209px;overflow:hidden;}
.num_list{position:absolute;width:100%;left:0px;bottom:-1px;background-color:#000000;color:#FFFFFF;font-size:12px;padding:4px 0px;height:20px;overflow:hidden;}
.num_list span{display:inline-block;height:16px;padding-left:6px;}
img{border:0px;}
ul{display:none;}
.button{position:absolute; z-index:1000; right:0px; bottom:2px; font-size:13px; font-weight:bold; font-family:Arial, Helvetica, sans-serif;}
.b1,.b2{background-color:#666666;display:block;float:left;padding:2px 6px;margin-right:3px;color:#FFFFFF;text-decoration:none;cursor:pointer;}
.b2{color:#FFCC33;background-color:#FF6633;}
</style>
<script language="javascript" type="text/javascript">
var s=function(){
var interv=2000; //切换间隔时间
var interv2=10; //切换速速
var opac1=80; //文字背景的透明度
var source="fade_focus" //图片容器id
//获取对象
function getTag(tag,obj){if(obj==null){return document.getElementsByTagName(tag)}else{return obj.getElementsByTagName(tag)}}
function getid(id){return document.getElementById(id)};
var opac=0,j=0,t=63,num,scton=0,timer,timer2,timer3;var id=getid(source);id.removeChild(getTag("div",id)[0]);var li=getTag("li",id);var div=document.createElement("div");var title=document.createElement("div");var span=document.createElement("span");var button=document.createElement("div");button.className="button";for(var i=0;i<li.length;i++){var a=document.createElement("a");a.innerHTML=i+1;a.οnclick=function(){clearTimeout(timer);clearTimeout(timer2);clearTimeout(timer3);j=parseInt(this.innerHTML)-1;scton=0;t=63;opac=0;fadeon();};a.className="b1";a.οnmοuseοver=function(){this.className="b2"};a.οnmοuseοut=function(){this.className="b1";sc(j)};button.appendChild(a);}
//控制透明度
function alpha(obj,n){if(document.all){obj.style.filter="alpha(opacity="+n+")";}else{obj.style.opacity=(n/100);}}
//控制焦点按钮
function sc(n){for(var i=0;i<li.length;i++){button.childNodes[i].className="b1"};button.childNodes[n].className="b2";}
title.className="num_list";title.appendChild(span);alpha(title,opac1);id.className="d1";div.className="d2";id.appendChild(div);id.appendChild(title);id.appendChild(button);
//渐显
var fadeon=function(){opac+=5;div.innerHTML=li[j].innerHTML;span.innerHTML=getTag("img",li[j])[0].alt;alpha(div,opac);if(scton==0){sc(j);num=-2;scrolltxt();scton=1};if(opac<100){timer=setTimeout(fadeon,interv2)}else{timer2=setTimeout(fadeout,interv);};}
//渐隐
var fadeout=function(){opac-=5;div.innerHTML=li[j].innerHTML;alpha(div,opac);if(scton==0){num=2;scrolltxt();scton=1};if(opac>0){timer=setTimeout(fadeout,interv2)}else{if(j<li.length-1){j++}else{j=0};fadeon()};}
//滚动文字
var scrolltxt=function(){t+=num;span.style.marginTop=t+"px";if(num<0&&t>3){timer3=setTimeout(scrolltxt,interv2)}else if(num>0&&t<62){timer3=setTimeout(scrolltxt,interv2)}else{scton=0}};
fadeon();
}
//初始化
window.οnlοad=s;
</script>
</head>
<body>
<div id="fade_focus">
<div class="loading">Loading...<br /><img src="/jscss/demoimg/loading.gif"></div>
<ul>
<li><img src="/jscss/demoimg/wall5.jpg" width="443" height="209" alt="图片焦点切换第一张文字" /></li>
<li><img src="/jscss/demoimg/wall6.jpg" width="443" height="209" alt="图片焦点切换第二张文字" /></li>
<li><img src="/jscss/demoimg/wall7.jpg" width="443" height="209" alt="图片焦点切换第三张文字" /></li>
<li><img src="/jscss/demoimg/wall8.jpg" width="443" height="209" alt="图片焦点切换第四张文字" /></li>
</ul>
</div>
</body>
</html> 来源： 点击打开链接
（3）从两侧向中间拼合的JavaScript图片切换效果
<!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" />
<title>从两侧向中间拼合的JavaScript图片切换效果</title>
<style type="text/css">
.d1{width:444px;height:auto;overflow:hidden;border:#666666 2px solid;background-color:#000000;position:relative;}
.left{width:222px;height:209px;overflow:hidden;position:absolute;z-index:500;top:0px;left:-222px;}
.right{width:222px;height:209px;overflow:hidden;position:absolute;z-index:503;background-position:right top;background-repeat:no-repeat;right:-222px;top:0px;}
.loading{width:444px;border:#666666 2px solid;background-color:#000000;color:#FFCC00;font-size:12px;height:179px;text-align:center;padding-top:30px;font-family:Verdana, Arial, Helvetica, sans-serif;font-weight:bold;}
.d2{width:100%;height:209px;overflow:hidden;}
.num_list{position:absolute;width:100%;left:0px;bottom:-1px;background-color:#000000;color:#FFFFFF;font-size:12px;padding:4px 0px;height:20px;overflow:hidden;z-index:1000;}
.num_list span{display:inline-block;height:16px;padding-left:6px;}
img{border:0px;}
ul{display:none;}
.button{position:absolute; z-index:1003; right:0px; bottom:2px; font-size:13px; font-weight:bold; font-family:Arial, Helvetica, sans-serif;}
.b1,.b2{background-color:#666666;display:block;float:left;padding:2px 6px;margin-right:3px;color:#FFFFFF;text-decoration:none;cursor:pointer;}
.b2{color:#FFCC33;background-color:#FF6633;}
</style>
<script language="javascript" type="text/javascript">
var s=function(){
var interv=2000; //切换时间
var interv2=10; //速速
var opac1=80; //文字背景透明度
var source="fade_focus" //焦点轮换容器id
function getTag(tag,obj){if(obj==null){return document.getElementsByTagName(tag)}else{return obj.getElementsByTagName(tag)}}
function getid(id){return document.getElementById(id)};
var opac=0,j=0,t=63,num=-2,scton=0,timer,timer2,timer3;
var id=getid(source);
id.removeChild(getTag("div",id)[0]);
var li=getTag("li",id);
var div=document.createElement("div");
var title=document.createElement("div");
var span=document.createElement("span");
var button=document.createElement("div");
var left=document.createElement("div");
var right=document.createElement("div");
button.className="button";
for(var i=0;i<li.length;i++){
var a=document.createElement("a");
a.innerHTML=i+1;
a.οnclick=function(){clearTimeout(timer);clearTimeout(timer2);clearTimeout(timer3);j=parseInt(this.innerHTML)-2;t=63;slide();};
a.className="b1";
a.οnmοuseοver=function(){this.className="b2"};
a.οnmοuseοut=function(){this.className="b1";sc(j)};
button.appendChild(a);
}
//控制透明度
function alpha(obj,n){if(document.all){obj.style.filter="alpha(opacity="+n+")";}else{obj.style.opacity=(n/100);}}
//控制焦点按钮
function sc(n){for(var i=0;i<li.length;i++){button.childNodes[i].className="b1"};button.childNodes[n].className="b2";}
title.className="num_list";
title.appendChild(span);
alpha(title,opac1);
id.className="d1";
div.className="d2";
left.className="left";
right.className="right";
id.appendChild(div);
id.appendChild(left);
id.appendChild(right);
id.appendChild(title);
id.appendChild(button);
//滑动图片
var slide=function(){
var im=-222;
var k=21;
if(j<li.length-1){j++}else{j=0};
change_dis(1);
sc(j);
left.style.backgroundImage="url("+getTag("img",li[j])[0].src+")";
right.style.backgroundImage="url("+getTag("img",li[j])[0].src+")";
function run(){
if(k>1){k--};
im+=k;
if(im>0){im=0};
left.style.left=String(im)+"px";
right.style.right=String(im)+"px";
if(im<0){timer=setTimeout(run,interv2)}else{span.innerHTML=getTag("img",li[j])[0].alt;scrolltxt();change_dis();timer2=setTimeout(slide,interv)}
}
run();
}
var change_dis=function(n){if(n>0){left.style.display="block";right.style.display="block";}else{left.style.display="none";right.style.display="none";div.innerHTML=li[j].innerHTML;}}
var scrolltxt=function(){t+=num;span.style.marginTop=t+"px";if(num<0&&t>3){timer3=setTimeout(scrolltxt,interv2)}else{t=63}};
slide();
}
//初始化
window.οnlοad=s;
</script>
</head>
<body>
<div id="fade_focus">
<div class="loading">Loading...<br /><img src="/jscss/demoimg/loading.gif" /></div>
<ul>
<li><img src="/jscss/demoimg/wall1.jpg" alt="图片1的说明" /></li>
<li><img src="/jscss/demoimg/wall2.jpg" alt="图片2的说明" /></li>
<li><img src="/jscss/demoimg/wall3.jpg" alt="图片3的说明" /></li>
<li><img src="/jscss/demoimg/wall4.jpg" alt="图片4的说明" /></li>
</ul>
</div>
</body>
</html> 来源： 点击打开链接
（4）来自百度的图片切换特效
<html>
<head>
<title>来自百度的图片切换特效</title>
</head>
<body>
<script>
var links = new Array();
links[1] = "#";
links[2] = "#";
links[3] = "#";
links[4] = "#";
var imgs = new Array();
for(var n = 1; n <= 5; n++) imgs[n] = new Image();
imgs[1].src = "/jscss/demoimg/200902/tongji550.gif";
imgs[2].src = "/jscss/demoimg/200902/banner071031.jpg";
imgs[3].src = "/jscss/demoimg/200902/dataunion0711.jpg";
imgs[4].src = "/jscss/demoimg/200902/umaz13_550.jpg";
var tits = new Array();
tits[1] ="百度统计";
tits[2] = "联盟杯摄影师大赛";
tits[3] = "百度行业报告";
tits[4] = "联盟志";
var imgwidth = 550;//图片宽度
var imgheight = 134;//图片高度
var str = "<style type='text/css'>";
str += "#imgnv{display:none;position:absolute;bottom:-1px;right:0;height:16px;}#imgnv div{float:left;margin-right:1px;}";
str += "#imgnv div.on,#imgnv div.off{margin-bottom:1px;width:30px;height:15px;line-height:18px!important;line-height:15px;font-size:9px;text-align:center;cursor:pointer;cursor:hand}";
str += "#imgnv div.on{background:#CE0609;color:#FFF;font-weight:bold}";
str += "#imgnv div.off{background:#323232;color:#FFF;text-decoration:none}";
str += "#titnv{margin-top:3px;color:#000;text-align:center;display:none;}";
str += "</style>";
str += "<div style='position:relative'>";
str += "<div><a id='dlink' href='" + links[1] + "' target='_blank'><img id='dimg' src='" + imgs[1].src + "' border='0' width='" + imgwidth + "' height='"+imgheight+"' style='filter:Alpha(opacity=100)' οnmοuseοver='Pause(true)' οnmοuseοut='Pause(false)'></a></div>";
//修改点1：循环添加内层div内容以增加个数
str += "<div id='imgnv'><div id='it1' class='on' οnmοuseοver='ImgSwitch(1, true)' οnmοuseοut='Pause(false)'>1</div><div id='it2' class='off' οnmοuseοver='ImgSwitch(2, true)' οnmοuseοut='Pause(false)'>2</div><div id='it3' class='on' οnmοuseοver='ImgSwitch(3, true)' οnmοuseοut='Pause(false)'>3</div><div id='it4' class='off' οnmοuseοver='ImgSwitch(4, true)' οnmοuseοut='Pause(false)'>4</div></div>";
str += "<div id='titnv'><b>" + tits[1] + "</b></div>";
str += "</div>";
document.write(str);
var oi = document.getElementById("dimg");
var pause = false;
var curid = 1;
var lastid = 1;
var sw = 1;
var opacity = 100;
var speed = 15;
var delay = (document.all)? 400:700;
function SetAlpha(){
if(document.all){
if(oi.filters && oi.filters.Alpha) oi.filters.Alpha.opacity = opacity;
}else{
oi.style.MozOpacity = ((opacity >= 100)? 99:opacity) / 100;
}
}
function ImgSwitch(id, p){
if(p){
pause = true;
opacity = 100;
SetAlpha();
}
oi.src = imgs[id].src;
document.getElementById("dlink").href = links[id];
document.getElementById("it" + lastid).className = "off";
document.getElementById("it" + id).className = "on";
document.getElementById("titnv").innerHTML = "<b>" + tits[id] + "</b>";
curid = lastid = id;
}
function ScrollImg(){
if(pause && opacity >= 100) return;
if(sw == 0){
opacity += 2;
if(opacity > delay){ opacity = 100; sw = 1; }
}
if(sw == 1){
opacity -= 3;
if(opacity < 10){ opacity = 10; sw = 3; }
}
SetAlpha();
if(sw != 3) return;
sw = 0;
curid++;
//修改点2：这里的4也是个数
if(curid > 4) curid = 1;
ImgSwitch(curid, false);
}
function Pause(s){
pause = s;
}
function StartScroll(){
setInterval(ScrollImg, speed);
}
function CheckLoad(){
if (imgs[1].complete == true && imgs[2].complete == true) {
clearInterval(checkid);
setTimeout(StartScroll, 2000);
}
}
var checkid = setInterval(CheckLoad, 10);
</script>
</body>
</html>来源： 点击打开链接
（5）图片切换效果
<!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" lang="gb2312">
<head>
<title>搜狐女人频道首页的JS图片切换效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
* { margin:0; padding:0; }
body {
margin:0;
color:#88c; background:#333;
}
img { margin:0; padding:0; border:0; }
#js_F {
position:relative;
top:10px; left:10px;
overflow:hidden;
width:395px; height:185px;
background:#33c;
}
.div_img {
position:absolute; top:0;
width:295px; height:185px;
cursor:pointer;
}
#div_img_0 { z-index:5; left:0; }
#div_img_1 { z-index:4; left:25px; }
#div_img_2 { z-index:3; left:50px; }
#div_img_3 { z-index:2; left:75px; }
#div_img_4 { z-index:1; left:100px; }
</style>
</head>
<body>
<div id="js_F">
<div id="div_img_0" class="div_img"><a href="#"><img src="/jscss/demoimg/200901/01.jpg" /></a><img src="/jscss/demoimg/200901/bg_showimg.gif" οnmοuseοver="jsf_mmove(0)" /></div>
<div id="div_img_1" class="div_img"><a href="#"><img src="/jscss/demoimg/200901/02.jpg" /></a><img src="/jscss/demoimg/200901/bg_showimg.gif" οnmοuseοver="jsf_mmove(1)" /></div>
<div id="div_img_2" class="div_img"><a href="#"><img src="/jscss/demoimg/200901/03.jpg" /></a><img src="/jscss/demoimg/200901/bg_showimg.gif" οnmοuseοver="jsf_mmove(2)" /></div>
<div id="div_img_3" class="div_img"><a href="#"><img src="/jscss/demoimg/200901/04.jpg" /></a><img src="/jscss/demoimg/200901/bg_showimg.gif" οnmοuseοver="jsf_mmove(3)" /></div>
<div id="div_img_4" class="div_img"><a href="#"><img src="/jscss/demoimg/200901/05.jpg" /></a><img src="/jscss/demoimg/200901/bg_showimg.gif" οnmοuseοver="jsf_mmove(4)" /></div>
</div>
<script type="text/javascript">
<!--///*--><![CDATA[/*><!--*/
var div_imgs = document.getElementById("js_F").getElementsByTagName("div");
var imgLeft = [0, 25, 50, 75, 100]; //5个图片的初始left值
var imgWidth = 270; //图片的宽度
var atf = [true, true, true, true, true]; //5个图片的位置：true为右边，false为左边
var speed1 = 10, speed2 = 2000, mo = 15; //速度
var sTo;
function jsf_move(n){
clearTimeout(sTo);
var thisL; //图片left值
if (atf[n]) { //要移动的图片在右边
//需移动的图片（包括该图片左边的所有图片）向左边移动)
for (var i=0; i<=n; i++) { //当前值-(图片宽度-(当前值-初始值))/速度
thisL = parseInt(getStyle(div_imgs[i],"left"));
div_imgs[i].style.left = thisL - Math.ceil((imgWidth-(imgLeft[i]-thisL))/mo) + "px";
if (i<n) atf[i] = false; //更改图片的位置状态
}
} else { //要移动的图片在左边
//需移动的图片（包括该图片右边的所有图片）向右边移动)
for (var i=4; i>=n; i--) { //当前值+(当前值-初始值)/速度
thisL = parseInt(getStyle(div_imgs[i],"left"));
div_imgs[i].style.left = thisL + Math.ceil(Math.abs(thisL-imgLeft[i])/mo) + "px";
if (i>n) atf[i] = true; //更改图片的位置状态
}
}
thisL = parseInt(getStyle(div_imgs[n],"left"));
if ((atf[n] && thisL>(imgLeft[n]-imgWidth)) || (!atf[n] && thisL<imgLeft[n])) {
//当前图片移动未结束，继续移动当前图片
sTo = setTimeout(function(){jsf_move(n);}, speed1);
} else {
//当前图片移动结束，准备移动下一张图片
if (n>=3 && atf[n]) {
atf[n] = false;
sTo = setTimeout(function(){jsf_move(n);}, speed2);
} else if (n==0 && !atf[n]) {
atf[n] = true;
sTo = setTimeout(function(){jsf_move(n);}, speed2);
} else if (atf[n]){
atf[n] = false;
sTo = setTimeout(function(){jsf_move(++n);}, speed2);
} else {
sTo = setTimeout(function(){jsf_move(--n);}, speed2);
}
}
}
//判断图片的位置
function jsf_mmove(n){
clearTimeout(sTo);
switch (n){
case 0 :
atf[0] = false;
jsf_move(0);
break;
case 1 :
case 2 :
case 3 :
if (atf[n-1]) {
sTo = setTimeout(function(){jsf_move(n-1);}, speed1);
} else if (atf[n]) {
atf[n-1] = true;
sTo = setTimeout(function(){jsf_move(n-1);}, speed1);
} else {
sTo = setTimeout(function(){jsf_move(n);}, speed1);
}
break;
case 4 :
atf = [false, false, false, true, true];
jsf_move(3);
break;
}
}
window.onload = function(){
sTo = setTimeout("jsf_move(0)",speed2);
}
function getStyle( elem, name ) {
if (elem.style[name]) { return elem.style[name]; }
else if (elem.currentStyle) { return elem.currentStyle[name]; }
else if (document.defaultView && document.defaultView.getComputedStyle) {
name = name.replace(/([A-Z])/g,"-$1");
name = name.toLowerCase();
var s = document.defaultView.getComputedStyle(elem,"");
return s && s.getPropertyValue(name);
}
else { return null; }
}
/*]]>*///-->
</script>
</body>
</html>来源： 点击打开链接
（6）jQ焦点图代码_jQuery图片切换效果(5个)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>jquery五幅焦点图片特效</title>
<script src="http://www.codefans.net/ajaxjs/jquery-1.7.2.min.js" type="text/javascript"></script>
<style>
*{margin:0;padding:0;border:none}
body{background:#CCCCCC;padding:20px}
.com{width:490px;height:170px;overflow:hidden;position:relative;background:black}
.com ul{width:3000px;font-size:0;}
.com ul li{vertical-align:bottom;height:100%;overflow:hidden;float:left;background:white url(/jscss/demoimg/201307/loading.gif) no-repeat center center;vertical-align:bottom;list-style:none;overflow:hidden}
.com ol{position:absolute;right:0;bottom:20px;;z-index:10;list-style:none;height:21px}
.com ol li{width:15px;background:white;border:1px solid #74A8ED;border-radius:10px;color:#74A8ED;cursor:pointer;float:left;font:12px Arial;height:15px;margin:2px 3px;text-align:center;}
.com ol li.on{height:19px;width:19px;background:#74A8ED;border:1px solid #EEEEEE;color:#FFFFFF;font-size:16px;font-weight:bold;line-height:19px;margin:0 3px;}
</style>
</head>
<body>
<div id="ppt" class="com">
<ul>
<li><a href="#"><img src="/jscss/demoimg/201307/1.png"></a></li>
<li><a href="#"><img src="/jscss/demoimg/201307/2.gif"></a></li>
<li><a href="#"><img src="/jscss/demoimg/201307/3.jpg"></a></li>
<li><a href="#"><img src="/jscss/demoimg/201307/4.jpg"></a></li>
</ul>
</div>
<hr/>
<div id="ppt5" class="com">
<ul>
<li><a href="#"><img src="/jscss/demoimg/201307/1.png"></a></li>
<li><a href="#"><img src="/jscss/demoimg/201307/2.gif"></a></li>
<li><a href="#"><img src="/jscss/demoimg/201307/3.jpg"></a></li>
<li><a href="#"><img src="/jscss/demoimg/201307/4.jpg"></a></li>
<li><a href="#"><img src="/jscss/demoimg/201307/2.gif"></a></li>
</ul>
</div>
<hr/>
<div id="ppt4" class="com">
<ul>
<li><a href="#"><img src="/jscss/demoimg/201307/1.png"></a></li>
<li><a href="#"><img src="/jscss/demoimg/201307/2.gif"></a></li>
<li><a href="#"><img src="/jscss/demoimg/201307/3.jpg"></a></li>
<li><a href="#"><img src="/jscss/demoimg/201307/4.jpg"></a></li>
</ul>
</div>
<hr/>
<div id="ppt2" class="com">
<ul>
<li><a href="#"><img src="/jscss/demoimg/201307/1.png"></a></li>
<li><a href="#"><img src="/jscss/demoimg/201307/2.gif"></a></li>
<li><a href="#"><img src="/jscss/demoimg/201307/3.jpg"></a></li>
<li><a href="#"><img src="/jscss/demoimg/201307/4.jpg"></a></li>
<li><a href="#"><img src="/jscss/demoimg/201307/2.gif"></a></li>
</ul>
</div><hr/>
<div id="ppt3" class="com">
<ul>
<li><a href="#"><img src="/jscss/demoimg/201307/1.png"></a></li>
<li><a href="#"><img src="/jscss/demoimg/201307/2.gif"></a></li>
<li><a href="#"><img src="/jscss/demoimg/201307/3.jpg"></a></li>
<li><a href="#"><img src="/jscss/demoimg/201307/4.jpg"></a></li>
</ul>
</div><hr/>
</body>
<script>
(function(e){function t(e,t){this.$ele=t,this.set=e,this.WH=this.set.vertical?t.height():t.width(),this.lis=t.find("ul li"),this.idx=0,this.timer=null}e.fn.myPic=function(n){return e.fn.myPic.defaults={vertical:!1,button:!0,auto:!0,effect:"scroll",onMouse:"mouseover"},this.each(function(){var r=n?e.extend(e.fn.myPic.defaults,n):e.fn.myPic.defaults,i=new t(r,e(this));r.button&&i.generate(e(this)),r.auto&&i.auto()}),this},t.prototype={generate:function(t){var n=e("<ol></ol>").appendTo(t),r=this;e.each(this.lis,function(t,r){e("<li>"+(t+1)+"</li>").appendTo(n)}),this.olis=t.find("ol li"),this.olis.eq(0).attr("class","on");switch(this.set.effect){case"scroll":t.find("ul").css({position:"absolute",left:0,top:0}),this.set.vertical&&this.lis.css({"float":"none"});break;case"flip":case"fade":this.lis.css({position:"absolute",left:0,top:0,"float":"none"}).eq(0).css("zIndex","2");break;case"in":this.lis.css({display:"none"}).eq(0).css("display","block");break;default:}t.delegate("ol li",this.set.onMouse,function(){var $this=e(this);setTimeout(function(){r.start($this.index())},300),r.stop()}).delegate("ol li","mouseout",function(){r.auto()})},start:function(e){this.idx=e,this.idx!=this.from&&(this.effect(this),this.reset())},effect:function(t){var n=t.idx,r={};switch(t.set.effect){case"scroll":r[t.set.vertical?"top":"left"]=-(n*this.WH),this.$ele.find("ul").stop(!0,!0).animate(r),r=null;break;case"flip":this.lis.eq(n).css("zIndex",1),this.lis.eq(this.from||0).stop(!0,!0).css("opacity",.8).animate({left:-100,opacity:0},600,function(){e(this).css({zIndex:0,opacity:1,left:0}),t.lis.eq(n).css("zIndex","2")});break;case"fade":this.lis.eq(n).css("zIndex","1"),this.lis.eq(this.from||0).stop(!0,!0).fadeOut(500,function(){e(this).css({zIndex:0,display:"block"}),t.lis.eq(n).css("zIndex","2")});break;case"in":this.lis.eq(this.from||0).stop(!0,!0).fadeOut(400,function(){t.lis.eq(n).stop(!0,!0).fadeIn(700)});default:}},reset:function(){this.olis.eq(this.from||0).attr("class",""),this.olis.eq(this.idx).attr("class","on"),this.from=this.idx||0},stop:function(){var e=this;clearInterval(e.timer)},auto:function(){var e=this,t=this.lis.length;this.timer=setInterval(function(){e.idx=e.idx>=t-1?0:++e.idx,e.start(e.idx)},3e3)}}})(jQuery);
$('#ppt').myPic({
vertical:true
});
$('#ppt2').myPic({
effect:"in"
});
$('#ppt3').myPic({
effect:"fade"
});
$('#ppt4').myPic({
effect:"flip"
});
$('#ppt5').myPic();
</script>
</html>来源： 点击打开链接
（7）Js图片切换
<!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/css">
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{width:740px;margin:10px auto;}
#container{position:relative;height:232px;background:#FCFCFC;}
#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;}
#container .item .pic{float:left;width:210px;height:200px;display:inline;margin:15px;}
#container .item .pic img{width:210px;height:200px;vertical-align:top;}
#container .item .txt{float:left;width:250px;margin-top:12px;}
#container .item .txt dt{font-size:14px;font-weight:700;}
#container .item .txt .info{color:#999;}
#container .item .txt dd{height:24px;line-height:24px;}
#container .item .txt dd span{float:left;}
#container .item .txt .star{position:relative;float:left;height:12px;width:69px;margin:6px 0 0 5px;}
#container .item .txt .star .star_red{position:absolute;top:0;left:0;height:12px;width:69px;z-index:2;background:url(/jscss/demoimg/201109/star.png) repeat-x scroll left top transparent;}
#container .item .txt .star .star_grey{background:url(/jscss/demoimg/201109/star.png) repeat-x scroll left -15px transparent;height:12px;width:69px;}
#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{width:232px;height:99px;margin-top:10px;background:#FFF;border:1px solid #EAEAEA;}
#container .item .txt .comment h3{font-size:12px;font-weight:400;height:24px;line-height:24px;border-bottom:1px solid #E9E9E9;padding:0 10px;}
#container .item .txt .comment .comment_list{width:220px;height:60px;overflow:hidden;margin:8px 0 0 10px;}
#container .item .txt .comment .comment_list ul{width:220px;}
#container .item .txt .comment .comment_list ul li{height:20px;line-height:20px;white-space:nowrap;}
#container .item .txt .comment .comment_list ul li b{color:#999;font-weight:400;}
#control{height:37px;text-align:center;background:url(/jscss/demoimg/201109/bg.png) no-repeat;}
#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;}
#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="/jscss/demoimg/201109/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="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="javascript:;"><img src="/jscss/demoimg/201109/2.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="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="javascript:;"><img src="/jscss/demoimg/201109/3.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="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="javascript:;"><img src="/jscss/demoimg/201109/4.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="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="javascript:;"><img src="/jscss/demoimg/201109/5.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="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="javascript:;"><img src="/jscss/demoimg/201109/6.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="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="javascript:;"><img src="/jscss/demoimg/201109/7.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="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="javascript:;"><img src="/jscss/demoimg/201109/8.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="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>来源： 点击打开链接
484
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
