css 图片切换模版

男娘i 2022-09-18 10:55 121阅读 0赞

### （1）淘宝网4种JS图片切换幻灯焦点图代码 ###

![Center][]

来源： [点击打开链接][Link 1]

### （2）经典图片切换 ###

![Center 1][]

<!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>

来源： [点击打开链接][Link 2]

### （3）从两侧向中间拼合的JavaScript图片切换效果 ###

![Center 2][]

来源： [点击打开链接][Link 3]

### （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>

来源： [点击打开链接][Link 4]

### （5）图片切换效果 ###

![Center 3][]

<!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[/*>
    </script>
    </body>
    </html>

来源： [点击打开链接][Link 5]

### （6）jQ焦点图代码\_jQuery图片切换效果(5个) ###

![Center 4][]

<!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>

来源： [点击打开链接][Link 6]

### （7）Js图片切换 ###

![Center 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">
    <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>

来源： [点击打开链接][Link 7]

[Center]: /images/20220828/c6aa3c76a7ad4de78b0c4c8b1537d0ba.png
[Link 1]: http://www.codefans.net/jscss/code/2756.shtml
[Center 1]: /images/20220828/3c5a11a97d754ac894989d8f504a082d.png
[Link 2]: http://www.codefans.net/jscss/code/1239.shtml
[Center 2]: /images/20220828/d1416253e22246b2a2c6e8ae26698177.png
[Link 3]: http://www.codefans.net/jscss/code/1237.shtml
[Link 4]: http://www.codefans.net/jscss/code/388.shtml
[Center 3]: /images/20220828/2f7d8dd4ec7f40adbb8d62e35a5c9790.png
[Link 5]: http://www.codefans.net/jscss/code/122.shtml
[Center 4]: /images/20220828/56a99c2ad87646f4a98b6a3deacf3a93.png
[Link 6]: http://www.codefans.net/jscss/code/4338.shtml
[Center 5]: /images/20220828/17a490761f03434fbbc5755e15a4d633.png
[Link 7]: http://www.codefans.net/jscss/code/2755.shtml