带左右箭头图片轮播的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 相关文章推荐
关于__defineGetter__ 和__defineSetter__的说明
May 12 Javascript
jQuery 打造动态渐变按钮 详细图文教程
Apr 25 Javascript
基于jquery的inputlimiter 实现字数限制功能
May 30 Javascript
JavaScript类属性的访问方式详解
Feb 11 Javascript
node.js中的fs.fchownSync方法使用说明
Dec 16 Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
Nov 17 Javascript
jQuery实现导航回弹效果
Feb 27 Javascript
解决Layui 表单提交数据为空的问题
Aug 15 Javascript
vue页面切换过渡transition效果
Oct 08 Javascript
微信小程序和百度的语音识别接口详解
May 06 Javascript
JavaScript实现简易聊天对话框(加滚动条)
Feb 10 Javascript
vue组件暴露和.js文件暴露接口操作
Aug 11 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
php 图片上传类代码
2009/07/17 PHP
使用php记录用户通过搜索引擎进网站的关键词
2014/02/13 PHP
php日期操作技巧小结
2016/06/25 PHP
PHP设计模式之注册树模式分析
2018/01/26 PHP
PHP number_format函数原理及实例解析
2020/07/14 PHP
载入进度条 效果
2006/07/08 Javascript
syntaxhighlighter 使用方法
2007/07/02 Javascript
jquery插件制作教程 txtHover
2012/08/17 Javascript
html+css+js实现xp window界面及有关功能
2013/03/26 Javascript
ajax与302响应代码测试
2013/10/23 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
js实现图片放大和拖拽特效代码分享
2015/09/05 Javascript
javascript数组去重小结
2016/03/07 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
2016/09/28 Javascript
浅谈jquery上下滑动的注意事项
2016/10/13 Javascript
jquery实现图片平滑滚动详解
2017/03/22 jQuery
angular过滤器实现排序功能
2017/06/27 Javascript
深入探究angular2 UI组件之primeNG用法
2017/07/26 Javascript
JavaScript ES6常用基础知识总结
2019/02/09 Javascript
ES6知识点整理之Proxy的应用实例详解
2019/04/16 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
Vue.js组件props数据验证实现详解
2019/10/19 Javascript
JavaScript基于SVG的图片切换效果实例代码
2020/12/15 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
2021/02/07 Javascript
python del()函数用法
2013/03/24 Python
Django查找网站项目根目录和对正则表达式的支持
2015/07/15 Python
Python中subprocess的简单使用示例
2015/07/28 Python
使用Python脚本生成随机IP的简单方法
2015/07/30 Python
Python爬虫爬取电影票房数据及图表展示操作示例
2020/03/27 Python
python实现将range()函数生成的数字存储在一个列表中
2020/04/02 Python
CSS3 3D立方体效果示例-transform也不过如此
2016/12/05 HTML / CSS
暑期实习鉴定
2013/12/16 职场文书
内刊编辑求职自荐书范文
2014/02/19 职场文书
遗嘱格式范本
2015/08/07 职场文书
Django操作cookie的实现
2021/05/26 Python
MySQL中varchar和char类型的区别
2021/11/17 MySQL