js左右控制切换

最新推荐文章于 2023-11-30 10:15:05 发布
最新推荐文章于 2023-11-30 10:15:05 发布
阅读量425 收藏
点赞数
<!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" οnmοusedοwn="ISL_GoUp()" οnmοuseup="ISL_StopUp()" οnmοuseοut="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="1.jpg"  /></a>
         </div>       


         <div class="pic">
          <a href="/" target="_blank"><img src="2.jpg"  /></a>
         </div>
         <div class="pic">
          <a href="/" target="_blank"><img src="3.jpg"  /></a>
         </div>
         <div class="pic">
          <a href="/" target="_blank"><img src="4.jpg" /></a>


         </div>
         <div class="pic">
          <a href="/" target="_blank"><img src="5.jpg"  /></a>
          
         </div>
   <div class="pic">
          <a href="/" target="_blank"><img src="6.jpg"  /></a>


         </div> 
         <div class="pic">
          <a href="/" target="_blank"><img src="7.jpg"  /></a>


         </div> 
         <div class="pic">
          <a href="/" target="_blank"><img src="8.jpg"  /></a>
         </div>      
        <!-- 图片列表 end -->


       </div>
       <div id="List2"></div>
      </div>
     </div>
     <div class="RightBotton" οnmοusedοwn="ISL_GoDown()" οnmοuseup="ISL_StopDown()" οnmοuseοut="ISL_StopDown()"></div>
   </div>
</body>
<script language="javascript" type="text/javascript">
<!--//--><![CDATA[//><!--
//图片滚动列表 jb51.net
var Speed = 1; //速度(毫秒)
var Space = 10; //每次移动(px)
var PageWidth = 243; //翻页宽度
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>

abigflower
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js控制图片左右切换
11-17
js控制图片左右切换
js实现左右切换轮播图效果
qq_40261601的博客
02-19 3981
js实现图片跑马灯式轮播效果，可点击切换上下张，下方有定位圆点随图片切换激活状态
JavaScript——数组——slice方法
热门推荐
realzhangsan的博客
09-12 2万+
JavaScript——数组——slice方法 JavaScript中的slice方法类似于字符串的substring方法，作用是对数组进行截取。 slice方法有两个参数，indexStart 和 indexEnd，分别表示截取的起始位置和结束位置，indexStart是必选的，indexEnd是可选的。 如果填写了indexEnd，方法会对数组从下标 indexStart 到下标 indexEnd 以左闭右开的方式进行截取；如果不填写indexEnd，方法会截取数组的从下标 indexStart 到末尾
原生JS实现图片左右切换效果
最新发布
yuan_wei520的博客
11-30 376
【代码】原生JS实现图片左右切换效果。
js 左右滑动切换图片
Tianxiaoxixi的博客
06-26 1667
js 左右滑动切换图片
js左右切换+按钮控制
06-04
js左右切换+按钮控制源码
js控制div左右切换带左右箭头
11-05
js控制div左右切换带左右箭头
js 上下左右键控制焦点(示例代码)
10-26
主要是对js上下左右键控制焦点的示例代码进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
js控制多图左右滚动切换效果代码分享
11-21
本文实例讲述了js控制多图左右滚动切换效果。分享给大家供大家参考。具体如下： 这是一款纯js实现点击左右按钮图片自动左右平滑滚动，默认5个一组左右滚动，可以手动修改js参数更改滑动数量。 运行效果图：————...
js实现多图左右切换功能
12-10
本文实例为大家分享了js多图左右切换功能，供大家参考，具体内容如下 效果图： <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href="http://static9.pplive.cn/pub/flagment/v_20150114110035/header.min.css" /> <!--页面初始化CSS和页面公用头部的css--> <style type="te
可左右切换带翻页功能的JS相册代码
06-11
左右滚动切换图片特效，支持暂停播放功能
jquery左右滚动切换带左右箭头
11-15
很好的效果，带左右键头，带详细信息，可以满意您的要求。
原生js实现带左右箭头可滑动的tab效果
yolo_link的博客
10-09 2317
方便控制左右按钮的禁用状态设置，我采用button组件的图标按钮。可视区域为黄色框①，包含可视tab蓝色框②以及左右箭头红色框；绿色框③就是所有的tab了，②和③的关系就是卡槽和卡带的关系。控制菜单tab左右箭头的显隐。
js实现首尾相连左右循环切换效果
weixin_43443341的博客
10-11 1218
js实现首尾相连左右循环切换效果
通过js实现图片左右点击图片左右切换效果
weixin_44543121的博客
01-19 1万+
通过js实现图片左右点击图片左右切换效果
产品介绍js左右切换介绍
ICode联盟
10-19 96
产品介绍js左右切换介绍，jquery实现的大气企业营销图文介绍，全屏图片文字布局滚动切换代码，切换UL的margin-left;可以随时调整距离，简单易用，下载即可使用。
JS实现轮播图点击切换、按钮切换功能
zxh996的博客
07-13 1万+
JS实现轮播图点击切换、按钮切换功能前言轮播图案例总结 前言 轮播图的案例非常经典，写法也非常多，我在写一个自己用的比较多的写法，帮助大家理解，在网页的设计中，可以直接拿去用（记得换图片路径哦！），仅供参考学习。 轮播图案例 代码如下（示例）： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title>
js实现左右切换页面
qq_39048609的博客
08-20 2191
Document html, body{ height:100%;}body { margin:0; padding:0; font-family:sans-serif; text-align:center; color:#FFF; overflow:hidden; position:relative;} article{ position: absolute; width:100%;
网页左右切换JavaScript
06-01
实现网页左右切换效果的JavaScript代码主要分为两部分： 1. 控制页面布局：需要将两个页面放置在一个容器内，并使用CSS来控制它们的排列方式。具体可以使用float、position、flex等方式来实现。 2. 控制页面切换：...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值