带左右箭头图片轮播的JS代码


Posted in Javascript onDecember 18, 2013

轮播图实现效果见下图,图片能自己轮播,点击左右按钮进行翻页轮播,鼠标悬停图片或者标题上,停止轮播;

效果图为:

带左右箭头图片轮播的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=utf-8" />
<title>带左右箭头图片轮播</title>
<style type="text/css">
<!--
.rollBox{width:770px;height:260px;overflow:hidden;padding:10px;margin:0 auto;border:1px solid red;}
.rollBox .LeftBotton{height:40px;width:21px;background:url(images/sl.png) no-repeat 0px 5px;overflow:hidden;float:left;display:inline;margin:110px 0 0 0;cursor:pointer;}
.rollBox .RightBotton{height:40px;width:21px;background:url(images/sr.png) no-repeat 0px 5px;overflow:hidden;float:left;display:inline;margin:110px 0 0 0;cursor:pointer;}
.rollBox .Cont{width:726px;overflow:hidden;float:left;}
.rollBox .ScrCont{width:10000000px;}
.rollBox .Cont .pic{width:242px;float:left;text-align:center;}
.rollBox .Cont .pic img{padding:9px;background:#fff;border:1px solid #ccc;display:block;margin:0 auto;width:190px;height:190px;}
.rollBox .Cont .pic div{line-height:20px;color:#505050;margin:15px 0px;}
.rollBox .Cont .pic div span{display:block;}
.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="images/1.jpg"  /></a>
          <div>
           <span><a href="https://3water.com/" target="_blank">酷站代码-特效1</a></span>
            <span>45446547</span>
          </div>
         </div>       
   <div class="pic">
          <a href="/" target="_blank"><img src="images/2.jpg"  /></a>
         <div>
           <span><a href="https://3water.com/" target="_blank">酷站代码-特效1</a></span>
            <span>45446547</span>
          </div>
         </div>
         <div class="pic">
          <a href="/" target="_blank"><img src="images/3.jpg"  /></a>
          <div>
           <span><a href="https://3water.com/" target="_blank">酷站代码-特效1</a></span>
            <span>45446547</span>
          </div>
         </div>
         <div class="pic">
          <a href="/" target="_blank"><img src="images/4.jpg" /></a>
          <div>
           <span><a href="https://3water.com/" target="_blank">酷站代码-特效1</a></span>
            <span>45446547</span>
          </div>
         </div>
         <div class="pic">
          <a href="/" target="_blank"><img src="images/5.jpg"  /></a>
          <div>
           <span><a href="https://3water.com/" target="_blank">酷站代码-特效1</a></span>
            <span>45446547</span>
          </div>
         </div>
   <div class="pic">
          <a href="/" target="_blank"><img src="images/6.jpg"  /></a>
          <div>
           <span><a href="https://3water.com/" target="_blank">酷站代码-特效1</a></span>
            <span>45446547</span>
          </div>
         </div> 
         <div class="pic">
          <a href="/" target="_blank"><img src="images/7.jpg"  /></a>
          <div>
           <span><a href="https://3water.com/" target="_blank">酷站代码-特效1</a></span>
            <span>45446547</span>
          </div>
         </div> 
         <div class="pic">
          <a href="/" target="_blank"><img src="images/8.jpg"  /></a>
          <div>
           <span><a href="https://3water.com/" target="_blank">酷站代码-特效1</a></span>
            <span>45446547</span>
          </div>
         </div>      
        <!-- 图片列表 end -->
       </div>
       <div id="List2"></div>
      </div>
     </div>
     <div class="RightBotton" onmousedown="ISL_GoDown()" onmouseup="ISL_StopDown()" onmouseout="ISL_StopDown()"></div>
   </div>
</body>
<script language="javascript" type="text/javascript">
<!--//--><![CDATA[//><!--
//图片滚动列表 3water.com
var Speed = 1; //速度(毫秒)
var Space = 5; //每次移动(px)
var PageWidth = 726; //翻页宽度
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>
</html>
Javascript 相关文章推荐
js 调整select 位置的函数
Feb 21 Javascript
js左侧三级菜单导航实例代码
Sep 13 Javascript
JS Loading功能的简单实现
Nov 29 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
Feb 26 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
Mar 21 Javascript
javascript动画之模拟拖拽效果篇
Sep 26 Javascript
HTML5 js实现拖拉上传文件功能
Nov 20 Javascript
JavaScript调试之console.log调试的一个小技巧分享
Aug 07 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
Nov 17 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
Jun 05 Javascript
Django+Vue跨域环境配置详解
Jul 06 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
Aug 16 Javascript
用js代码改变单选框选中状态的简单实例
Dec 18 #Javascript
浅析document.ready和window.onload的区别讲解
Dec 18 #Javascript
浅谈Javascript 执行顺序
Dec 18 #Javascript
Javascript浅谈之引用类型
Dec 18 #Javascript
浅析JQuery UI Dialog的样式设置问题
Dec 18 #Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
Dec 18 #Javascript
jQuery.event兼容各浏览器的event详细解析
Dec 18 #Javascript
You might like
Protoss兵种对照表
2020/03/14 星际争霸
PHP自动生成后台导航网址的最佳方法
2013/08/27 PHP
PHP实现即时输出、实时输出内容方法
2015/05/27 PHP
php+MySQL实现登录时验证登录名和密码是否正确
2016/05/10 PHP
Javascript this指针
2009/07/30 Javascript
js取消单选按钮选中并判断对象是否为空
2013/11/14 Javascript
javascript类型转换使用方法
2014/02/08 Javascript
JQuery给元素绑定click事件多次执行的解决方法
2014/05/29 Javascript
Javascript中实现trim()函数的两种方法
2015/02/04 Javascript
js简单实现Select互换数据的方法
2015/08/17 Javascript
超链接怎么正确调用javascript函数
2016/05/23 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
2017/02/13 Javascript
原生js实现倒计时--2018
2017/02/21 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
探讨Vue.js的组件和模板
2017/10/27 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
2018/08/28 Javascript
微信小程序左滑删除功能开发案例详解
2018/11/12 Javascript
详解JavaScript中的坐标和距离
2019/05/27 Javascript
微信小程序实现拖拽功能
2019/09/26 Javascript
JS中循环遍历数组的四种方式总结
2021/01/23 Javascript
Python的字典和列表的使用中一些需要注意的地方
2015/04/24 Python
python实现list由于numpy array的转换
2018/04/04 Python
对Python 网络设备巡检脚本的实例讲解
2018/04/22 Python
Python 3.x 判断 dict 是否包含某键值的实例讲解
2018/07/06 Python
numpy数组广播的机制
2019/07/12 Python
Tensorflow实现部分参数梯度更新操作
2020/01/23 Python
python实现扫雷游戏的示例
2020/10/20 Python
OpenCV利用python来实现图像的直方图均衡化
2020/10/21 Python
英国电子产品购物网站:Tech in the basket
2019/11/08 全球购物
ajax是什么及其工作原理
2012/02/08 面试题
大学生农村教师实习自我鉴定
2013/09/21 职场文书
迟到检讨书1000字
2014/01/15 职场文书
迅雷Cued工作心得体会
2014/01/27 职场文书
教学改革实施方案
2014/03/31 职场文书
SpringBoot中使用Redis作为全局锁示例过程
2022/03/24 Java/Android
i7 6700处理器相当于i5几代
2022/04/19 数码科技