带左右箭头切换的自动滚动图片JS特效

效果图

按钮

<!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特效的更多相关文章

IOS开发UI篇之自动滚动图片
我们在做项目是有时候会遇到设置自动滚动图片,所以我自己也遇到过两次.觉得他是一个挺有意思东西,所以做了下总结 DEMO: .h #import <UIKit/UIKit.h> @inter ...
ios自动滚动图片功能源码
源码AdScrollerView,一个已经封装好的UIScrollView的子类,可以自动滚动图片以及对应的描述语,类似淘宝app首页的广告滚动效果.滚动图片数量不限,并且显示pageControl. ...
jquery实现带左右箭头和数字焦点的图片轮播手写代码
以前图片轮播经常用网上的插件,然后想说自己也要认真看看,一步一步弄明白,所以就自己研究写了个图片轮播的代码,我自己觉得还算是挺简单的.如有改进的地方,欢迎你能帮我指出,共同进步. (ps:博客园如何上 ...
angularjs使用ui-router切换视图, 自动滚动到顶部
ui-view Examples for autoscroll: <ui-view autoscroll/> <!-- If autoscroll present with no e ...
点击滚动图片JS部分代码以及css设置注意事项
下面js代码可以实现8张图片点击左右按钮后切换的过渡动画效果 var pslul11=document.getElementById('pslul11')var pslspan1=document.g ...
可以左右移动横向无缝滚动的JS图片展示代码
在酷站网站下的,具体路径忘了,稍微改了一下,让它看起来像组滑动 1)被引用的js文件ScrollPic.js ?){){i+=l.length;)I=document.cookie.length;o= ...
(转载)无缝滚动图片的js和jquery两种写法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
Jquery实现图片左右自动滚动
图片左右滚动的效果想必大家都有见到过吧,其实很简单.在本文将为大家介绍下使用Jquery是如何实现图片左右自动滚动的. 代码如下:<!DOCTYPE HTML> <html> ...
js鼠标滚轮滚动图片切换效果
效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

随机推荐

开源word操作组件DocX的记录
开源word操作组件DocX的记录使用开源word操作组件DocX的记录 1.DocX简介 1.1 简介 DocX是一个在不需要安装word的情况下对word进行操作的开源轻量级.net组件,是由爱 ...
Quartz2D使用
使用Quartz2D前先导入QuartzCore.framework //划线 //1.获取图形上下文 CGContextRef ctx=UIGraphicsGetCurrentContext() ...
OSSEC
[科普]入侵检测系统ossec配置文件详解 http://www.freebuf.com/articles/system/11862.html http://www.freebuf.com/autho ...
jps(JVM Process Status)
功能列出正在运行的虚拟机进程,并显示虚拟机执行主类(Main Class,main()函数所在类)的名称,以及这些进程的本地虚拟机的唯一ID(LVMID,Local Virtual Machin ...
PHP 错误提示
HTTP/1.1 200 OKServer: nginxDate: Thu, 20 Jun 2013 03:06:10 GMTContent-Type: text/html; charset=utf- ...
HBase Client API使用（二）---查询及过滤器
相关知识创建表插入数据删除等见:http://www.cnblogs.com/wishyouhappy/p/3735077.html HBase API简介见:http://www.cnblogs. ...
Java学习日记-2.5 关于0和无穷
1. 无穷 Java中将无穷定义为浮点数,分为正负无穷,分别为POSITIVE_INFINITY和NEGATIVE_INFINITY 2. null null在java中可以理解为一个特殊的引用类型, ...
C++ 通过Thunk在WNDPROC中访问this指针实现细节
本文代码使用了一些C++11特性,需要编译器支持.本文仅讨论x86_64平台的相关实现,x86平台理论上只需修改 thunk 相关机器码即可. THUNK的原理参见之前的一篇博文<C++ 通过T ...
使用XSLT实现Word下载
Xslt是Extensible Stylesheet Language Transformations的缩写,用来将XML 文档转换到其它文档类型.XSLT的使用包括两个输入文件: – 包含实际数据的 ...
WIndows系统下mysql-noinstall安装配置
环境: Windowsmysql-noinstall-5.0.37-win32.zip 一.下载MySQL http://www.mysql.com/downloads 二.安装过程 1.解压缩mys ...

带左右箭头切换的自动滚动图片JS特效

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

随机推荐

热门专题