带箭头的图片上下切换效果

最新推荐文章于 2024-05-07 21:52:18 发布
最新推荐文章于 2024-05-07 21:52:18 发布
阅读量1.6k 收藏
点赞数
分类专栏： DV图片展示代码 文章标签： function javascript iframe div 正则表达式 class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wh0920/article/details/3725513
版权
 <!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" />
<meta name="Copyright" content="SooJs 网页特效搜索 经典广告 Flash焦点图片切换 http://www.soojs.com/" />
<meta name="description" content="SooJs_收集最新的javascript效果，更新最快的javasctipt效果，做最好的javascript搜索引擎!" />
<meta content="SooJs搜索,javascript搜索,时间日期,页面导航,页面背景,按钮特效,鼠标事件,Cookies脚本,文本特效,状态栏,代码生成/编辑器,导航菜单类,页面搜索类,密码类,技巧类,游戏类,黑客性质,窗口特效,菜单特效,计数转换,警告对话,链接特效,函数解说,表单特效,下拉列表框特效,控件,信息检测,经典广告,表格效果,页面元素美化,键盘效果,文本输入框效果,复选框效果,正则表达式,拖动类,AJAX" name="keywords" />
<title>带箭头的图片上下切换(框架)</title>
<style type="text/css">
TD {
    FONT-SIZE: 12px;BORDER-RIGHT: medium none; PADDING-RIGHT: 0px; BORDER-TOP: medium none; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: medium none; PADDING-TOP: 0px; BORDER-BOTTOM: medium none
}
.NUM1 {
    BACKGROUND-POSITION: left 50%; PADDING-LEFT: 10px; BACKGROUND-IMAGE: url('http://www.soojs.com/upload/2007/8/3/03_scrollad_2.gif'); COLOR: #006; BACKGROUND-REPEAT: no-repeat
}
.NUM2 {
    BACKGROUND-POSITION: left 50%; PADDING-LEFT: 10px; BACKGROUND-IMAGE: url('http://www.soojs.com/upload/2007/8/3/03_scrollad_3.gif'); COLOR: #fff; BACKGROUND-REPEAT: no-repeat
}
</style>
</head>
<body>
<div id=sudsclickstreamdiv
style="Z-INDEX: 1; LEFT: 100px; VISIBILITY: visible; WIDTH: 80px; POSITION: absolute; TOP: -300px"></div>
<table width=750 align="center" cellpadding=0 cellspacing=0>
  <tbody>
    <tr>
      <td
    style="BORDER-RIGHT: #cccccc 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #cccccc 1px solid; PADDING-LEFT: 0px; PADDING-BOTTOM: 5px; BORDER-LEFT: #cccccc 1px solid; PADDING-TOP: 5px; BORDER-BOTTOM: medium none"
    width=750 bgcolor=#e6e6e6>
        <div style="WIDTH: 0px; POSITION: relative; HEIGHT: 0px">
          <div style="Z-INDEX: 10; LEFT: 748px; POSITION: absolute; TOP: -6px">
            <table cellspacing=0 cellpadding=0 width=30>
              <tbody>
                <tr>
                  <td width=30 height=4><img height=4 alt=""
            src="images/digi_gb_lp_008.gif" width=30></td>
                </tr>
                <tr>
                  <td background=images/digi_gb_lp_009.gif height=207>
                    <table cellspacing=0>
                      <tbody>
                        <tr>
                          <td style="PADDING-LEFT: 1px" width=24 height=29>
       <img id=upbtn
                  style="CURSOR: pointer" οnfοcus=this.blur()
                  onClick=slideup();clearInterval(interval01); height=28 alt=UP
                  src=" http://www.soojs.com/upload/2007/8/3/03_scrollad_1.gif" width=24></td>
                        </tr>
                        <tr>
                          <td height=2></td>
                        </tr>
                        <tr>
                          <td class=NUM2 id=led1 height=19>1</td>
                        </tr>
                        <tr>
                          <td height=2></td>
                        </tr>
                        <tr>
                          <td class=NUM1 id=led2 height=19>2</td>
                        </tr>
                        <tr>
                          <td height=2></td>
                        </tr>
                        <tr>
                          <td class=NUM1 id=led3 height=19>3</td>
                        </tr>
                        <tr>
                          <td height=3></td>
                        </tr>
                        <tr>
                          <td style="PADDING-LEFT: 1px" height=29>
       <img id=downbtn
                  style="CURSOR: pointer" οnfοcus=this.blur()
                  onClick=slidedown();clearInterval(interval01); height=29
                  alt=DOWN src=" http://www.soojs.com/upload/2007/8/3/03_scrollad_4.gif"
                width=24></td>
                        </tr>
                      </tbody>
                  </table></td>
                </tr>
                <tr>
                  <td height=6><img height=6 alt=""
            src="images/digi_gb_lp_010.gif"
      width=30></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div id=main onMouseOver=clearInterval(interval01);
      style="OVERFLOW: hidden; WIDTH: 748px; POSITION: relative; HEIGHT: 237px"
      onMouseOut=iniautoslide(); nowrap>
          <div id=f1
      style="Z-INDEX: 10; LEFT: 0px; WIDTH: 748px; POSITION: absolute; TOP: 0px; HEIGHT: 237px">
            <iframe
      name=frame1 marginwidth=0 marginheight=0 src=" http://www.soojs.com/upload/2007/8/3/01.htm"
      frameborder=0 noresize width=750 scrolling=no οnlοad=checkdamie(1)
      height=250></iframe>
          </div>
          <div id=f2
      style="DISPLAY: none; Z-INDEX: 10; LEFT: 0px; WIDTH: 748px; POSITION: absolute; TOP: 237px; HEIGHT: 237px">
            <iframe
      name=frame1 marginwidth=0 marginheight=0 src=" http://www.soojs.com/upload/2007/8/3/02.htm"
      frameborder=0 noresize width=750 scrolling=no οnlοad=checkdamie(2)
      height=250></iframe>
          </div>
          <div id=f3
      style="DISPLAY: none; Z-INDEX: 10; LEFT: 0px; WIDTH: 748px; POSITION: absolute; TOP: 474px; HEIGHT: 237px">
            <iframe
      name=frame1 marginwidth=0 marginheight=0 src=" http://www.soojs.com/upload/2007/8/3/03.htm"
      frameborder=0 noresize width=750 scrolling=no οnlοad=checkdamie(3)
      height=250></iframe>
          </div>
        </div>
</table>
<SCRIPT language=JavaScript>
<!--
var currentF=1;
//document.getElementById("upbtn").style.display="none";
var mainobj = document.getElementById("main");
var frameheight = 237;
var scrolling=0;
var speed = 20;
var checkloaded=new Array();
for(i=1;i<=3;i++){
checkloaded[i]=0;
}
function checkdamie(n){
    checkloaded[n]=1;
    //alert(checkloaded[n])
}
function scrolldown(f){
    switch (f){
    case 2:
    if (mainobj.scrollTop>=frameheight){
        clearInterval(inter);
        mainobj.scrollTop=frameheight;
        scrolling=0;
        }
    else{mainobj.scrollTop+=speed;}
    break;
    case 3:
    if (mainobj.scrollTop>=frameheight*2){
        mainobj.scrollTop=frameheight*2;
        clearInterval(inter);
        scrolling=0;
        }
    else{mainobj.scrollTop+=speed;}
    break;
    }
}
function scrollup(f){
    switch (f){
    case 1:
    if (mainobj.scrollTop<=0){
        clearInterval(inter1);
        mainobj.scrollTop=0;
        scrolling=0;
        }
    else{
    mainobj.scrollTop-=speed;
    }
    break;
    case 2:
    if (mainobj.scrollTop<=frameheight){
        mainobj.scrollTop=frameheight;
        clearInterval(inter1);
        scrolling=0;
        }
    else{
    mainobj.scrollTop-=speed;
    }
    break;
    }
}
function slidedown(){
if (scrolling==0){
    scrolling=1;
    currentF++;if (currentF>checkloaded.length-1)currentF=checkloaded.length-1
    obj=eval("document.getElementById('f"+currentF+"')");
    obj.style.display="block";
    inter=eval("setInterval('scrolldown("+currentF+")',5)");
    document.getElementById("upbtn").style.display="";
    for (i=1;i<=3;i++){
        eval("document.getElementById('led"+i+"').className='NUM1'");
    }
    eval("document.getElementById('led"+currentF+"').className='NUM2'");
}
}
function slideup(){
if (scrolling==0){
    scrolling=1;
    currentF--;if (currentF<1)currentF=1
    obj=eval("document.getElementById('f"+currentF+"')");
    obj.style.display="block";
    inter1=eval("setInterval('scrollup("+currentF+")',5)");
    document.getElementById("downbtn").style.display="";
    for (i=1;i<=3;i++){
        eval("document.getElementById('led"+i+"').className='NUM1'");
    }
    eval("document.getElementById('led"+currentF+"').className='NUM2'");
}
}
var direction = "down";
var interval01;
var autotime = 3000;
function autoslide(){
    if(direction == "down"){
        if (currentF == 2){
         direction = "up";
        }
    slidedown();
    //alert(direction);
    }
    if(direction == "up"){
        if (currentF == 2){
         direction = "down";
        }
    slideup();
    }
}
function iniautoslide(){
interval01 = setInterval("autoslide()",autotime);
}
οnlοad=function(){iniautoslide()}
//-->
</SCRIPT>
</body>
</html>
wh0920
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
带左右箭头图片切换
u012038068的博客
12-25 4773
无标题文档 *{margin:0px;padding:0px;} .con{width:300px;height:200px;margin-left:500px;margin-top:200px;overflow:hidden;position:relative;z-index:1;} .nav{width:90%;height:30p
图片上有箭头，可上下页切换
08-30
图片上面有箭头。鼠标点击可以实现图片的上下页切换。
css样式，箭头方向上下转换
最新发布
qq_24385297的博客
05-07 198
【代码】css样式，箭头方向上下转换。
一百多张gif箭头图标
09-19
一百多张各种gif格式的箭头图标，有动画效果。
C# winform 图片幻灯片方式切换
01-01
一个小小的demo，展示图片按照幻灯片方式切换，适用于产品展示等
js原生轮播图 完整代码：箭头点击、自动切换、移入暂停、移出继续
Vip_wk的博客
02-23 1110
css样式： <style> *{ margin:0 ; padding: 0; } li{ list-style: none; } .wrap{ width: 1200px; marg...
js控制上下箭头的切换
WuKongHeBaJie的博客
05-31 4489
// 控制上下箭头展示 $(document).ready(function(){ $("#upDownIcon").click(function(){ $(this).toggleClass('glyphicon-chevron-down'); $(this).toggleClass('glyphicon-chevron-up'); }); });...
上下箭头来回切换并且变色
qq_46617584的博客
09-22 310
上下箭头来回切换并且变色
带左右箭头的图片切换
11-08
简单的JS图片切换代码,图片储存于数组中
导航栏一级标题上下箭头切换
海阔天空
09-02 3314
左侧导航栏开发有时候会遇到一级标题右边需要上下箭头切换的效果，后台管理系统中有时候会用到，先上效果图。 未点击的效果，左侧导航标题箭头是向下的 点击后，对应的二级列表显示出来，箭头变为向上 二级列表展示隐藏用的是bootstrap, 上下箭头图标用的是Font Awesome，箭头切换用的是jQuery,我是在vue单文件组件中使用。代码如下： invisible样式是bo...
css滚动条设置图标,更改滚动条上下箭头图标
weixin_35476604的博客
08-03 2664
CSS怎么改变表单下拉框箭头和滚动条样式单凭CSS能改变它们的样式吗？我所说的不仅仅是弄个1px边框和背景色什么都不知道 什么时候的事了，还没人回答你 刚好前天 我写了个 简单的 不过原理相同 我先说说原理 就是利用CSS 和JS 实现 做一个div来代替 你想要的效果 比如 背景设置成你觉得好看的图片 然后 绝对定位 让下拉列表再绝对定位。。。在css中怎样改变滚动条的样式/*IE滚动条颜色设置...
ASP.NET 2.0中GRIDVIEW排序
mdot的专栏
09-27 4755
虽然是BETA 1的，但原理其实和。NET 1。1的差不多，下面的例子讲了如何在排序时，在headertemplate中加一张UP.GIF和DOWN.GIF(就是升序，倒序的示意图）%@ Page Language="C#" %>http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> http://www.w3.org/1999/xhtml" >
使用jquery + css + html实现点击左右箭头切换图片
热门推荐
qingyuanluofeng的专栏
04-02 2万+
html页面如下 ,新建indexhtml，拷贝以下内容 复制代码 代码如下: 无标题文档                         css样式 ，新建MyStyle.css拷贝以下内容 复制代码 代码如下: * {mar
js左右箭头图片切换
Qian_Chan_的专栏
11-13 4716
#content{ width: 600px; height: 501px; position: relative; margin: 40px auto; } #content a{ width: 50px; height: 50px; background: rgba(240,240,240,0.5); border: 3px #fff solid; font-size: 40
点击按钮上下切换图片
WG9797的博客
06-21 621
<body> <button>上一张</button> <button>下一张</button> <!--<imgsrc="img/1.jpg"alt="">--> <script> varbtn=document.getElementsByTagName('button')[0]; varbtn1...
untiy左右箭头键切换效果
05-25
你可以通过以下代码实现在Unity中使用左右箭头键进行切换效果： ```csharp public GameObject[] objects; private int currentIndex = 0; void Start() { // 将第一个对象设置为活动对象 objects[currentIndex]....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值