`
JYY282
  • 浏览: 24580 次
  • 性别: Icon_minigender_2
  • 来自: 无锡
社区版块
存档分类
最新评论

js图片切换代码《转冷夜》

 
阅读更多
代码:

<script language="javascript">
<!--
//图片滚动列表 mengjia 070927
var Speed_1 = 6; //速度(毫秒)
var Space_1 = 20; //每次移动(px)
var PageWidth_1 = 117 * 3; //翻页宽度
var interval_1 = 5000; //翻页间隔
var fill_1 = 0; //整体移位
var MoveLock_1 = false;
var MoveTimeObj_1;
var MoveWay_1="right";
var Comp_1 = 0;
var AutoPlayObj_1=null;
function GetObj(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}}
function AutoPlay_1(){clearInterval(AutoPlayObj_1);AutoPlayObj_1=setInterval('ISL_GoDown_1();ISL_StopDown_1();',interval_1)}
function ISL_GoUp_1(){if(MoveLock_1)return;clearInterval(AutoPlayObj_1);MoveLock_1=true;MoveWay_1="left";MoveTimeObj_1=setInterval('ISL_ScrUp_1();',Speed_1);}
function ISL_StopUp_1(){if(MoveWay_1 == "right"){return};clearInterval(MoveTimeObj_1);if((GetObj('ISL_Cont_1').scrollLeft-fill_1)%PageWidth_1!=0){Comp_1=fill_1-(GetObj('ISL_Cont_1').scrollLeft%PageWidth_1);CompScr_1()}else{MoveLock_1=false}
AutoPlay_1()}
function ISL_ScrUp_1(){if(GetObj('ISL_Cont_1').scrollLeft<=0){GetObj('ISL_Cont_1').scrollLeft=GetObj('ISL_Cont_1').scrollLeft+GetObj('List1_1').offsetWidth}
GetObj('ISL_Cont_1').scrollLeft-=Space_1}
function ISL_GoDown_1(){clearInterval(MoveTimeObj_1);if(MoveLock_1)return;clearInterval(AutoPlayObj_1);MoveLock_1=true;MoveWay_1="right";ISL_ScrDown_1();MoveTimeObj_1=setInterval('ISL_ScrDown_1()',Speed_1)}
function ISL_StopDown_1(){if(MoveWay_1 == "left"){return};clearInterval(MoveTimeObj_1);if(GetObj('ISL_Cont_1').scrollLeft%PageWidth_1-(fill_1>=0?fill_1:fill_1+1)!=0){Comp_1=PageWidth_1-GetObj('ISL_Cont_1').scrollLeft%PageWidth_1+fill_1;CompScr_1()}else{MoveLock_1=false}
AutoPlay_1()}
function ISL_ScrDown_1(){if(GetObj('ISL_Cont_1').scrollLeft>=GetObj('List1_1').scrollWidth){GetObj('ISL_Cont_1').scrollLeft=GetObj('ISL_Cont_1').scrollLeft-GetObj('List1_1').scrollWidth}
GetObj('ISL_Cont_1').scrollLeft+=Space_1}
function CompScr_1(){if(Comp_1==0){MoveLock_1=false;return}
var num,TempSpeed=Speed_1,TempSpace=Space_1;if(Math.abs(Comp_1)<PageWidth_1/2){TempSpace=Math.round(Math.abs(Comp_1/Space_1));if(TempSpace<1){TempSpace=1}}
if(Comp_1<0){if(Comp_1<-TempSpace){Comp_1+=TempSpace;num=TempSpace}else{num=-Comp_1;Comp_1=0}
GetObj('ISL_Cont_1').scrollLeft-=num;setTimeout('CompScr_1()',TempSpeed)}else{if(Comp_1>TempSpace){Comp_1-=TempSpace;num=TempSpace}else{num=Comp_1;Comp_1=0}
GetObj('ISL_Cont_1').scrollLeft+=num;setTimeout('CompScr_1()',TempSpeed)}}
function picrun_ini(){
GetObj("List2_1").innerHTML=GetObj("List1_1").innerHTML;
GetObj('ISL_Cont_1').scrollLeft=fill_1>=0?fill_1:GetObj('List1_1').scrollWidth-Math.abs(fill_1);
GetObj("ISL_Cont_1").onmouseover=function(){clearInterval(AutoPlayObj_1)}
GetObj("ISL_Cont_1").onmouseout=function(){AutoPlay_1()}
AutoPlay_1();
}
//产品展示滚动图片结束
//-->
</script>

<style type="text/css">
/*中间图片专区*/
.gudq{ width:1003px; margin:0px; float:left;}
.gudq h1{ width:983px; height:35px; margin:0 auto; background:url(img/cmd-title.gif) repeat-x; font-size:16px; margin:0px; padding:0px; text-align:left; padding-left:20px; color:#D50200; font-family:"华文中宋";}
.gudq span{  padding-left:15px; line-height:30px;}
/***图片滚动区***/
.blk_18 {border: #e3e3e3 1px solid; font-size: 12px; background: #f3f3f3; overflow: hidden; width: 1001px; zoom: 1}
.blk_18 .pcont {float: left; overflow: hidden; width: 940px}
.blk_18 .ScrCont {width: 32766px; zoom: 1}
.blk_18 #List1_1 {float: left}
.blk_18 #List2_1 {float: left}
.blk_18 .LeftBotton {background: url(img/left1.gif) no-repeat; float: left; margin: 0px 1px; width: 15px; height: 140px}
.blk_18 .RightBotton {background: url(img/right1.gif) no-repeat; float: left; margin: 0px 1px; width: 15px; height: 140px}
.blk_18 .LeftBotton {background-position: 0px 0px; margin-left: 15px}
.blk_18 .RightBotton {background-position: 0px 0px; margin-left: -1px}
.blk_18 .LeftBotton:hover {background: url(img/left.gif) no-repeat;}
.blk_18 .RightBotton:hover {background: url(img/right.gif) no-repeat;}
.blk_18 .pl IMG {display: block; margin: 6px auto 1px; cursor: pointer; borderstyle: none;}
.blk_18 .pl {border: #f3f3f3 1px solid; float: left; width: 115px; line-height: 24px; text-align: center; text-decoration: underline; overflow:hidden;}
.blk_18 a.pl:hover {border: #ff9900 1px solid; background: #fff; color: #ff9900;}
.commu_cont3 {margin: 9px 7px 7px; line-height: 150%}
.commu_cont3 ul {width: 188px}
</style>

 

<!--中间滑动区展会图片-->
     <div class="gudq">
   <h1><span>展会展示</span></h1>
          <!-- picrotate start  -->
          <DIV class=blk_18>
            <A onmouseup=ISL_StopUp_1() class=LeftBotton onmousedown=ISL_GoUp_1() onmouseout=ISL_StopUp_1() href="javascript:void(0);" target=_self></A>
            <DIV class=pcont id=ISL_Cont_1>
              <DIV class=ScrCont>
                <DIV id=List2_1></DIV>
                <DIV id=List1_1>
                  <A class=pl href="#" ><IMG src="img/01.jpg" border="0" />展会图片信息1<br /></A>
      <A class=pl href="#" ><IMG src="img/01.jpg" border="0" />展会图片信息2<br /></A>
      <A class=pl href="#" ><IMG src="img/01.jpg" border="0" />展会图片信息3<br /></A>
      <A class=pl href="#" ><IMG src="img/01.jpg" border="0" />展会图片信息4<br /></A>
      <A class=pl href="#" ><IMG src="img/01.jpg" border="0" />展会图片信息5<br /></A>
      <A class=pl href="#" ><IMG src="img/01.jpg" border="0" />展会图片信息6<br /></A>
      <A class=pl href="#" ><IMG src="img/01.jpg" border="0" />展会图片信息7<br /></A>
      <A class=pl href="#" ><IMG src="img/01.jpg" border="0" />展会图片信息8<br /></A>
      <A class=pl href="#" ><IMG src="img/01.jpg" border="0" />展会图片信息9<br /></A>
      <A class=pl href="#" ><IMG src="img/01.jpg" border="0" />展会图片信息10<br /></A>
      <A class=pl href="#" ><IMG src="img/01.jpg" border="0" />展会图片信息11<br /></A>
      <A class=pl href="#" ><IMG src="img/01.jpg" border="0" />展会图片信息12<br /></A>
      <A class=pl href="#" ><IMG src="img/01.jpg" border="0" />展会图片信息13<br /></A>
      <A class=pl href="#" ><IMG src="img/01.jpg" border="0" />展会图片信息14<br /></A>
      <A class=pl href="#" ><IMG src="img/01.jpg" border="0" />展会图片信息15<br /></A>
    </DIV>
                <DIV id=List2_1></DIV>
              </DIV>
   </DIV>
            <A onmouseup=ISL_StopDown_1() class=RightBotton onmousedown=ISL_GoDown_1() onmouseout=ISL_StopDown_1() href="javascript:void(0);" target=_self></A>
    </DIV>
          <SCRIPT type=text/javascript>
          <!--
          picrun_ini();
          //-->
          </SCRIPT>
          <!-- picrotate end -->
     </div>

 

分享到:
评论

相关推荐

    JS图片自动切换代码

    JS图片自动切换代码详解 JavaScript 图片自动切换代码是一种使用JavaScript编程语言实现的图片自动切换效果,该代码可以根据不同的变换样式来显示图片。下面是对该代码的详细解释。 变量声明 在代码的开头,我们...

    我收藏的js图片切换代码

    在你所提及的“我收藏的js图片切换代码”中,我们可以讨论一些核心的JavaScript知识点以及图片切换的实现方式。 一、DOM操作 在JavaScript中,Document Object Model (DOM) 是HTML和XML文档的结构化表示。通过DOM...

    马赛克效果的JS图片切换代码.rar

    马赛克效果的JS图片切换代码.rar马赛克效果的JS图片切换代码.rar马赛克效果的JS图片切换代码.rar马赛克效果的JS图片切换代码.rar马赛克效果的JS图片切换代码.rar马赛克效果的JS图片切换代码.rar

    附带缩略图的JS图片切换代码

    总的来说,"附带缩略图的JS图片切换代码"是一个结合了DOM操作、事件处理、数组操作和性能优化等多个JS核心概念的实践案例,对于学习和提升JavaScript技能非常有帮助。在实际应用中,还可以结合CSS3动画来进一步增强...

    原生js按钮控制图片切换代码.zip

    - 实现自动轮播功能,可以通过`setInterval()`定时切换图片。 - 添加暂停和恢复功能,当用户鼠标悬停在轮播区域时,自动轮播暂停,鼠标离开后恢复。 综上所述,原生JavaScript结合CSS3属性可以实现多种图片切换效果...

    网站首页图片切换代码

    1. 基本原理:JavaScript可以控制DOM(Document Object Model)中的元素,通过修改图片的`src`属性或改变容器内图片元素的顺序,实现图片的切换效果。例如,你可以创建一个数组存储所有图片的URL,然后定时器每隔...

    JS多种新闻图片切换效果

    - 编写JavaScript代码,实现图片切换逻辑,包括初始化设置、切换事件处理、时间间隔控制等。 - 将JavaScript代码与HTML元素绑定,确保图片切换功能可以正常运行。 6. 扩展与优化: - 自适应布局:确保图片切换...

    js+css3图片切换立体旋转代码.zip

    5. **jquery.min.js**:可能引用了jQuery库的压缩版,用于简化JavaScript代码。 在实际应用中,这个代码示例可以作为学习和参考,帮助开发者理解如何利用JavaScript和CSS3实现动态图片切换和立体旋转效果。同时,...

    纯js广告图片切换代码

    此程序是用纯js写的,六个图片切换。有上一页 下一页 开始/暂停功能。 有标题、描述。可自己修改。 因本人css能力有限,样式不是很好看。 只做参考 qq:707537221

    图片切换效果代码html图片切换

    虽然提供的代码片段没有完全展示JavaScript部分,但可以推测它主要负责图片的动态切换逻辑。JavaScript通常用来处理用户交互事件,比如点击按钮触发图片切换,或者自动轮播图片。此外,JavaScript还可能包括定时器...

    javascript写的图片切换代码

    下面我们将深入探讨如何使用JavaScript编写图片切换代码,以及其中涉及的关键知识点。 首先,我们需要了解HTML结构,它是页面的基础,包含图片元素。例如,我们可以有多个图片元素,通过CSS隐藏除了第一个之外的...

    jQuery百度新闻图片切换代码.zip

    《jQuery实现百度新闻图片切换代码解析》 在网页设计中,动态效果的运用可以极大地提升用户体验,其中,图片切换效果尤为常见。本篇文章将详细解析一款基于jQuery的百度新闻图片切换代码,帮助开发者理解其工作原理...

    源代码-Flash+JS图片切换轮换特效ASP读取数据库版.zip

    源代码-Flash+JS图片切换轮换特效ASP读取数据库版.zip 源代码-Flash+JS图片切换轮换特效ASP读取数据库版.zip 源代码-Flash+JS图片切换轮换特效ASP读取数据库版.zip 源代码-Flash+JS图片切换轮换特效ASP读取数据库版....

    js2c#-js转换c#代码

    "js2c#"工具正是一个旨在帮助开发者将JavaScript代码转换为C#代码的实用工具。这个工具的亮点在于它能够将JS代码编译成DLL或EXE文件,使得C#项目可以直接引用这些编译后的库,从而实现跨语言的代码复用。 首先,...

    JavaScript图片切换效果.rar

    在JavaScript代码中,一般会有以下关键部分: 1. **事件绑定**:使用`addEventListener`方法绑定点击事件或者其他触发切换的事件。 2. **计数器**:跟踪当前显示的图片索引,以便知道下一张图片应该是什么。 3. **...

    图片切换html+css+js的代码

    在网页设计中,图片切换效果是一种常见的交互设计元素,它能增强用户体验,使得网站或应用更具吸引力。本压缩包文件“texiao4529_1560681102”可能包含了实现这一功能所需的HTML、CSS和JavaScript代码。下面我们将...

    jquery旅游网站带标题的焦点图片切换代码

    用户点击这些元素时,可以触发对应的切换事件,改变定时器的状态或立即切换图片。这需要我们使用`click`事件绑定,并根据当前显示的图片索引来调整显示内容。 在实际应用中,我们需要考虑响应式设计,确保焦点图片...

    常用banner图片切换焦点图代码

    常用banner图片切换焦点图代码。简单的banner图片切换焦点图代码,兼容IE 6/7/8/9 及其他主流浏览器 使用方法: 1、依次引入slideshow.css...3、可在代码中的SlideShow( )括号中设置切换图片的时间间隔,默认为3000。

    JavaScript图片切换展示效果.rar

    在本项目中,"JavaScript图片切换展示效果.rar"包含了实现这一功能的代码和其他相关资源。 首先,我们需要理解JavaScript的基本概念。JavaScript是一种广泛使用的客户端脚本语言,它允许开发者在用户的浏览器上运行...

    20行JS代码实现图片切换效果

    这篇名为“20行JS代码实现图片切换效果”的博客文章提供了一个简洁的解决方案,它利用JavaScript的事件处理和DOM操作功能来达成目的。这篇文章的标签包括“源码”和“工具”,暗示着它提供的是一种可以直接使用的...

Global site tag (gtag.js) - Google Analytics