js 图片无缝滚动 横向 纵向

最新推荐文章于 2024-06-29 15:18:41 发布
最新推荐文章于 2024-06-29 15:18:41 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： js 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lbeller/article/details/84862330
版权

<!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>图片上下滑动 - 妙味课堂 - www.miaov.com</title>

 

<style type="text/css">

* { padding: 0; margin: 0; }

li { list-style: none; }

img { border: none; }

body { background: #eee; }

.slide_module,.slide_module_1{ width: 120px; height: 400px; margin: 0 auto; background: #fff; border: 1px solid #ccc; position: relative; top: 50px; }

.slide_module .up {width:0; height: 0; border-style: solid; border-width: 20px; border-color: transparent transparent #ccc; position: absolute; top:-10px; left: 50%; margin-left: -16px; cursor: pointer; filter: alpha(opacity: 60); opacity: 0.6; }

.slide_module .down { width:0; height: 0; border-style: solid; border-width: 20px; border-color: #ccc transparent transparent; position: absolute; bottom:-10px; left: 50%; margin-left: -16px; cursor: pointer; filter: alpha(opacity: 60); opacity: 0.6; }

.slide_module .wrap { width: 120px; height: 330px; position: absolute; top: 35px; left: 0; overflow: hidden; }

.slide_module ul{ width: 120px; position: absolute; top: 0; left: 0; }

.slide_module li,.slide_module_1 li { width: 120px; height: 110px; float: left;}

.slide_module a,.slide_module_1 a { display: block; width: 100px; height: 100px; overflow: hidden; border: 1px solid #ccc; margin: 0 auto; position: relative; top: 4px; }

.slide_module a:hover,.slide_module_1 a:hover { border: 1px solid red; }

.slide_module .active { border: 10px solid #000; }

.slide_module_1{

width: 560px;

height: 120px;

margin-top:20px;

zoom:1;

}

.slide_module_1 .up,.slide_module_1 .down{

width:0;

height: 0;

border-style: solid;

border-width: 20px;

border-color: transparent transparent #ccc;

position: absolute;

top:40%;

left: -5px;

transform:rotate(-90deg)

}

.slide_module_1 .down{

right:-5px;

left: inherit;

transform: rotate(90deg)

}

.slide_module_1 .wrap{

width: 480px;

height: 120px;

overflow: hidden;

position: absolute;

left: 30px;

margin:0 10px;

}

.slide_module_1 ul{

height: 110px;

overflow: hidden;

position: absolute;

top: 0;

left: 0;

}

.slide_module_1 a{

margin: 0;

margin-right:10px;

}

</style>

 

</head>

 

<body>

 

<div class="slide_module" id="slide">

<div class="up"></div>

<div class="wrap">

<ul>

<li><a href="http://www.miaov.com"><img src="images/1.jpg" alt="妙味课堂" longdesc="http://www.miaov.com" /></a></li>

<li><a href="http://www.miaov.com"><img src="images/2.jpg" alt="妙味课堂" longdesc="http://www.miaov.com" /></a></li>

<li><a href="http://www.miaov.com"><img src="images/3.jpg" alt="妙味课堂" longdesc="http://www.miaov.com" /></a></li>

<li><a href="http://www.miaov.com"><img src="images/4.jpg" alt="妙味课堂" longdesc="http://www.miaov.com" /></a></li>

<li><a href="http://www.miaov.com"><img src="images/5.jpg" alt="妙味课堂" longdesc="http://www.miaov.com" /></a></li>

</ul>

</div>

<div class="down"></div>

</div>

<div class="slide_module_1" id="slide1">

<div class="up"></div>

<div class="wrap">

<ul>

<li><a href="http://www.miaov.com"><img src="images/1.jpg" alt="妙味课堂" longdesc="http://www.miaov.com" /></a></li>

<li><a href="http://www.miaov.com"><img src="images/2.jpg" alt="妙味课堂" longdesc="http://www.miaov.com" /></a></li>

<li><a href="http://www.miaov.com"><img src="images/3.jpg" alt="妙味课堂" longdesc="http://www.miaov.com" /></a></li>

<li><a href="http://www.miaov.com"><img src="images/4.jpg" alt="妙味课堂" longdesc="http://www.miaov.com" /></a></li>

<li><a href="http://www.miaov.com"><img src="images/5.jpg" alt="妙味课堂" longdesc="http://www.miaov.com" /></a></li>

<li><a href="http://www.miaov.com"><img src="images/6.jpg" alt="妙味课堂" longdesc="http://www.miaov.com" /></a></li>

</ul>

</div>

<div class="down"></div>

</div>

<script type="text/javascript">

window.onload = function(){

var oSlide = document.getElementById('slide');

var oUl = oSlide.getElementsByTagName('ul')[0];

var oUp = oSlide.getElementsByTagName('div')[0];

var oDown = oSlide.getElementsByTagName('div')[2];

var ispeed = 0;

var timer = null;

 

oUl.innerHTML += oUl.innerHTML;

oUp.onmouseover = function(){

clearTimeout(timer);

timer = setInterval(domove,100);

ispeed = -5;

}

oDown.onmouseover = function(){

clearTimeout(timer);

timer = setInterval(domove,100);

ispeed = 5;

}

// oDown.onmouseout = oUp.onmouseout = function(){

// clearTimeout(timer)

// }

function domove(){

oUl.style.top = oUl.offsetTop + ispeed +'px';

if(oUl.offsetTop < -oUl.offsetHeight/2){

oUl.style.top = 0;

}else if(oUl.offsetTop > 0){

oUl.style.top = -oUl.offsetHeight/2 +'px';

}

}


 

//横向无缝滚动

var oSlide_1 = document.getElementById('slide1');

var oUl_1 = oSlide_1.getElementsByTagName('ul')[0];

var aLi_1 = oSlide_1.getElementsByTagName('li');

var oUp_1 = oSlide_1.getElementsByTagName('div')[0];

var oDown_1 = oSlide_1.getElementsByTagName('div')[2];

var ispeed_1 = 0;

var timer_1 = null;

 

oUl_1.innerHTML += oUl_1.innerHTML;

oUl_1.style.width = aLi_1[0].offsetWidth * aLi_1.length + 'px';

oUp_1.onmouseover = function(){

clearTimeout(timer_1);

timer_1 = setInterval(domove_1,100);

ispeed_1 = -5;

}

oDown_1.onmouseover = function(){

clearTimeout(timer_1);

timer_1 = setInterval(domove_1,100);

ispeed_1 = 5;

}

function domove_1(){

oUl_1.style.left = oUl_1.offsetLeft + ispeed_1 + 'px';

if(oUl_1.offsetLeft < -oUl_1.offsetWidth/2){

oUl_1.style.left = 0;

}else if(oUl_1.offsetLeft > 0){

oUl_1.style.left = -oUl_1.offsetWidth/2 + 'px';

}

}

}

</script>

</body>

</html>

 

lbeller
关注
专栏目录
手把手教你用原生js实现无缝滚动
Devil_ErKang的博客
04-07 5444
效果展示 上图就是我们要实现的无缝滚动效果。 整体思路 按照惯例我们先来说一下思路，一开始图片静止，点击各个按钮，顾名思义都有相应的效果，无缝滚动最主要的效果就是图片一直保持匀速运动。 点击向右按钮（点击事件），红色框框内（框框相对定位）的图片（图片绝对定位）开始滚动，不停止（定时器），这里所有图片应该用一个容器包裹起来绝对定位给到这个图片的父级容器，然后，设置一个定时器，获取图片父级容器的left，每运行一次定时器，增加一次或减少一次left，这样就可以做出向...
JS实现无缝循环marquee滚动效果
12-29
无缝循环marquee滚动JS代码实现，兼容IE, FireFox, Chrome，供大家参考，具体内容如下 首先是CSS和HTML如下: #marquee_zxd { border: 1px solid red; white-space: nowrap; overflow: hidden; width: 500px; ...
可以左右移动横向无缝滚动的JS图片展示
12-09
可以左右移动横向无缝滚动的JS图片展示，不明白的可以问我
js 实现图片的无缝滚动
weixin_34252686的博客
03-07 77
  js 实现图片的无缝滚动 CreateTime--2018年3月7日17:18:34 Author:Marydon　 　　测试成功 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html;charset=UTF-8"&gt;...
vue 实现图片滚动
最新发布
qq_33240556的博客
06-29 1289
在Vue中实现图片滚动，可以通过几种不同的方法来完成，包括使用原生CSS、JavaScript以及现有的Vue组件库。这里提供一个基本示例，展示如何结合Vue和第三方库（如vue-seamless-scroll）来实现图片的左右滚动效果。
Js实现图片无缝滚动
Shirongliang的博客
02-18 902
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ white-space: nowrap; display: inline-block } </style> </head> <body> &l
JavaScript实现图片无缝滚动效果
12-09
图片无缝滚动就是图片一直不停的滚动，好像没有无穷无尽似的，实际上就是几张图片不停的循环，但是看不出有从最后面切换到最前面的效果，这就是无缝滚动，文字和图片都可以无缝滚动，这里介绍的是图片，文字是同样的原理。 原理 以向上无缝滚动为例，其余几个方向的无缝滚动原理是一样的，点击向上无缝滚动。 设定一个可视区域，超过可视区域的部分隐藏，这里是将nav部分作为可视区域，ul#img是中包含所有的图片，实现无缝滚动的关键地方在这： if(nav.scrollTop==list[list.length-1].offsetTop){ nav.scrollTop=0 }else{ n
JS无缝图片滚动，横向和纵向滚动二例.rar
07-09
JS无缝图片滚动，横向和横向滚动二例，响应鼠标停止，无使用jQuery，图片滚动应用广泛，本代码在IE8、火狐等浏览器下兼容性好，代码效率高，而且代码也很少，方便大家嵌入到自己的网页中，运行效果如上图所示。
Jquery图片无缝连续循环滚动 支持上下左右的滚动.zip
07-04
【标题】"Jquery图片无缝连续循环滚动 支持上下左右的滚动.zip" 提供的是一个基于jQuery的图片滚动插件，它具有丰富的视觉效果，能够实现图片的无缝连续循环滚动，不仅支持横向滚动，还支持纵向滚动，为网页增添动态...
不间断无缝滚动图片
08-27
在网页设计中，"不间断无缝滚动图片"是一种常见的视觉效果，它通过JavaScript或者CSS3等技术实现，使得图片能够连续不断地、平滑地从一端滚动到另一端，给人一种连贯且无中断的视觉体验。这种效果常用于网站的轮播图...
js实现图片的无缝循环滚动
12-05
图片的无缝循环滚动方式： 向上滚动 向下滚动 向右滚动
js实现图片无缝滚动图片无缝滚动
03-17
图片自己添加，功能是可以暂停图片滚动，移出鼠标后开始滚动，可点击向左或向右改变滚动方向，默认是向左
js无缝滚动代码制作js图片无缝滚动向上无缝滚动
11-17
js无缝滚动代码制作js图片无缝滚动向上无缝滚动 js无缝滚动代码制作js图片无缝滚动向上无缝滚动 js无缝滚动代码制作js图片无缝滚动向上无缝滚动
使用Javascript简单实现图片无缝滚动
12-09
js无缝滚动效果几乎在任何网页上都能看到它的身影，有的可能是使用插件，其实使用原始的javascript比较简单。 主要的是使用js位置知识。 1[removed]:设置或获取元素的html标签 2.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距 3.offsetWidth:设置或获取指定标签的宽度 4.setInterval():设置方法定时启动 5.clearInterval();清除定时器 效果图： 先睹为快：demo 代码如下: <!DOCTYPE html> <html lang=”en”> <head>     <meta charset=
js图片滚动详解
流浪若相惜的专栏
03-22 285
图片滚动幻灯这些几乎是每个网站都会用到的一种效果，我们公司做站也经常得用到。有些时候找一段兼容的滚动代码也是一件头疼的事情。其实我今天要讲的这个js代码是非常常见而好用的，看了我下面的讲解，或许知道为什么有时候会不兼容了。注释很详细！！大家一边看一边理解吧。 图片滚动 #demo { background
javascript设置无缝滚动图片
m0_37678565的博客
06-28 785
本文能够实现无缝滚动图片，并且能够控制左右滚动，初学javaScript，若觉得有什么不妥的地方欢迎留言。 无标题文档 * {margin:0; padding:0;} #div1 {width:712px; height:108px; margin:100px auto; position: relative; background:red; overflow:hidde
js 图片水平滚动 无缝
宋有诚的专栏
07-06 2732
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">图片滚动#demo {background: #FFF;overflow:hidden
JS图片无缝运动
yangyalun的博客
04-09 412
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;link rel="stylesheet" type="text
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值