021 无缝滚动与滚动方向控制

最新推荐文章于 2022-04-24 16:51:27 发布
最新推荐文章于 2022-04-24 16:51:27 发布
阅读量176 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Chary_Simon/article/details/80065731
版权 
<!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>
#div1{position:relative; left:100px; top:100px; width:800px; height:150px; overflow:hidden; border:2px #006666 solid;}
#div1 ul{position:absolute; left:0; top:0;}  
#div1 ul li{width:125px; height:125px;list-style:none; float:left;}
#a1{position:absolute; left:50px; top:175px;}
#a2{position:absolute; left:930px; top:175px;}
</style>
<script>
window.onload = function(){
  var oDi1 = document.getElementById("div1");
  var oUl = oDi1.getElementsByTagName("ul")[0];
  var aLi = oUl.getElementsByTagName("li");
 
  var speed = 2;

  oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
  oUl.style.width = aLi[0].offsetWidth*aLi.length + "px";

  function move(){
    if(oUl.offsetLeft<-oUl.offsetWidth/2){
	  oUl.style.left = "0";
	}
	if(oUl.offsetLeft>0){
	  oUl.style.left = -oUl.offsetWidth/2 + "px";
	}
    oUl.style.left = oUl.offsetLeft+speed + "px";
  };
  
  var timer = setInterval(move,30);
  
  oDi1.onmouseover = function(){
    clearInterval(timer);
  }
  oDi1.onmouseout = function(){
    timer = setInterval(move,30);
  }

  document.getElementsByTagName("a")[0].onclick = function(){
    speed = -2;
  };
  document.getElementsByTagName("a")[1].onclick = function(){
    speed = 2;
  }
}
</script>
</head>

<body>
<!--移动是整个div在移动，所以div的position要设置为relative，而ul要在div内保持固定，所以posidion设置为absolute。-->
<a href="javascript:;"; id="a1"><img src="img/left.jpg"/></a>
<div id="div1">
  <ul>  
    <li><img src="img/01.jpg"/></li>
    <li><img src="img/02.jpg"/></li>
    <li><img src="img/03.jpg"/></li>
    <li><img src="img/04.jpg"/></li>
    <li><img src="img/05.jpg"/></li>
    <li><img src="img/06.jpg"/></li>
    <li><img src="img/07.jpg"/></li>
  </ul>
</div><br/><br/>
<a href="javascript:;"; id="a2"><img src="img/right.jpg"/></a>
</body>
</html>

Chary_Simon
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html实现段落左右无缝滚动,javascript实现左右控制无缝滚动
weixin_42467533的博客
06-09 363
无缝滚动是项目中经常需要用到的一种特效，网上也有很多的示例代码，这里给大家分享的是一段比较简单实用的，而且兼容性也不错的代码，小伙伴们仔细研究下吧。html 代码：<html><head lang="en"><meta charset="UTF-8"><title>无缝滚动title><script src="js/0010.js"&gt...
html无缝滚动原理,JavaScript实现图片无缝滚动效果
weixin_27372101的博客
05-31 723
图片无缝滚动就是图片一直不停的滚动，好像没有无穷无尽似的，实际上就是几张图片不停的循环，但是看不出有从最后面切换到最前面的效果，这就是无缝滚动，文字和图片都可以无缝滚动，这里介绍的是图片，文字是同样的原理。原理以向上无缝滚动为例，其余几个方向的无缝滚动原理是一样的，点击向上无缝滚动。设定一个可视区域，超过可视区域的部分隐藏，这里是将nav部分作为可视区域，ul#img是中包含所有的图片，实现无缝滚...
css实现图片（箭头）无缝滚动（向右）
10-25
css样式控制实现图片无缝滚动，移动的速度是匀速，并且速度可控。
js实现无缝滚动图（可控制当前滚动的方向）
12-09
这个版本可以控制左右滚动，鼠标点击对应的广告会自动滑动把广告完全展示出来。还实现了记录当前滚动的方向，当鼠标离开，接着继续滚动！！！ 效果图： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type = "text/css"> *{margin: 0; padding: 0;} li { list-style: none; } .box { width: 800px; height: 450px; margin: 50px auto; overflow:
带左右箭头切换控制的自动无缝滚动图片JS特效
10-16
带左右箭头切换控制的自动无缝滚动图片JS特效
图片无缝滚动
weixin_43599240的博客
05-15 322
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝滚动</title> <style type="text/css"> body,ul{ margin:0; padding:0; } .li...
带左右箭头点击切换的无缝滚动效果
04-13
现在网络上常用的焦点图带箭头点击切换，无缝滚动
html图片纵向无缝滚动,HTML内容或图片无缝滚动技巧
weixin_39624429的博客
06-02 1031
要让HTML页面的内容或图片实现无缝滚动，可以使用 marquee 这个简单的标签，不过这标签的最大问题就是不能首尾相连(无缝)滚动。使用 DIV + JS 就可以轻松实现无缝滚动：1) DIV代码：{$vo.username}{$vo.request}2) JS代码：function scroll(obj) {var tmp = (obj.scrollTop)++;//当滚动条到达顶端时if (...
js实现可控制左右方向的无缝滚动效果
10-22
在本案例中，我们重点讨论如何使用JavaScript实现一个可以控制左右滚动方向的无缝滚动效果。 首先，要实现这样的效果，我们需要了解几个关键的技术点：CSS布局、JavaScript定时器以及DOM操作。 在提供的代码示例中...
xpanel-2.0.0
09-01
xpanel-2.0.0免费空间管理系统
javascript实现可改变滚动方向的无缝滚动实例
10-27
本文将介绍如何利用JavaScript实现一个可以改变滚动方向的无缝滚动实例。 首先，我们需要理解实现无缝滚动的几个关键步骤： 1. 定义HTML结构：需要一个容器来包裹所有的图片元素，通常是一个div元素。在这个div...
javascript实现左右控制无缝滚动
10-24
实现无缝滚动的方式有很多，而使用JavaScript来实现左右控制的无缝滚动是一种灵活且常用的方法。本文将介绍使用JavaScript实现左右控制无缝滚动的方法及提供示例代码。 首先，要实现无缝滚动，需要考虑以下几个关键...
原生js实现水平方向无缝滚动
10-20
原生JavaScript实现水平方向无缝滚动是一种常见的网页动态效果，它可以使页面内容在水平方向上持续滚动，创造出一种无止境的视觉体验。这种效果通常用于显示新闻标题、滚动广告或者菜单项，使得有限的屏幕空间能展示...
纯javascript实现四方向文本无缝滚动效果
10-24
选项对象可包含多个属性，如`vis`表示可视元素的数量，`btnHidden`控制是否隐藏按钮，`dir`指定滚动方向，`type`指定滚动类型为水平(`h`)或垂直(`v`)。 在`scroll`函数内部，通过jQuery选取并定义了列表和列表项...
点击左右箭头实现内容滑动
weixin_42412179的博客
04-24 3230
实现效果： 1、通过点击左右箭头实现内容滑动 2、点击＋添加标签 3、点击×删除标签 4、点击标签 实现思路： 1、position布局 1 、通过点击左右箭头实现内容滑动 代码： html <!-- 可滑动区域和操作可滑动区域的icon --> <div class="scrollTab"> <i class="el-icon-caret-left" @click="leftClick"></i> .
【5】数据可视化：基于 Echarts + Python 实现的动态实时大屏 - 互联网热点
YYDataV的博客
07-02 4603
近年来，数据可视化大屏的出现，掀起一番又一番的浪潮，众多企业主纷纷想要打造属于自己的 “酷炫吊炸天” 的霸道总裁大屏驾驶舱。今天为大家分享的是 【互联网热点分析案例】。 话不多说，开始分享干货，欢迎讨论！QQ微信同号： 6550523 首先看动态效果图 ： 再看实时分片数据图： 一、确定需求方案 1、确定产品上线部署的屏幕LED分辨率 1280px*768px，F11全屏后占满整屏且无滚动条；其它分辨率屏幕均可自适应显示。 2、功能模块 1 水球图 2 烟花图 3...
js图片轮播左右滚动
sunlongxue8642的博客
01-08 616
#scroll{width:800px; height:150px; margin:10px auto; position:relative;overflow:hidden;} #scroll ul{position:absolute; left:-16px;; top:-5px;} #scroll ul li{float:left; width:200px; height:150px; li
uniapp 无缝滚动
最新发布
04-21
你可以在scroll-view组件中设置scroll-x属性为true，即可实现水平方向上的无缝滚动效果。 除了以上两种方式，你还可以通过自定义组件或使用第三方插件来实现无缝滚动效果。UniApp提供了丰富的插件市场，你可以在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值