图片水平滚动效果

最新推荐文章于 2022-07-03 17:31:20 发布
最新推荐文章于 2022-07-03 17:31:20 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： web网络开发技术

DIV+CSS+JS实现图片<ul><li></li></ul>无缝滚动代码 走马灯

DIV+CSS+JS实现<ul><li></li></ul>图片无缝滚动 走马灯 （含上下左右滚动代码）

<!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>
<title></title>
<style type="text/css">
<!--
UL {
 PADDING-RIGHT: 0px;
 PADDING-LEFT: 0px;
 LIST-STYLE-POSITION: outside;
 PADDING-BOTTOM: 0px;
 MARGIN: 0px;
 PADDING-TOP: 0px;
 LIST-STYLE-TYPE: none;
 overflow: hidden;
}


#S_LIST LI {
 width:154px;
 height:auto;
 float:left;
 padding: 0px;
 margin: 0px;
 list-style-image: none;
 list-style-type: none;
}
#S_LIST A {
 DISPLAY: block;
 MARGIN: 0px;
 WIDTH: 154px;
 HEIGHT: auto;
 TEXT-ALIGN: center;
 padding-top: 3px;
 padding-right: 0px;
 padding-bottom: 3px;
 padding-left: 0px;
}
#demo {
 background: #FFF;
 overflow:hidden;
 border: 1px dashed #CCC;
 width: 930px;
 height:180px;
}
#demo img {
border: 1px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
 float: left;
}
#demo2 {
float: left;
}
-->
</style>
</head>
<body>
<div id="demo">
<div id="indemo">
<div id="demo1">
    <ul id="S_LIST">    
      <li><a href="#"><img src="1.jpg" width="154" height="130" border="0" /></a>
      <a href="#" >1</a></li>

      <li><a href="#"><img src="2.jpg" width="154" height="130" border="0" /></a>
      <a href="#" >2</a></li>

      <li><a href="#"><img src="3.jpg" width="154" height="130" border="0" /></a>
      <a href="#" >3</a></li>

      <li><a href="#"><img src="4.jpg" width="154" height="130" border="0" /></a>
      <a href="#" >4</a></li>

      <li><a href="#"><img src="5.jpg" width="154" height="130" border="0" /></a>
      <a href="#" >5</a></li>

      <li><a href="#"><img src="6.jpg" width="154" height="130" border="0" /></a>
      <a href="#" >6</a></li>

      <li><a href="#"><img src="7.jpg" width="154" height="130" border="0" /></a>
      <a href="#" >7</a></li>

      <li><a href="#"><img src="8.jpg" width="154" height="130" border="0" /></a>
      <a href="#" >8</a></li>

      <li><a href="#"><img src="9.jpg" width="154" height="130" border="0" /></a>
      <a href="#" >9</a></li>
</ul>
</div>
<div id="demo2"></div>
</div>
</div>
<script>
<!--
var speed=10;
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.οnmοuseοver=function() {clearInterval(MyMar)};
tab.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>
</body>
</html>

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

 

上下滚动代码：

<div id="demo" style="overflow:hidden;height:500px;width:120px; border:1px solid #dde5bc; overflow:hidden;float:left">
<div id=demo1> 
<img src="images/js01.gif" width="120" height="120">
<img src="images/js02.gif" width="120" height="120"> 
<img src="images/js03.gif" width="120" height="120">
<img src="images/js04.gif" width="120" height="120">
<img src="images/js05.gif" width="120" height="120">
<img src="images/js06.gif" width="120" height="120">
<img src="images/js07.gif" width="120" height="120">
<img src="images/js08.gif" width="120" height="120">
<img src="images/js09.gif" width="120" height="120">

</div>
<div id=demo2></div>
</div>
<script>
var speed=40
var demo=document.getElementById("demo");
var demo2=document.getElementById("demo2");
var demo1=document.getElementById("demo1");
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)
demo.οnmοuseοver=function() {clearInterval(MyMar)}
demo.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
</script>

企业猎人
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
水平方向无缝滚动的图片特效
weixin_45884768的博客
12-05 1750
1 编写HTML文件 在这里插入代码片 2 编写CSS样式 在这里插入代码片 3 编定JS脚本 在这里插入代码片
jquery实现图片水平滚动效果代码分享
10-23
【jQuery实现图片水平滚动效果】 在网页设计中，图片滚动是一种常见的动态展示方式，它可以吸引用户的注意力并增加网站的互动性。jQuery库以其强大的DOM操作和事件处理能力，成为实现这种效果的理想工具。本篇文章...
图片水平滚动
一个老码农
04-30 662
                    cellspace="0">                           　　图片的位置                                                     var speed=50;  document.getElementById("demo2").innerHTML= document.getElemen
想实现一个图片水平滚动的效果
houtaocheng9962的博客
01-02 599
有点像网易或者凤凰那种查看新闻多张图的实现效果，通过滑动从网络加载下一张或者上一张图片，写了很久发现还是有问题，在线求解。。坐等大神。 图片加载不报错，但是就是没有显示图片，网络请求也是发送出去了的。这里用的是volley请求网络. 图片加载的Fragment: import android.content.Context; import android.os.Bundle; i
jquery实现图片水平滚动效果
06-11
在实现图片水平滚动效果时，jCoverflip能很好地模拟真实的翻页体验，使用户能够流畅地浏览一组图片。 要实现这个效果，首先需要在HTML文件中引入jQuery库和jCoverflip插件的JS与CSS文件。通常，这些文件可以从CDN或...
Android使用Recyclerview实现图片水平自动循环滚动效果
08-29
"Android使用Recyclerview实现图片水平自动循环滚动效果" Android 中使用 RecyclerView 实现图片水平自动循环滚动效果是一种常见的需求， especialmente 在一些新闻客户端、社交媒体应用程序和电子商务平台中，...
水平滚动图片网页特效
11-13
水平滚动图片网页特效是一种常见的网页设计手法，它能够为用户带来独特的浏览体验，尤其是在展示大量图片或需要强调视觉流动感的网站中。这种特效通常利用JavaScript、CSS3或者专门的库如jQuery来实现，使图片在水平...
css+js图片水平滚动
06-07
这个主题“css+js图片水平滚动带控制按钮”涵盖了使用CSS和JavaScript技术实现一个功能完备、简单易用的图片水平滚动效果。下面将详细阐述这一技术实现的关键点。 首先，CSS（Cascading Style Sheets）是用于描述...
css实现图片横向排列滚动效果
09-27
主要介绍了css实现图片横向排列滚动效果,需要的朋友可以参考下
swiftUI中，水平滚动图片
幻影的博客
08-07 382
工具版本： xcode: 12.5.1 swift: 5.4.2 代码示例： import SwiftUI struct CategoryCell: View { // 分类名称 let categoryName: String // landmarks分类后的集合 let landmarks: [LandmarkTest] var body: some View { VStack(alignment: .leading
JS特效——图片水平滚动
dfay89490的博客
12-12 214
具体源码如下： <!doctype html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name=...
水平滚动选择图片 html,jquery实现图片水平滚动效果代码分享
weixin_39842475的博客
06-03 243
本文实例讲述了jquery实现图片水平滚动效果，分享给大家供大家参考。具体如下：运行效果图：-------------------查看效果-------------------小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。为大家分享的jquery实现图片水平滚动效果代码如下jquery实现图片水平滚动效果style="width: 120px; display: inline-block...
实现页面或元素内容水平滚动
m0_71631193的博客
07-03 1002
鼠标滚轮默认是用来控制垂直滚动的。当水平内容溢出时，溢出的内容展示可以通过滚轮来控制将会大大提示用户使用体验。scrollLeft属性用来表示滚动条到左边内容的距离，类型为number。在实现水平滚动效果时，改变该属性的值，页面就会移动一定距离。详见scrollLeft。当鼠标滚轮向前滚动一轮，scrollLeft属性减小一定大小；当鼠标滚轮向后滚动一轮，scrollLeft属性增加一定大小。 减小和增大的值可以用一个数据（状态）来表示，这个数据就是下面要用到的deltaY，deltaY的值为正对应增加，为
html 文字、图片水平无限滚动
热门推荐
Aliguagua的博客
12-16 2万+
html 文字、图片水平无限滚动经常在淘宝、京东的app页面中看见水平的广告轮播和中奖信息的轮播。我知道的实现这种无限滚动效果的方法有三种： 使用CSS3样式实现 使用js实现 marquee标签（好像不推荐使用了，我没用过，百度可以找到挺多相关博客的） 1.方式不管是用css实现还是js，实现方式是差不多的。为了让无限循环滚动时内容衔接更好一点，滚动内容会有两份一模一样的，大概步骤如下： 2.C
html中怎么在图片上添加滚动文字效果,jquery实现marquee效果(文字或者图片的水平垂直滚动)...
weixin_34079177的博客
06-03 428
原本在前端html代码中，实现文字或者图片的水平垂直滚定，都是使用的marquee，但随着考虑浏览器的兼容性和符合为w3c的标准，后来想想那还是使用javascript代码来实现。后来又喜欢上了jquery，下面写的内容希望对初学者有些帮助，高手勿喷，但欢迎指导，感激不尽。原理：无缝滚动的原理，就是利用两个内容相同的容器，来达到欺骗人的视觉的效果。然后通过整个大容器滚动条的左右或者上下的移动来实现...
在h5中运用简单的css达到水平滚动的效果
分享人生
08-31 1万+
当我们在浏览器上要达到一块区域的水平或垂直能够滚动，有很多种通过不同的语言实现的方式，接下来介绍的就是其中最简单的一种.
HTML中实现图片滚动效果
LB228988的专栏
11-24 1万+
HTML中实现滚动效果网页中多的不能再说了，一般的网站都有图片滚动效果，突然滚动出一个美女让你点击，这样也是一个网站获取流量的方式，今天我也做了个测试，实现简单的图片滚动效果 注释： 1) scrollAmount。它表示速度，值越大速度越快。 2) 加入onmouseover=stop() onmouseout=start()代码，鼠标真想图片的时候图片停止滚动，当鼠标离开图片
html图片滚动效果代码
最新发布
05-29
图片滚动效果 .container { overflow: hidden; width: 500px; height: 200px; } .slider { display: flex; width: 1000px; height: 200px; animation: slide 10s infinite; } ....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值