效果图

按钮

<!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><title>带左右箭头切换的自动滚动图片JS特效</title>

<style type="text/css">

<!--

.rollBox{width:704px;overflow:hidden;padding:12px 0 5px 6px;margin:0 auto;}

.rollBox .LeftBotton{height:52px;width:19px;background:url(button.gif) no-repeat 11px 0;overflow:hidden;float:left;display:inline;margin:25px 0 0 0;cursor:pointer;}

.rollBox .RightBotton{height:52px;width:20px;background:url(button.gif) no-repeat -8px 0;overflow:hidden;float:left;display:inline;margin:25px 0 0 0;cursor:pointer;}

.rollBox .Cont{width:530px;overflow:hidden;float:left;}

.rollBox .ScrCont{width:10000000px;}

.rollBox .Cont .pic{width:132px;float:left;text-align:center;}

.rollBox .Cont .pic img{padding:4px;background:#fff;border:1px solid #ccc;display:block;margin:0 auto;}

.rollBox .Cont .pic p{line-height:26px;color:#505050;}

.rollBox .Cont a:link,.rollBox .Cont a:visited{color:#626466;text-decoration:none;}

.rollBox .Cont a:hover{color:#f00;text-decoration:underline;}

.rollBox #List1,.rollBox #List2{float:left;}

-->

</style>

</head>

<body>

<div class="rollBox">

     <div class="LeftBotton" onmousedown="ISL_GoUp()" onmouseup="ISL_StopUp()" onmouseout="ISL_StopUp()"></div>

     <div class="Cont" id="ISL_Cont">

      <div class="ScrCont">

       <div id="List1">

        <!-- 图片列表 begin -->

         <div class="pic">

          <a href="/" target="_blank"><img src="http://www.5icool.org/demo/2010/00391/images/U2716P6T64D51897F1327DT20080906220904.jpg" width="109" height="87" /></a>

          <p><a href="http://www.5icool.org/" target="_blank">酷站代码-特效</a></p>

         </div>       

 <div class="pic">

          <a href="/" target="_blank"><img src="http://www.5icool.org/demo/2010/00391/images/U2716P6T64D51897F1091DT20080906180505.jpg" width="109" height="87"  /></a>

          <p><a href="http://www.5icool.org/" target="_blank">酷站代码-特效</a></p>

         </div>

         <div class="pic">

          <a href="/" target="_blank"><img src="http://www.5icool.org/demo/2010/00391/images/U2716P6T64D51897F1322DT20080906204943.jpg" width="109" height="87" /></a>

          <p><a href="http://www.5icool.org/" target="_blank">酷站代码-特效</a></p>

         </div>

         <div class="pic">

          <a href="/" target="_blank"><img src="http://www.5icool.org/demo/2010/00391/images/U2716P6T64D51897F1323DT20080906204943.jpg" width="109" height="87" /></a>

          <p><a href="http://www.5icool.org/" target="_blank">酷站代码-特效</a></p>

         </div>

         <div class="pic">

          <a href="/" target="_blank"><img src="http://www.5icool.org/demo/2010/00391/images/U2716P6T64D51897F1324DT20080906205503.jpg" width="109" height="87" /></a>

          <p><a href="http://www.5icool.org/" target="_blank">酷站代码-特效</a></p>

         </div>

 <div class="pic">

          <a href="/" target="_blank"><img src="http://www.5icool.org/demo/2010/00391/images/U2716P6T64D51897F1327DT20080906220904.jpg" width="109" height="87" /></a>

          <p><a href="http://www.5icool.org/" target="_blank">酷站代码-特效</a></p>

         </div>

         <div class="pic">

          <a href="/" target="_blank"><img src="http://www.5icool.org/demo/2010/00391/images/U2716P6T64D51897F1325DT20080906205624.jpg" width="109" height="87" /></a>

          <p><a href="http://www.5icool.org/" target="_blank">酷站代码-特效</a></p>

         </div>

        <!-- 图片列表 end -->

       </div>

       <div id="List2"></div>

      </div>

     </div>

     <div class="RightBotton" onmousedown="ISL_GoDown()" onmouseup="ISL_StopDown()" onmouseout="ISL_StopDown()"></div>

</div>

<script language="javascript" type="text/javascript">

<!--//--><![CDATA[//><!--

//图片滚动列表 5icool.org

var Speed = 1; //速度(毫秒)

var Space = 5; //每次移动(px)

var PageWidth = 528; //翻页宽度

var fill = 0; //整体移位

var MoveLock = false;

var MoveTimeObj;

var Comp = 0;

var AutoPlayObj = null;

GetObj("List2").innerHTML = GetObj("List1").innerHTML;

GetObj('ISL_Cont').scrollLeft = fill;

GetObj("ISL_Cont").onmouseover = function(){clearInterval(AutoPlayObj);}

GetObj("ISL_Cont").onmouseout = function(){AutoPlay();}

AutoPlay();

function GetObj(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}}

function AutoPlay(){ //自动滚动

 clearInterval(AutoPlayObj);

 AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();',3000); //间隔时间

}

function ISL_GoUp(){ //上翻开始

 if(MoveLock) return;

 clearInterval(AutoPlayObj);

 MoveLock = true;

 MoveTimeObj = setInterval('ISL_ScrUp();',Speed);

}

function ISL_StopUp(){ //上翻停止

 clearInterval(MoveTimeObj);

 if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0){

  Comp = fill - (GetObj('ISL_Cont').scrollLeft % PageWidth);

  CompScr();

 }else{

  MoveLock = false;

 }

 AutoPlay();

}

function ISL_ScrUp(){ //上翻动作

 if(GetObj('ISL_Cont').scrollLeft <= 0){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft + GetObj('List1').offsetWidth}

 GetObj('ISL_Cont').scrollLeft -= Space ;

}

function ISL_GoDown(){ //下翻

 clearInterval(MoveTimeObj);

 if(MoveLock) return;

 clearInterval(AutoPlayObj);

 MoveLock = true;

 ISL_ScrDown();

 MoveTimeObj = setInterval('ISL_ScrDown()',Speed);

}

function ISL_StopDown(){ //下翻停止

 clearInterval(MoveTimeObj);

 if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0 ){

  Comp = PageWidth - GetObj('ISL_Cont').scrollLeft % PageWidth + fill;

  CompScr();

 }else{

  MoveLock = false;

 }

 AutoPlay();

}

function ISL_ScrDown(){ //下翻动作

 if(GetObj('ISL_Cont').scrollLeft >= GetObj('List1').scrollWidth){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft - GetObj('List1').scrollWidth;}

 GetObj('ISL_Cont').scrollLeft += Space ;

}

function CompScr(){

 var num;

 if(Comp == 0){MoveLock = false;return;}

 if(Comp < 0){ //上翻

  if(Comp < -Space){

   Comp += Space;

   num = Space;

  }else{

   num = -Comp;

   Comp = 0;

  }

  GetObj('ISL_Cont').scrollLeft -= num;

  setTimeout('CompScr()',Speed);

 }else{ //下翻

  if(Comp > Space){

   Comp -= Space;

   num = Space;

  }else{

   num = Comp;

   Comp = 0;

  }

  GetObj('ISL_Cont').scrollLeft += num;

  setTimeout('CompScr()',Speed);

 }

}

//--><!]]>

</script>

    <br><br>

<!-- Baidu Button END -->

</body>

</html>

带左右箭头切换的自动滚动图片JS特效的更多相关文章

  1. IOS开发UI篇之自动滚动图片

    我们在做项目是有时候会遇到设置自动滚动图片,所以我自己也遇到过两次.觉得他是一个挺有意思东西,所以做了下总结 DEMO: .h #import <UIKit/UIKit.h> @inter ...

  2. ios自动滚动图片功能源码

    源码AdScrollerView,一个已经封装好的UIScrollView的子类,可以自动滚动图片以及对应的描述语,类似淘宝app首页的广告滚动效果.滚动图片数量不限,并且显示pageControl. ...

  3. jquery实现带左右箭头和数字焦点的图片轮播手写代码

    以前图片轮播经常用网上的插件,然后想说自己也要认真看看,一步一步弄明白,所以就自己研究写了个图片轮播的代码,我自己觉得还算是挺简单的.如有改进的地方,欢迎你能帮我指出,共同进步. (ps:博客园如何上 ...

  4. angularjs使用ui-router切换视图, 自动滚动到顶部

    ui-view Examples for autoscroll: <ui-view autoscroll/> <!-- If autoscroll present with no e ...

  5. 点击滚动图片JS部分代码以及css设置注意事项

    下面js代码可以实现8张图片点击左右按钮后切换的过渡动画效果 var pslul11=document.getElementById('pslul11')var pslspan1=document.g ...

  6. 可以左右移动横向无缝滚动的JS图片展示代码

    在酷站网站下的,具体路径忘了,稍微改了一下,让它看起来像组滑动 1)被引用的js文件ScrollPic.js ?){){i+=l.length;)I=document.cookie.length;o= ...

  7. (转载)无缝滚动图片的js和jquery两种写法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. Jquery实现图片左右自动滚动

    图片左右滚动的效果想必大家都有见到过吧,其实很简单.在本文将为大家介绍下使用Jquery是如何实现图片左右自动滚动的. 代码如下:<!DOCTYPE HTML>  <html> ...

  9. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

随机推荐

  1. Watchcow

    传送门 题目大意: 给你一幅连通的图,要求从起点1开始走,要经过每条边刚好两次,并且最终回到1起点. 思路:将无向图转换成有向图求欧拉回路. #include<cstdio> #defin ...

  2. poj 1573Robot Motion

    http://poj.org/problem?id=1573 #include<cstdio> #include<cstring> #include<algorithm& ...

  3. KEIL C51中的_at_关键字

    绝对位置变量 变量可以在你的C程序中的绝对内存地址位于源模块使用_at_关键字.此功能的用法是: 类型 _ memory_space _ 变量名 _at _  常数 ; 其中:memory_space ...

  4. Qt自定义事件的实现（军队真正干活，但要增加监军，大平台通知事件，事件内容自定义）

    初学Qt,用了Qt自带的事件,然后想怎么才能定义自己的事件呢?又如何使用自定义事件呢?看了篇文章,说先要子类化QEvent,然后定义自己的QEvent::Type,然后重写QWidget::event ...

  5. MappedByteBuffer高速缓存文件、RandomAccessFile随机访问

    说到高速缓存存储,处理读写文件,那就不得不说MappedByteBuffer. 看了好多文章以后写一下自己的总结. 在这里先介绍一下相关的类与方法. 先说一下Buffer.ByteBuffer.Map ...

  6. 令人头痛的ExtJS日期时间控件

    1 缘由 Ext提供了日期.时间的控件,但没有将日期和时间组合在一起的控件.在网上搜索时,有前辈创建或重写了时间相关的类,并提供了源码.不得不说那位作者对 extjs 框架理解得很透彻,虽然不知道他当 ...

  7. JavaScript权威指南学习笔记6

    这两天主要翻看了书中的第18-22章,重点看了第17章:事件化处理,其它几章节主要是翻了下书知道有相关的概念,没有真正理解其中的内容,或者没有考虑究竟如何能把里面的内容应用到实际的项目中.说的讽刺一点 ...

  8. TF31003错误的解决办法

    TF31003错误的解决办法   在今天上午机器重新启动后,VS2012突然无法连接TFS2010了.在机器重新启动之前还使用正常.刚开始以为TFS出现了问题,不过其他小组同事使用却正常,问题应该在我 ...

  9. Delphi自定义消息应用及delphi托盘实现

    Delphi自定义消息应用及delphi托盘实现interfaceuses   Windows, Messages, SysUtils, Variants, Classes, Graphics, Co ...

  10. 多线程爬虫Java调用wget下载文件，独立线程读取输出缓冲区

    写了个抓取appstore的,要抓取大量的app,本来是用httpclient,但是效果不理想,于是直接调用wget下载,但是由于标准输出.错误输出的原因会导致卡住,另外wget也会莫名的卡住. 所以 ...