js控制图片左右滚动,自动翻滚,图片滚动展示

最新推荐文章于 2023-02-18 14:57:17 发布
最新推荐文章于 2023-02-18 14:57:17 发布
阅读量510 收藏
点赞数
文章标签： xhtml javascript ViewUI
<!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>
</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="http://career.sina.com.cn/3/2007/0928/15.html" target="_blank"><img src="http://i0.sinaimg.cn/edu/deco/2007/0928/aiying.jpg" width="109" height="87" alt="周宪环" /></a>
<p><a href="http://career.sina.com.cn/3/2007/0928/15.html" target="_blank">周宪环</a></p>
</div>

<div class="pic">
<a href="http://career.sina.com.cn/3/2007/0928/16.html" target="_blank"><img src="http://i1.sinaimg.cn/edu/deco/2007/0928/zhenwei.jpg" width="109" height="87" alt="周桢炜" /></a>
<p><a href="http://career.sina.com.cn/3/2007/0928/16.html" target="_blank">周桢炜</a></p>
</div>
<div class="pic">
<a href="http://career.sina.com.cn/3/2007/0928/14.html" target="_blank"><img src="http://i2.sinaimg.cn/edu/deco/2007/0928/zhangying.jpg" width="109" height="87" alt="张颖" /></a>
<p><a href="http://career.sina.com.cn/3/2007/0928/14.html" target="_blank">张颖</a></p>
</div>
<div class="pic">
<a href="http://career.sina.com.cn/3/2007/0928/17.html" target="_blank"><img src="http://i3.sinaimg.cn/edu/deco/2007/0928/wangnaichao.jpg" width="109" height="87" alt="王乃超" /></a>
<p><a href="http://career.sina.com.cn/3/2007/0928/17.html" target="_blank">王乃超</a></p>
</div>
<div class="pic">
<a href="http://career.sina.com.cn/3/2007/0928/19.html" target="_blank"><img src="http://i1.sinaimg.cn/edu/deco/2007/0928/xiewenxiu.jpg" width="109" height="87" alt="谢雯琇" /></a>
<p><a href="http://career.sina.com.cn/3/2007/0928/19.html" target="_blank">谢雯琇</a></p>
</div>
<div class="pic">
<a href="http://career.sina.com.cn/3/2007/0928/18.html" target="_blank"><img src="http://i1.sinaimg.cn/edu/deco/2007/0928/lvge.jpg" width="109" height="87" alt="吕铬" /></a>
<p><a href="http://career.sina.com.cn/3/2007/0928/18.html" target="_blank">吕铬</a></p>
</div>
<div class="pic">
<a href="http://career.sina.com.cn/3/2007/0927/12.html" target="_blank"><img src="http://i2.sinaimg.cn/edu/deco/2007/0928/zhengru.jpg" width="109" height="87" alt="贾正如" /></a>
<p><a href="http://career.sina.com.cn/3/2007/0927/12.html" 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>
<style type="text/css">
<!--
.rollBox{width:704px;overflow:hidden;padding:12px 0 5px 6px;}
.rollBox .LeftBotton{height:52px;width:19px;background:url(http://i3.sinaimg.cn/edu/deco/2007/0924/career/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(http://i3.sinaimg.cn/edu/deco/2007/0924/career/job_mj_069.gif) no-repeat -8px 0;overflow:hidden;float:left;display:inline;margin:25px 0 0 0;cursor:pointer;}
.rollBox .Cont{width:663px;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>
<script language="javascript" type="text/javascript">
<!--//--><![CDATA[//><!--
//图片滚动列表 mengjia 070816
var Speed = 10; //速度(毫秒)
var Space = 5; //每次移动(px)
var PageWidth = 132; //翻页宽度
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();',5000); //间隔时间
}
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>
iteye_8122
关注
《JavaScript实现页面图片滚动播放》
dis86的博客
10-29 5077
HTML代码如下; &lt;div id="div_2"&gt; &lt;img id="img1" src="img/img1.jpg" onmouseout="dongtupian()" onmouseover="stoptupian()"&gt; &lt;ul id="ul1"&gt; &lt;li id
javascript实现的图片滚动效果，鼠标放上可停止
tgw2000的专栏
01-20 1175
style="OVERFLOW: hidden; WIDTH: 729px; HEIGHT: 180px"                               align=center>                                                            cellspace="0">                          
JS特效代码大全（六）图片横向滚动效果
weixin_33736832的博客
12-31 315
图片横向滚动效果有很多种，比如图片无缝循环的滚动，图片从左到右、从右到左两个方向的滚动，图片有放大镜效果的滚动等等。那懒人萱这次共享的JS特效代码是图片无缝循环的滚动和图片从左到右、从右到左两个方向（支持连续/停顿方式滚动）的图片横向滚动效果。这两种方式都可以用一个JS代码实现，只是稍微的有些不同，如图所示： JS特效代码大全（六）图片横向滚动效果 你首先要下载...
js控制图片左右滚动，可控制方向
05-04
js控制图片左右滚动 可控方向 样式自己调一下即可。
js鼠标控制图片的特效，滚轮控制放大、缩小、鼠标拖动、聚焦。。。
weixin_34113237的博客
11-05 274
项目需要做一个js控制图片的特效，滚轮控制放大、缩小、鼠标拖动等效果，网上找方法，各种报错、不兼容。。。最终自己研究出一套方案如下： 代码直接从项目中拷了，就不整理格式了 <script type="text/javascript"> //图片特效 by jifei_mei //图片大小，记录放大或缩小图片前的大小 v...
js设置图片或文字自动左右滚动控制,鼠标经过停留
yhxjc的专栏
08-21 901
BODY leftMargin=0 topMargin=2 marginheight="0" marginwidth="0"> CENTER> p> h1>JS不间断循环滚动h1>p>   TABLE  style="BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid; BORDER-LEFT: #666666 1px so
超级经典一套鼠标控制左右滚动图片带自动翻滚
09-06
标题中的“超级经典一套鼠标控制左右滚动图片带自动翻滚”描述的是一个网页设计中的交互效果，它允许用户通过鼠标操作来控制图片的左右滚动，并且具备自动翻滚的功能。这个效果通常用于展示一系列的图片或者产品，为...
超级经典一套鼠标控制左右滚动图片带自动翻滚JS
02-09
"超级经典一套鼠标控制左右滚动图片带自动翻滚JS"就是这样一个解决方案，它通过JavaScript技术实现了一种动态的、用户友好的图片展示方式，允许用户通过鼠标操作来控制图片的左右滚动，并且具备自动翻滚功能，提升了...
鼠标控制左右滚动图片带自动翻滚
07-09
在网页设计中，实现“鼠标控制左右滚动图片带自动翻滚”的功能，是提升用户体验的一种常见方式。这种功能使得用户可以通过鼠标操作或者设定的自动滚动机制来浏览一系列图片，为网站增加动态效果和互动性。以下是对这...
js图片根据鼠标左右滚动的效果
canduecho的专栏
11-13 968
  var dir=1;//每步移动像素，大＝快  var speed=10;//循环周期（毫秒）大＝慢  var MyMar=null;  function Marquee(){//正常移动   var demo = document.getElementById("demo");   var demo2 = document.getElementById("demo2");   if (dir
js图片点击左右滑动
05-28
简单、实用的javascript图片点击左右滑动
基于html+js实现轮播图（自动轮播、左右按钮、小圆点点击及切换图片）
最新发布
未休的博客
02-18 3万+
基于html+js实现轮播图（自动轮播、左右按钮、小圆点点击及切换图片）
JS点击按钮图片左右滑动
qq_42436422的博客
09-24 2299
使用rem单位：1rem = 80px <div class="click_page"> <div class="center_img" style="left: 0px;"> <div class="page_info"> <a href="javascript:;"> <video src="./images/section/explore/1.mp4" muted="muted" onMouseOver="this.play()
在html中使用js实现图片的无缝滚动（四种状态）
梁辰兴的博客
12-01 7665
获取整个ul和ul下面的所有li， 把ul里面的li内容添加一份，因为需要完成图片滚动效果所以需要二份完成无缝对接， 定义初始速度。设置定时器 在定时中进行判断 实现原理：因为ul是跟着父元素div进行定位的，所以ul的offsetleft的值初始值为0。只需要改变ul的left值就可以完成滚动效果 当ul的offsetleft值大于0的时候说明图片正在向右滚动，此时只需要把当前left值变成整个盒子的一半。并且将盒子定位到左边一半的位置就能完成滚动中的无缝对接。当uL的offset值小于负的此时盒
javascript自动左右滑动图片以及自动上下滑动图片
liuhangsheng的博客
06-09 1万+
css样式+javascript实现左右滑动图片css样式： &lt;style&gt; #div1 {position:relative;width:800px;height:200px;overflow:hidden; } #div2{position:absolute;} li{ float:left;list-style-t...
jQuery实现页面滚动条自动滚动到需要的位置
zhangzeshan
07-23 1万+
代码如下： <script> $(function(){ $('html,body').animate({scrollTop:1000},'slow'); }) </script> 解读代码：在载入html页面的body这一块内容中，实现滚动进行展示body的某一块内容，scrollTop方法 进行滚动1000像素 （像素越大滚动的越下去，也...
JAVASCRIPT控制一行显示的滚动图片
Jason 的专栏
08-10 330
新浪网和网易都经常用到，用JAVASCRIPT去控制一行显示的滚动图片，鼠标放上后停止，移开后继续；如果点击左右两侧按键则会显示下一幅，很像FLASH的动画效果，但这个是用JS实现的。   本文提供了两个可供下载的实例，都是从网上搜到的。   其中一个得效果图代码如下：     &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra...
js实现图片滚动
学习的约束力，提醒自己
03-23 3177
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">向上下左右不间断无缝滚动图片的效果(兼容火狐和IE) 源码爱好者收集 codefans.netvar speed=30;var colee2=document.getElementById("colee2");var cole
js 图片预览效果，左右滚动，有两个按钮控制
naileiforever的专栏
09-27 5530
<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><HEAD><br /><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb
自定义Android多行滚动广告条实现与3D翻滚效果
这个组件通常会展示一些滚动的文字或图片，以展示最新的信息或推广内容。本篇将详细介绍如何在Android中实现这样的滚动效果。 首先，我们看到描述中提到，这个控件是为了满足多行显示的需求，而标准的Android控件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值