滑动切换图片效果【左右】
2010-12-02 22:43
393 查看
<!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
.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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- android viewflipper 左右滑动切换显示图片效果
- h5用swiper结合angularjs实现手机浏览器左右滑动切换图片的效果
- Android开发之使用ViewPager实现图片左右滑动切换效果
- 微信小程序左右滑动切换图片酷炫效果（附效果）
- 微信小程序左右滑动切换图片酷炫效果（附效果）
- 使用viewpager嵌套实现上下左右滑动切换图片（IOS双向滚动翻页效果相同）
- 使用viewpager嵌套实现上下左右滑动切换图片（IOS双向滚动翻页效果相同）
- 模仿优酷Android客户端图片左右滑动（自动切换）效果
- h5手机浏览器左右滑动切换图片效果
- Android客户端图片左右滑动（自动切换）
- 手机端图片左右滑动效果实现
- 使用 StoryBoard 实现左右按钮切换图片的浏览效果
- jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
- Android：使用ViewPager实现左右滑动切换图片 (简单版)
- js图片库（无缝循环切换，左右移动效果）
- 门户网常用的文字滑动使图片切换效果
- 页面图片浮动左右滑动效果实现案例
- JS+Flash图片轮换/切换--上下滑动效果
- Android-使用ViewGroup实现左右滑动切换界面以及界面裂开的效果
- jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结