zoukankan      html  css  js  c++  java
  • 滑动切换图片效果【左右】

    <!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;
    435px;
    height:auto;
    overflow:hidden;
    }
    .content_bottom_left_inner_right_hdzq_title{
    background-image:url(/works/the9/GE_V5/images/main_11.jpg);
    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);
    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;
    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;
    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;
    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{
    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;
    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;
    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;
    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;
    435px;
    height:6px;
    overflow:hidden;
    }
    .content_bottom_left_inner_right_hdzq_dc{
    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;
    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;
    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{
    356px;
    padding:6px 11px;
    height:auto;
    overflow:hidden;
    float:left;
    }
    .slider_img_container{
    356px;
    margin:0px auto;
    overflow:hidden;
    }
    .slide_img{
    margin-left:-87px;
    white-space:nowrap;
    }
    .slide_img div{
    display:none;
    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>
    
  • 相关阅读:
    目前最大的IPV6安全风险有哪些?
    PHP中exec、system等函数调用linux命令问题
    ubuntu下LAMP环境安装
    Ubuntu配置Apache虚拟主机
    XML和YAML的区别与使用方法
    使用CURL访问站点的时候出现403的解决办法
    IPv6安装及使用手册
    SuperSlide2.1-滚动
    HTML常用手册
    关于Ajax参数的思考
  • 原文地址:https://www.cnblogs.com/tangge/p/1894931.html
Copyright © 2011-2022 走看看