html中图片无缝滚动代码及学习体会

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

我的第一篇博文

最近在学习HTML标记语言 和JAVASCRIPT，HTML与CSS还好上手，JS已经有点难度啦，因为JS对大小写很敏感，一不小心就会错或者不出效果，下面我就把最近学习的一些小经验和心得说说吧，如有不到之处还请多多包涵。
1HTML是一种描述网页的语言，是超文本标记语言（标记语言是一套标签，不是编程），使用标记标签来描述网页（让浏览器读懂你想显示的东西。）
2HTML标签对大小写不敏感，但是W3C提倡使用小写字母，所以建议编写的时候还是使用小写。
3<pre>标签很适合显示计算机代码，要是学编程的你还是建议用<pre>标签显示好看点、
4缩写：<abbr title="输入全称">输入文字</abbr>
              <acronym title="输入全称">输入文字</acronym>

5无缝图片滚动：


<!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>tab+滚动效果</title>

<link href="style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.js"></script>
</head>
<body>

	<div class="slideTxtBox2">
	
		<div class="hd">
			<ul>
				<li>大众 高尔夫</li>
				<li>大众 新宝来</li>
				<li>大众 朗逸</li>
				<li>大众 迈腾</li>
			</ul>
			<div class="btn">
				<div class="prev"></div>
				<div class="next"></div>
			</div>
		</div>
		
		<div class="bd">
		
			<div id="leftMarquee" class="infoList">
				<div class="bdr">
					<ul>
						<li class="hceg"><img src="images/01.jpg" width="176" height="126" />一汽大众 高尔夫</li>
						<li class="hceg"><img src="images/02.jpg" width="176" height="126" />一汽大众 高尔夫</li>
						<li class="hceg"><img src="images/03.jpg" width="176" height="126" />一汽大众 高尔夫</li>
						<li class="hceg"><img src="images/04.jpg" width="176" height="126" />一汽大众 高尔夫</li>
						<li class="hceg"><img src="images/05.jpg" width="176" height="126" />一汽大众 高尔夫</li>
						<li class="hceg"><img src="images/06.jpg" width="176" height="126" />一汽大众 高尔夫</li>
					</ul>
				</div>
				<script type="text/javascript">$("#leftMarquee").slide({mainCell:".bdr ul",effect:"leftMarquee",vis:5,interTime:40,autoPlay:true});</script>
			</div>
			
			<div id="leftMarquee11" class="infoList">
				<div class="bdr">
					<ul>
						<li class="hceg"><img src="images/03.jpg" width="176" height="126" />一汽大众 高尔夫</li>
						<li class="hceg"><img src="images/01.jpg" width="176" height="126" />一汽大众 高尔夫</li>
						<li class="hceg"><img src="images/02.jpg" width="176" height="126" />一汽大众 高尔夫</li>
						<li class="hceg"><img src="images/06.jpg" width="176" height="126" />一汽大众 高尔夫</li>
						<li class="hceg"><img src="images/04.jpg" width="176" height="126" />一汽大众 高尔夫</li>
						<li class="hceg"><img src="images/05.jpg" width="176" height="126" />一汽大众 高尔夫</li>
					</ul>
				</div>
				<script type="text/javascript">$("#leftMarquee11").slide({mainCell:".bdr ul",effect:"leftMarquee",vis:5,interTime:40,autoPlay:true });</script>
			</div>

			<div id="leftMarquee22" class="infoList">
				<div class="bdr">
					<ul>
						<li class="hceg"><img src="images/06.jpg" width="176" height="126" />一汽大众 高尔夫</li>
						<li class="hceg"><img src="images/04.jpg" width="176" height="126" />一汽大众 高尔夫</li>
						<li class="hceg"><img src="images/01.jpg" width="176" height="126" />一汽大众 高尔夫</li>
						<li class="hceg"><img src="images/02.jpg" width="176" height="126" />一汽大众 高尔夫</li>
						<li class="hceg"><img src="images/03.jpg" width="176" height="126" />一汽大众 高尔夫</li>
						<li class="hceg"><img src="images/05.jpg" width="176" height="126" />一汽大众 高尔夫</li>
					</ul>
				</div>
				<script type="text/javascript">$("#leftMarquee22").slide({mainCell:".bdr ul",effect:"leftMarquee",vis:5,interTime:40,autoPlay:true });</script>
			</div>

			<div id="leftMarquee33" class="infoList">
				<div class="bdr">
					<ul>
						<li class="hceg"><img src="images/04.jpg" width="176" height="126" />一汽大众 高尔夫</li>
						<li class="hceg"><img src="images/02.jpg" width="176" height="126" />一汽大众 高尔夫</li>
						<li class="hceg"><img src="images/01.jpg" width="176" height="126" />一汽大众 高尔夫</li>
						<li class="hceg"><img src="images/03.jpg" width="176" height="126" />一汽大众 高尔夫</li>
						<li class="hceg"><img src="images/06.jpg" width="176" height="126" />一汽大众 高尔夫</li>
						<li class="hceg"><img src="images/05.jpg" width="176" height="126" />一汽大众 高尔夫</li>
					</ul>
				</div>
				<script type="text/javascript">$("#leftMarquee33").slide({mainCell:".bdr ul",effect:"leftMarquee",vis:5,interTime:40,autoPlay:true });</script>
			</div>

		</div>
	</div>

	<script type="text/javascript">$(".slideTxtBox2").slide();</script>

</body>
</html>

                源文件下载，请点击下面链接地址。                     



点击打开链接


漠河之北
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html中图片自动循环滚动代码,实现长图片自动循环滚动效果
weixin_27127993的博客
05-31 7745
实现思路滚动效果用实现。有个方法，可以滚动到指定位置(有滚动效果，不是直接到指定位置)，不了解的看这里种定位滚动方式演示。每一个Item是一张长图，这样首尾相接滚动起来(滚到无限远)就是无限循环的效果，然后再改变滚动的速度，就可以了。{;@(){(savedInstanceState);//全屏getWindow().setFlags(WindowManager.LayoutParams.FLAG...
网页图片无缝循环滚动html代码
10-30
网页图片无缝循环滚动html代码,各种滚动方式源代码
【前端】实现图片无缝滚动·教程
qq_45677671的博客
02-04 590
文章目录效果图：需求分析：源代码：所用图片： 效果图： 需求分析： 实现无缝滚动 源代码： HTML部分 <div id="box"> <ul id="u"> <li><img src="a.jpg" alt="" /></li> <li><img src="b.jpg" alt="" /></li> <li><img src="c.jpg" alt="" />&l
前端必备技能——轮播图（原生代码+插件）
最新发布
2301_76232361的博客
04-15 1351
确认插件实现的功能去官网。
html 无缝滚动图片,两个非常简单的JS图片无缝滚动代码
weixin_39932611的博客
06-07 651
图片无缝滚动实现一图片无缝滚动代码|www.125jz.com.picutre{overflow: hidden; height: 150px; width: 800px; margin: 0 auto;}.picutre img{width:200px; height:150px; border:0px;}/*图片滚动效果*/var speedpic = 20;//速度数值越大速度越慢docum...
前端优化实践总结
测试
04-12 234
记得前百度工程师张云龙说过，页面前端优化问题绝对不仅仅是为页面提速的问题，更是工程的问题，有兴趣的同学可以阅读《前端工程与性能优化》。里面有提到根据雅虎14条优化原则，《高性能网站建设指南》以及《高性能网站建设进阶指南》中提到的优化点梳理出来的优化方向：张云龙先生提及到的优化方向从提出到现在虽已相隔两年时间，前端技术也在飞速发展，但其提到的工程化思想仍是前端优化的一个大方向，亦有很大的指导意义。当...
html图片左右无缝循环滚动示例
热门推荐
喻志强的博客
11-28 4万+
首先，最外层的宽高要给个固定值，然后给个overflow: hidden;，放不下的图片隐藏。 原理：（以左方向为例）先向左移动一个图片的宽度，此时第一个图片已经看不见了，这个时候将第一个标签元素克隆后追加到末尾，然后将第一个元素移除。达到循环滚动的效果。右移也是同理。下面是代码实现和demo<!DOCTYPE html> <html> <head> <meta charse
jquery上下左右图片无缝滚动代码
04-07
"jquery上下左右图片无缝滚动代码"是一个基于jQuery的插件，主要用于创建图片滚动展示的效果，尤其适用于产品展示或者新闻更新等场景。 这个插件允许图片在页面上实现上下或左右的平滑滚动，给用户带来连续、无断裂...
图片无缝滚动插件上下左右图片无缝滚动代码.zip
07-11
通过这个压缩包内的代码，开发者可以学习到如何使用JavaScript和CSS实现图片无缝滚动效果，同时也可以根据自己的项目需求进行相应的调整和扩展。对于网页设计师和前端开发者来说，掌握这样的技术能够提升网页的互动...
js无缝滚动代码制作js图片无缝滚动向上无缝滚动
11-17
首先，我们需要在HTML中设置一个包含所有图片的容器，例如`<div>`，并给每个图片设置相应的样式，确保它们在同一行排列。容器通常需要设置`overflow:hidden`以隐藏超出的部分。 ```html <!-- 更多图片... -...
JS与HTML结合使用marquee标签实现无缝滚动效果代码
10-22
在本文中，我们将深入探讨如何使用JavaScript（JS）与HTML中的`<marquee>`标签结合，来实现一个无缝滚动效果。`<marquee>`标签在HTML中被用来创建元素（如文字或图像）的滚动效果，而通过JavaScript，我们可以对其...
一个好看的图片滚动html模板
10-15
一个好看的图片滚动html模板，可以将多个大图进行滚动，使用jquery组件
js产品图片无缝滚动代码向左和向上图片无缝滚动代码
11-12
在电商网站或产品展示页面中，图片无缝滚动是一种常见的视觉设计手法，它能够吸引用户的注意力，提升用户体验。本文将深入讲解如何使用JS实现产品图片的向左和向上无缝滚动效果。 首先，我们需要理解无缝滚动的基本...
SuperSlide插件的用法
m0_52173534的博客
08-10 2928
SuperSlide是基于JQuery的一个轮播图插件，使用它可以便捷使用各种样式的轮播图 1.首先使用SuperSlide需要下载js文件 可以通过网址下载： http://www.superslide2.com/index.html 2.下载完成后解压，会有一个文件夹 3.将里面的js文件导入项目， 代码： <script src="js/SuperSlide2.1-demo-00/jquery1.42.min.js"></script> <script src="
html5实现无缝滚动的效果
qingmulang的博客
11-15 1万+
在开发中我们经常会看到这样的应用场景。无缝滚动。就是几张图循环播放。图就不上了 ，不会制作gif。 直接上代码，避免以后重复造车轮。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>走马灯效果</title> <style type="text/css">
html5无缝图片移动,html5 图片无缝滚动
weixin_39964660的博客
06-07 386
实现现图片的无缝滚动就是要让你的图片集在一定时间里自动切换，那就需要js里的定时器来控制时间。js中关于定时器的方法有两种：setTimeout和setInterval。它们接收的参数是一样的，第一个参数是函数，用于定时器的执行，第二个参数是数字，表示多少毫秒之后执行函数。它们的不同点在于setTimeout只执行一次指定的函数，而setInterval则每隔规定的时间就执行一次指定的函数。在定时...
html5文字无缝滚动,js代码实现无缝滚动(文字和图片)
weixin_33212915的博客
06-07 304
一款适用于方案和图片的JS无缝滚动代码，可控制向左或向右滚动，代码不算复杂，而且本无缝滚动代码兼容性也挺好，你几乎不需要修改什么代码，就能使用了。测试时候把那些带标号的方块都改成图片吧，这样就更有感觉了。代码如下：无缝滚动* { margin: 0; padding: 0; }.other { width: 100%; height: 50px; background: #F00; }.main ...
动手写一个HTML5的无限循环滚动焦点图
Icecream'code
06-08 6623
现在每个门户网站基本上一打开都是一个大大的焦点图，各种炫酷的滚动的效果。网上也有各式各样的插件，简单好用。但是如果我们能够写一个好用的焦点图滚动插件那岂不是更有成就感？其实也是很简单的，废话不多说动手吧。 给个Demo地址：http://www.ilibing.com/demo/slider.html 首先讲一下无限滚动焦点图的原理： 先用文字表达
jQuery简易的图片无缝滚动代码
05-19
以下是一个简单的 jQuery 代码示例，可以实现图片的无缝滚动： HTML 代码： ``` <div class="scroll-container"> <div class="scroll-wrapper"> <img src="image1.jpg" alt="Image 1"> <img src="image2.jpg" alt="Image 2"> <img src="image3.jpg" alt="Image 3"> <img src="image4.jpg" alt="Image 4"> </div> </div> ``` CSS 代码： ``` .scroll-container { width: 100%; overflow: hidden; } .scroll-wrapper { display: flex; animation: scroll 20s linear infinite; } .scroll-wrapper img { width: 100%; height: auto; } @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } } ``` jQuery 代码： ``` $(function() { // 获取图片数量 var count = $('.scroll-wrapper img').length; // 复制第一张图片并插入到最后 $('.scroll-wrapper img:first').clone().appendTo('.scroll-wrapper'); // 设置总宽度 var totalWidth = count * 100; $('.scroll-wrapper').css('width', totalWidth + '%'); // 每张图片的宽度 var itemWidth = 100 / count; $('.scroll-wrapper img').css('width', itemWidth + '%'); }); ``` 说明： 1. 首先，我们需要将所有图片放在一个包含 `overflow: hidden` 样式的容器中，这样才能隐藏超出容器宽度的部分。 2. 然后，使用 flexbox 布局来让所有图片排列在一行，并且设置一个动画来实现滚动效果。 3. 在 jQuery 中，我们需要获取图片数量、复制第一张图片并插入到最后、设置总宽度和每张图片的宽度等操作。 4. 最后，我们可以根据需要调整 CSS 样式和动画时间等参数。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值