左右切换鼠标可控的无缝图片滚动代码

最新推荐文章于 2024-04-24 16:14:41 发布
最新推荐文章于 2024-04-24 16:14:41 发布
阅读量2k 收藏
点赞数
文章标签： function class div list xhtml javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cloudday/article/details/7356969
版权

//http://www.codefans.net/jscss/code/124.shtml  //

<!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" />
<title>超级经典一套鼠标控制左右滚动图片带自动翻滚</title>
<style type="text/css">
<!--
.rollBox{width:704px;overflow:hidden;padding:12px 0 5px 6px;}
.rollBox .LeftBotton{height:52px;width:19px;background:url(/jscss/demoimg/200901/job_mj_069.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(/jscss/demoimg/200901/job_mj_069.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" ο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="/jscss/demoimg/wall_s1.jpg" width="109" height="87" /></a>
          <p><a href="#" target="_blank">风景美如画</a></p>
         </div>       
        
 <div class="pic">
          <a href="/" target="_blank"><img src="/jscss/demoimg/wall_s2.jpg" width="109" height="87"  /></a>
          <p><a href="#" target="_blank">千里之行</a></p>
         </div>
         <div class="pic">
          <a href="/" target="_blank"><img src="/jscss/demoimg/wall_s3.jpg" width="109" height="87" /></a>
          <p><a href="#" target="_blank">学习源码站</a></p>
         </div>
         <div class="pic">
          <a href="/" target="_blank"><img src="/jscss/demoimg/wall_s4.jpg" width="109" height="87" /></a>
          <p><a href="#" target="_blank">每一款都测试</a></p>
         </div>
         <div class="pic">
          <a href="/" target="_blank"><img src="/jscss/demoimg/wall_s5.jpg" width="109" height="87" alt="你难道不喜欢" /></a>
          <p><a href="#" target="_blank">你难道不喜欢</a></p>
         </div>
 <div class="pic">
          <a href="/" target="_blank"><img src="/jscss/demoimg/wall_s6.jpg" width="109" height="87" /></a>
          <p><a href="#" target="_blank">你太令我失望了</a></p>
         </div>      
         <div class="pic">
          <a href="/" target="_blank"><img src="/jscss/demoimg/wall_s7.jpg" width="109" height="87" /></a>
          <p><a href="#" target="_blank">今天早点睡</a></p>
         </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>
   </div>

<script language="javascript" type="text/javascript">
<!--//--><![CDATA[//><!--
//图片滚动列表 mengjia 070816
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>
</body>
</html>
cloudday
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用原生JS实现滚轮翻页效果的示例代码
11-20
一、滚轮事件 当用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时，就会触发mousewheel事件，这个事件就是实现全屏切换效果需要用到的。在IE6, IE7, IE8, Opera 10+, Safari 5+中，都提供了 “mousewheel” 事件，而 Firefox 3.5+ 中提供了一个等同的事件：”DOMMouseScroll”。与mousewheel事件对应的event对象中我们还会用到另一个特殊属性—wheelDelta属性。 1、“mousewheel” 事件中的 “event.wheelDelta” 属性值：返回的值，如果是正值说明滚轮是向上滚动，如果是负值说明滚轮是向
vue-seamless-scroll列表循环滚动插件
Lval的博客
11-26 3606
安装 npm install vue-seamless-scroll --save 引入 import vueSeamlessScroll from "vue-seamless-scroll"; export default { components: { // circleBg, vueSeamlessScroll } } 使用 <vue-seamless-scroll :data="listData" class="wp-1 hp-1" :class-option="clas
html图片左右无缝循环滚动示例
热门推荐
喻志强的博客
11-28 4万+
首先，最外层的宽高要给个固定值，然后给个overflow: hidden;，放不下的图片隐藏。 原理：（以左方向为例）先向左移动一个图片的宽度，此时第一个图片已经看不见了，这个时候将第一个标签元素克隆后追加到末尾，然后将第一个元素移除。达到循环滚动的效果。右移也是同理。下面是代码实现和demo<!DOCTYPE html> <html> <head> <meta charse
Axure8 教程：两种图片交互效果（悬浮放大和左右滑动切换）
weixin_43516258的博客
04-19 4304
这次为大家分享的是图片的悬浮放大及左右滑动切换两种交互效果 预览及下载地址：https://6rkewz.axshare.com 一、悬浮放大效果 1、制作元件 拖入两个【动态面板】元件，设置两张图片 2、设置交互 点击其中一个动态面板，选择图片，设置图片的【鼠标移入时】事件和图片的【鼠标移出时】事件 同理设置另一张图片的【鼠标移入时】事件和图片的【鼠标移出时】事件 图片放大倍数根据设计需要设定，此案例为放大图片1.2倍 二、左右滑动切换 1、制作元件 拖入【动态面板】元件，命名为”图片“，点击
unity 鼠标或者触摸 左移右移 图片移动
obf2018的博客
06-18 4121
最近发现项目中经常用到一组图片根据鼠标左滑右滑 图片移动的功能 所以简单的整理了下 以后项目中用着比较方便 也是自己的一个记录吧 首先 要知道 在屏幕中 检测鼠标有两种 一种是UNITY本身的方法Input.mousePosition 还有一种是射线检测 涉及到3D场景 我这边写的是关于2D的移动检测 第一要知道 检测鼠标是左移还是右移 先获取到鼠标的触摸点 要根据两点判断 开始点跟结束点 开始点在结束点的左边 就是图片向右边滑动的动画 开始点在结束点的右边 就是图片向左滑动的动画 还有图片...
原生JS实现自动无缝切换轮播图(可鼠标拖动)
莫小猪的菜鸟进阶路
08-17 6205
^ _ ^ 最近参加了一个免费的华为在线课程，上面一个作业是用原生js实现轮播图。练手的同时发现工作中框架用的多。原生的都不如以前那么熟练了。特此写这篇文章记录一下。希望能帮助到一些新手盆友。一起学习吧。 目录功能需求实现思路html & CSS结构分析JS逻辑实现知识点小结 功能需求 功能上要实现以下4个需求： 自动无缝切换图片 鼠标左右拖动切换图片 点击小点切换对应图片 浏览器窗口尺寸改变不影响以上功能 实现思路 html & CSS结构分析 JS逻辑实现 知识
带按钮可左右滚动的图片展示特效
管子（zero）的杂乱空间
11-13 1898
<!--google_ad_client = "pub-4490194096475053";/* 内容页,300x250,第一屏 */google_ad_slot = "3685991503";google_ad_width = 300;google_ad_height = 250;//--><script type="text/javascript"src="
原生javascript实现图片左右平滑轮播效果（思路分析+代码）
小福气的博客
07-21 5128
效果截图： 思路： 1准备工作 1通过html和css实现图片水平布局（可以在main里面设置overflow=scrollleft，更好的观察图片移动的轨迹） 2获取需要操作的对象 3设置默认展示的图片的下标imgIndex=1 默认的轮播按钮下标btnIndex=0 初始的main的scrollLeftmain.scr...
jQuery鼠标控制图片左右滚动
ICode联盟
05-24 813
下载地址 jQuery鼠标控制图片左右滚动，改变背景图片动画特效。该特效在鼠标移动悬停到某张缩略图上的时候，全屏背景图片会随之切换为这张缩略图的大图。 dd:
原生JS—实现图片循环切换及监测鼠标滚动切换图片
weixin_34365417的博客
11-19 196
今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片。多余的话我们就不多说了，我们一个一个开始讲吧。 1原生JS实现图片循环切换 ——方法一 在上栗子之前我们先简单介绍一下所用的一些知识点。首先是——JS中的数组，什么是数组呢？其实数组就是在内存空间中连续存储有序数据的结合，元素在数组中的顺序，成为下标，可以使用下标...
JavaScript左右切换鼠标可控的无缝图片滚动代码.rar
11-05
JavaScript左右切换鼠标可控的无缝图片滚动代码
js左右切换鼠标可控的无缝图片滚动代码.rar
12-02
js左右切换鼠标可控的无缝图片滚动代码.rarjs左右切换鼠标可控的无缝图片滚动代码.rarjs左右切换鼠标可控的无缝图片滚动代码.rarjs左右切换鼠标可控的无缝图片滚动代码.rarjs左右切换鼠标可控的无缝图片滚动代码....
JavaScript 左右切换鼠标可控的无缝图片滚动代码.rar
12-11
JavaScript 左右切换鼠标可控的无缝图片滚动代码.rar
JS+CSS控制左右切换鼠标可控的无缝图片滚动代码
08-22
JS+CSS控制左右切换鼠标可控的无缝图片滚动代码
c++:数据结构链表list的模拟实现
2301_76886465的博客
04-24 721
其实还有另一种解决方法,copy这个类,把这个类改成const版本的.但是这样会造成代码冗余.在调用上,我们假设有一个类A,里面有两个值a1和a2,我们用这个类来充当节点中的数据val。Ref是引用,Ptr是指针.这样子写是为了能生成多种引用T&,和T。这个类里面封装的是节点的指针,所以它唯一的成员变量就是Node。it->是调用it.operator->(),返回的是一个T。这个函数的功能和构造函数一样,写出来是为了后面进行复用.首先T是节点数据的类型,这个没问题.这里的模板有三个参数,为什么呢?
【C++】---STL之list详解
weixin_75128035的博客
04-24 306
erase删除pos位置元素后，pos位置之后的元素会往前搬移，没有导致底层空间的改变，理论上讲迭代 器不应该会失效，但是：如果pos刚好是最后一个元素，删完之后pos刚好是end的位置，而end位置是 没有元素的，那么pos就失效了。因此删除list中任意位置上元素时，vs就认为该位置迭代器失效 了。我的主页还有其他文章，欢迎学习指点。关注我，让我们一起学习，一起成长吧！2、优点：可以在任意位置进行插入删除，插入删除的效率比较高。好了，今天的分享就到这里了。
【WSL报错】执行:wsl --list --online；错误:0x80072ee7
芜湖~米汤来喽~
04-18 551
执行：wsl --list --online 报错：错误: 0x80072ee7
C++学习第九天（list及其模拟实现）
最新发布
zjx_web_c的博客
04-24 257
概念：迭代器失效即迭代器所指向的节点无效，即该节点被删除了，因为list的底层结构是带头节点的双向循环链表，因此在list中进行插入时是不会导致list的迭代器失效的，只有在删除的时候才会失效，而且失效的只是指向被删除节点的迭代器，其他迭代器不会受到影响。list中的接口比较多，一下是常见的重要接口。
html 滚动鼠标左右标签也切换
06-09
要实现滚动鼠标左右切换标签页的效果，可以通过以下步骤进行操作： 1. 在 HTML 文件中添加多个标签页，并为每个标签页设置唯一的 ID 值。 2. 使用 CSS 样式将所有标签页设置为水平排列，并将它们的容器设置为固定...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值