滑动切换图片效果【左右】

<!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" />
<style type="text/css" media="all">
body{
margin:0px;
padding:0px;
font-size:12px;
font-family:"宋体", Arial, Helvetica, sans-serif;
}
img{
border:0px;
}
a{
cursor:pointer;
}
.clear{
clear:both;
}
.content_bottom_left_inner_right_hdzq_bg{
margin:0px auto;
margin-top:2px;
margin-bottom:6px;
width:435px;
height:auto;
overflow:hidden;
}
.content_bottom_left_inner_right_hdzq_title{
background-image:url(/works/the9/GE_V5/images/main_11.jpg);
width:435px;
height:48px;
overflow:hidden;
text-align:right;
}
.content_bottom_left_inner_right_wjyz_title{
background-image:url(/works/the9/GE_V5/images/main_39.jpg);
width:422px;
height:41px;
overflow:hidden;
text-align:right;
padding:11px 13px 0px 0px;
}
.content_bottom_left_inner_right_wjyz_title a{
background-repeat:no-repeat;
width:60px;
height:18px;
overflow:hidden;
display:inline-block;
color:#FFFFFF;
text-align:left;
padding:3px 0px 0px 12px;
text-decoration:none;
}
.a_l{
background-image:url(/works/the9/GE_V5/images/dot_bg.jpg);
background-position:left -40px;
}
.a_r{
background-image:url(/works/the9/GE_V5/images/dot_bg.jpg);
background-position:left -64px;
}
.content_bottom_left_inner_right_wjyz_content{
padding:0px 0px 0px 22px;
height:267px;
overflow:hidden;
}
.content_bottom_left_inner_right_wjyz_content_tabs{
background-image:url(/works/the9/GE_V5/images/main_46.jpg);
background-position:center bottom;
background-repeat:no-repeat;
width:384px;
height:auto;
overflow:hidden;
padding:0px 0px 1px 0px;
}
.content_bottom_left_inner_right_wjyz_content_tabs a:link,.content_bottom_left_inner_right_wjyz_content_tabs a:visited{
color:#FFFFFF;
text-decoration:none;
}
.content_bottom_left_inner_right_wjyz_content_tabs a:hover{
color:#F7E06E;
text-decoration:none;
}
.content_bottom_left_inner_right_wjyz_content_list{
padding:9px 0px 0px 0px;
height:auto;
overflow:hidden;
}
.content_bottom_left_inner_right_wjyz_content_list a:link,.content_bottom_left_inner_right_wjyz_content_list a:visited{
color:#4D4642;
text-decoration:none;
}
.content_bottom_left_inner_right_wjyz_content_list a:hover{
color:#A71D32;
text-decoration:underline;
}
.content_bottom_left_inner_right_wjyz_content_list_banner{
padding:0px 0px 0px 5px;
width:164px;
height:auto;
overflow:hidden;
float:left;
}
.content_bottom_left_inner_right_wjyz_content_list_banner img{
margin-top:12px;
}
.content_bottom_left_inner_right_wjyz_content_list ul{
width:220px;
margin:0px;
padding:0px;
height:auto;
overflow:hidden;
list-style:none;
color:#4D4642;
float:left;
}
.content_bottom_left_inner_right_wjyz_content_list li{
background-image:url(/works/the9/GE_V5/images/dot3.jpg);
background-position:left 8px;
background-repeat:no-repeat;
padding:6px 0px 0px 20px;
}
.w_t_c{
background-image:url(/works/the9/GE_V5/images/main_44.jpg);
background-position:left top;
width:58px;
height:17px;
display:inline-block;
overflow:hidden;
margin-right:3px;
padding:4px 0px 0px 15px;
color:#FFFFFF;
}
.w_t_a{
background-image:url(/works/the9/GE_V5/images/main_44.jpg);
background-position:right top;
width:58px;
height:17px;
display:inline-block;
overflow:hidden;
margin-right:3px;
padding:4px 0px 0px 15px;
color:#FFFFFF;
}
.content_bottom_left_inner_right_hdzq_bottom{
margin-top:6px;
background-image:url(/works/the9/GE_V5/images/main_35.jpg);
background-position:right top;
background-repeat:no-repeat;
width:435px;
height:6px;
overflow:hidden;
}
.content_bottom_left_inner_right_hdzq_bottom2{
margin-top:15px;
background-image:url(/works/the9/GE_V5/images/main_35.jpg);
background-position:right top;
background-repeat:no-repeat;
width:435px;
height:6px;
overflow:hidden;
}
.content_bottom_left_inner_right_hdzq_dc{
width:391px;
overflow:hidden;
margin:0px auto;
background-image:url(/works/the9/GE_V5/images/slide_top.jpg);
height:9px;
}
.content_bottom_left_inner_right_hdzq_dc_bg{
background-image:url(/works/the9/GE_V5/images/slide_bg.jpg);
background-position:center top;
background-repeat:repeat-y;
height:auto;
overflow:hidden;
width:411px;
margin:0px auto;
}
.content_bottom_left_inner_right_hdzq_dc_bg_inner{
background-image:url(/works/the9/GE_V5/images/slide_bottom.jpg);
background-position:center bottom;
background-repeat:no-repeat;
height:201px;
overflow:hidden;
width:411px;
padding:0px 0px 6px 0px;
}
.content_bottom_left_inner_right_hdzq_dc_arrow{
padding:50px 0px 0px 0px;
float:left;
height:auto;
overflow:hidden;
}
.ar_img{
cursor:pointer;
}
.ar_img2{
cursor:default;
}
.content_bottom_left_inner_right_hdzq_dc_content{
width:356px;
padding:6px 11px;
height:auto;
overflow:hidden;
float:left;
}
.slider_img_container{
width:356px;
margin:0px auto;
overflow:hidden;
}
.slide_img{
margin-left:-87px;
white-space:nowrap;
}
.slide_img div{
display:none;
width:0px;
height:0px;
overflow:hidden;
}
.slide_img img{
border:#ECECEC 2px solid;
cursor:pointer;
}
.content_bottom_left_inner_right_hdzq_dc_content_line{
border-bottom:#988A85 1px dotted;
text-align:center;
font-size:14px;
font-weight:bold;
color:#BC3232;
padding:6px 0px;
}
* +html .content_bottom_left_inner_right_hdzq_dc_content_line{
padding:7px 0px;
}
* html .content_bottom_left_inner_right_hdzq_dc_content_line{
padding:7px 0px;
}
.content_bottom_left_inner_right_hdzq_dc_content_txt{
background-image:url(/works/the9/GE_V5/images/dot4.jpg);
background-position:left 6px;
background-repeat:no-repeat;
padding:4px 0px 0px 19px;
line-height:18px;
color:#3B1200;
}
</style>
<script language="javascript" type="text/javascript">
var xp=-87,s,xf,j=8,lr=1,dir,timer,as=0,asb=1,timer2,total,con,ints=0,ttimer=0;
var txt=new Array();
function slide(n){
		clearTimeout(timer2);
	    ints=0;
    if(n==0){
		document.getElementById("arl").className="ar_img2";
		}else if(n==total){
			document.getElementById("arr").className="ar_img2";
			}else if(n<0){
				n=0;
				return false;
				}else if(n>total){
					n=total;
					return false;
					}else{
				 document.getElementById("arr").className="ar_img";
				 document.getElementById("arl").className="ar_img";
					}
	s=document.getElementById("slimg"),xf=-(91+178*(n-1)+(n-1)*6);
	txt=(con[n].getElementsByTagName("div")[0].innerHTML).split("|");
	getid("ititle").innerHTML=txt[0];	
	getid("itime").innerHTML=txt[1];
	getid("icon").innerHTML=txt[2];
	if(lr<n){
		dir=1;
		}else if(lr>n){
			dir=0;
			}else{
				dir=2;
				}
	as=lr=n;
	animation();
	return true;
	}
function animation(){
	j++;	
	if(dir==1){
		xp-=j;
		timer=setTimeout("animation()",20);
		s.style.marginLeft=xp+"px";
		if(xp<=xf){
			s.style.marginLeft=xf+"px";
			xp=xf;
			clearTimeout(timer);
			j=8;
			}
		}
	if(dir==0){
		xp+=j;	
		timer=setTimeout("animation()",20);
		s.style.marginLeft=xp+"px";
		if(xp>=xf){
			s.style.marginLeft=xf+"px";
			xp=xf;
			clearTimeout(timer);
			j=8;
			}
		}
}
function sli(d){
	clearTimeout(timer2);
	ints=0;
	if(d==1){
		slide(lr-1);
		}else{
			slide(lr+1);
			}
	}
function start_slide(){
	total=document.getElementById("slimg").getElementsByTagName("span").length-1;
	con=document.getElementById("slimg").getElementsByTagName("span");
	setTimeout("start_slide()",10000);
	if(ints==0){ ntval=setInterval("auto_slide()",7000);}
	}
function auto_slide(){
	if(ttimer==0){
		start_slide();
		ttimer=1;
		}
	if(ints==0){
		clearInterval(ntval);
		ints=1;
		}
    as+=asb;
	slide(as);
	if(as<=0){
		asb=1;
		as=0;
		}else if(as>=total){
			asb=-1;
			as=total;
			}
	timer2=setTimeout("auto_slide()",4000);
	}
function getid(id){
	return document.getElementById(id);
	}
</script>
<title>滑动切换图片</title>
</head>
<body onload="auto_slide()">
<div class="content_bottom_left_inner_right_hdzq_bg">
  <div class="content_bottom_left_inner_right_hdzq_dc"></div>
  <div class="content_bottom_left_inner_right_hdzq_dc_bg">
    <div class="content_bottom_left_inner_right_hdzq_dc_bg_inner">
      <div class="content_bottom_left_inner_right_hdzq_dc_arrow"><img src="/works/the9/GE_V5/images/arrow_left.jpg" width="16" height="71" class="ar_img" onclick="sli(1)" id="arl"/></div>
      <div class="content_bottom_left_inner_right_hdzq_dc_content">
        <div class="slider_img_container">
          <div class="slide_img" id="slimg"> <span><img src="/works/the9/GE_V5/images/slide_img0.jpg" width="174" height="74" onclick="slide(0)" title="图片1"/>
            <div>1-全民有7调查|活动时间:淡淡的-10月30日|活动奖励:DELL哦本电脑 点卡等</div>
            </span> <span><img src="/works/the9/GE_V5/images/slide_img1.jpg" width="174" height="74" onclick="slide(1)" title="图片2"/>
            <div>2-全22奖、|活动时间:55510月30日|活地方励:电脑 点卡等</div>
            </span> <span><img src="/works/the9/GE_V5/images/slide_img2.jpg" width="174" height="74" onclick="slide(2)" title="图片3"/>
            <div>3-全民有奖|活fg间:9月545日|活哦励:DELL笔记本电脑 点卡等活哦励:DELL笔记本电脑 点卡等活哦励:DELL笔记本电脑 点卡等点卡等活哦励</div>
            </span> <span><img src="/works/the9/GE_V5/images/slide_img0.jpg" width="174" height="74" onclick="slide(3)" title="图片4"/>
            <div>4-55有奖大调查|活动时间:9月1日-10月30日|活:DELL笔记本电脑 点卡等</div>
            </span> <span><img src="/works/the9/GE_V5/images/slide_img1.jpg" width="174" height="74" onclick="slide(4)" title="图片5"/>
            <div>5-全民有破译|稍等时间:9月1日-10月30日|活动等等励:DEL本电脑 点卡等</div>
            </span> <span><img src="/works/the9/GE_V5/images/slide_img2.jpg" width="174" height="74" onclick="slide(5)" title="图片6"/>
            <div>6-全地方调查|活而间:9月搜索10而日|活励:DELL笔记脑 点卡等</div>
            </span> </div>
        </div>
        <div class="content_bottom_left_inner_right_hdzq_dc_content_line" id="ititle">全民有奖调查</div>
        <div class="content_bottom_left_inner_right_hdzq_dc_content_txt" id="itime">活动时间:9月1日-10月30日</div>
        <div class="content_bottom_left_inner_right_hdzq_dc_content_txt" id="icon">活动奖励:DELL笔记本电脑 点卡等等等等ELL笔记本电脑点卡等等等等...</div>
      </div>
      <div class="content_bottom_left_inner_right_hdzq_dc_arrow"><img src="/works/the9/GE_V5/images/arrow_right.jpg" width="16" height="71" class="ar_img" onclick="sli(2)" id="arr"/></div>
    </div>
  </div>
</div>
</body>
</html>
posted @ 2010-12-02 22:43  【唐】三三  阅读(2013)  评论(0编辑  收藏  举报