效果图

按钮

<!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. 腾讯QQ、新浪微博等知名社交网络图标素材

    腾讯QQ.新浪微博.QQ空间.淘宝.知乎.支付宝.大众点评等设计网络图标矢量素材. 注意是矢量素材,AI格式.放大缩小不变形. 社交网络图标几乎在网页制作中都会用到.一个好看的图标,完全可以提升整体网 ...

  2. DOM&BOM笔记

    day01正课:1. DOM概述2. ***DOM树3. *查找 1. DOM概述: DHTML:动态网页技术的统称 DHTML=HTML+CSS+JS 鄙视题: HTML XHTML DHTML X ...

  3. 1001WA

    时间关系只实现了其中一部分的功能  现在的程序可以实现一个大数的平方 #include <stdio.h> #include <string.h> void mypower(i ...

  4. Java中抽象类和接口的用法和区别

    一.抽象类 1.抽象类 包含一个抽象方法的类就是抽象类 2.抽象方法 声明而未被实现的方法,抽象方法必须使用abstract关键词字声明 public abstract class People { ...

  5. ASP.NET MVC 5使用CrystalReport(水晶报表)

    原文:ASP.NET MVC 5使用CrystalReport(水晶报表)   http://downloads.businessobjects.com/akdlm/cr4vs2010/CRforVS ...

  6. Xamarin for OSX – SetUp

    正常情况联网会失败 按照安装顺序进行安装(mono framework->java sdk-> android sdk->xamarin studio->xamarin.and ...

  7. 【转】ubuntu打包压缩命令总结

    原文网址:http://blog.csdn.net/renero/article/details/6428523 .tar解包:tar xvf FileName.tar打包:tar cvf FileN ...

  8. CSU 1021 从m个不同元素中取出n (n ≤ m)个元素的所有组合的个数，叫做从m个不同元素中取出n个元素的组合数。组合数的计算公式如下: C(m, n) = m!/((m - n)!n!) 现在请问，如果将组合数C(m, n)写成二进制数，请问转这个二进制数末尾有多少个零。

    题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=82974#problem/B 解题思路:这个题目就是求因子的个数, m!/((m ...

  9. 自定义VIew——漂亮的圆形进度条

    package com.example.firstapp; import java.text.DecimalFormat; import android.annotation.SuppressLint ...

  10. MySQL数据库的安装

    官方下载地址: http://downloads.mysql.com/archives/community/ msi为安装版,zip为免安装版,最新版本的MySQL没有64位windows的msi版囧 ...