jquery banner广告图片文字无缝滚动翻滚插件



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

5 16 6



特效描述:广告图片文字 无缝滚动翻滚。jquery banner广告图片文字无缝滚动翻滚插件

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/Marquee.js"></script>

2. HTML代码

<div class="demopage">
	<h2>一次横向滚动一个</h2>
	<div id="marquee1">
		<ul>
			<li><a href="http://www.51qianduan.com/" title="jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动"><img width="150" height="150" alt="jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动" src="images/1.jpg" /></a></li>
			<li><a href="http://www.51qianduan.com/" title="jquery 滚动条 Scrollbar 设置浏览器默认滚动条样式"><img width="150" height="150" alt="jquery 滚动条 Scrollbar 设置浏览器默认滚动条样式" src="images/2.jpg" /></a></li>
			<li><a href="http://www.51qianduan.com/" title="jquery 图片切换 switchable 带左右按钮控制分页索引图片切换"><img width="150" height="150" alt="jquery 图片切换 switchable 带左右按钮控制分页索引图片切换" src="images/3.jpg" /></a></li>
			<li><a href="http://www.51qianduan.com/" title="jquery powerFloat万能浮动框提示插件 支持图片、文字、ajax异步加载、表单验证等"><img width="150" height="150" alt="jquery powerFloat万能浮动框提示插件 支持图片、文字、ajax异步加载、表单验证等" src="images/4.jpg" /></a></li>
		</ul>
	</div>
	<div class="control">↓鼠标点击:<a href="javascript:void(0);" id="goL">左移一次</a> <a href="javascript:void(0);" id="goR">右移一次</a></div>
	<h2>一次纵向滚动一个</h2>
	<div id="marquee2">
		<ul>
			<li><a target="_blank" href="http://www.51qianduan.com/" title="jquery 表单美化 jquery tzCheckbox 复选框美化 自定义默认复选框"><img width="150" height="150" alt="jquery 表单美化 jquery tzCheckbox 复选框美化 自定义默认复选框" src="images/1.jpg" /></a></li>
			<li><a target="_blank" href="http://www.51qianduan.com/" title="jquery 图片放大镜 图片类似放大镜效果鼠标滑过小图异步加载中图、大图"><img width="150" height="150" alt="jquery 图片放大镜 图片类似放大镜效果鼠标滑过小图异步加载中图、大图" src="images/2.jpg" /></a></li>
			<li><a target="_blank" href="http://www.51qianduan.com/" title="jquery 图片幻灯片 点击小图显示大图异步加载 支持按钮播放"><img width="150" height="150" alt="jquery 图片幻灯片 点击小图显示大图异步加载 支持按钮播放" src="images/3.jpg" /></a></li>
			<li><a target="_blank" href="http://www.51qianduan.com/" title="jquery Xslider 插件焦点图片特效图片淡隐淡现、图片上下滚动、图片左右滚动、选项卡"><img width="150" height="150" alt="jquery Xslider 插件焦点图片特效图片淡隐淡现、图片上下滚动、图片左右滚动、选项卡" src="images/4.jpg" /></a></li>
		</ul>
	</div>
	<div class="control">↓鼠标点击:<a href="javascript:void(0);" id="goU">上移一次</a> <a href="javascript:void(0);" id="goD">下移一次</a></div>
	<h2>一次滚动一屏</h2>
	<div class="marqueebox">
		<div id="marquee3">
			<ul>
				<li><a target="_blank" href="http://www.51qianduan.com/" title="jquery 文字连续滚动 节奏感十足的齿轮式滚动图片展示与文字内容特效展示"><img width="620" height="340" alt="jquery 文字连续滚动 节奏感十足的齿轮式滚动图片展示与文字内容特效展示" src="images/big/1.jpg" /></a></li>
				<li><a target="_blank" href="http://www.51qianduan.com/" title="jquery cycle 循环幻灯片插件多功能幻灯片插件支持多种幻灯片特效"><img width="620" height="340" alt="jquery cycle 循环幻灯片插件多功能幻灯片插件支持多种幻灯片特效" src="images/big/2.jpg" /></a></li>
				<li><a target="_blank" href="http://www.51qianduan.com/" title="jquery轻量级进度条 progressbar 带动画显示的进度过程的jquery进度条特效"><img width="620" height="340" alt="jquery轻量级进度条 progressbar 带动画显示的进度过程的jquery进度条特效" src="images/big/3.jpg" /></a></li>
				<li><a target="_blank" href="http://www.51qianduan.com/" title="jquery菜单特效 鼠标滑过菜单区域图标和文本类似flash动画酷炫移动展示"><img width="620" height="340" alt="jquery菜单特效 鼠标滑过菜单区域图标和文本类似flash动画酷炫移动展示" src="images/big/4.jpg" /></a></li>
			</ul>
		</div>
		<div id="mar3Nav"></div>
	</div><!--marqueebox end-->
	<h2>默认不动,可做图片导航</h2>
	<div id="marquee4">
		<ul>
			<li><a target="_blank" href="http://www.51qianduan.com/" title="javascript jscolor colorpicker js颜色选择器插件10多种调用颜色方法与取值"><img width="150" height="150" class="pic-04" alt="javascript jscolor colorpicker js颜色选择器插件10多种调用颜色方法与取值" src="images/1.jpg" /></a></li>
			<li><a target="_blank" href="http://www.51qianduan.com/" title="javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动"><img width="150" height="150" class="pic-04" alt="javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动" src="images/2.jpg" /></a></li>
			<li><a target="_blank" href="http://www.51qianduan.com/" title="javascript滚动图片插件支持单排图片上下滚动、图片无缝滚动"><img width="150" height="150" class="pic-04" alt="javascript滚动图片插件支持单排图片上下滚动、图片无缝滚动" src="images/3.jpg" /></a></li>
			<li><a target="_blank" href="http://www.51qianduan.com/" title="js多功能选项卡插件 选项卡自动切换内容图片延迟加载"><img width="150" height="150" class="pic-04" alt="js多功能选项卡插件 选项卡自动切换内容图片延迟加载" src="images/4.jpg" /></a></li>
		</ul>
	</div>
	<div class="control">↑鼠标点击:<a href="javascript:void(0);" id="goL2">左移一屏</a> <a href="javascript:void(0);" id="goR2">右移一屏</a></div>
	<h2>间隙上下文字自动滚动 支持左右自动滚动</h2>
	<div id="marquee5">
		<ul>
			<li><a href="http://www.51qianduan.com/" title="jquery colorpicker 插件颜色选择器 点击颜色选择颜色值与颜色相应变化">jquery colorpicker 插件颜色选择器 点击颜色选择颜色值与颜色相应变化</a></li>
			<li><a href="http://www.51qianduan.com/" title="jquery评论星星打分特效、鼠标滑过星星显示评论信息">jquery评论星星打分特效、鼠标滑过星星显示评论信息</a></li>
			<li><a href="http://www.51qianduan.com/" title="jquery图片切换滚动 水平手风琴切换滚动鼠标滑过图片水平切换">jquery图片切换滚动 水平手风琴切换滚动鼠标滑过图片水平切换</a></li>
			<li><a href="http://www.51qianduan.com/" title="jquery 图片切换滚动特效带分页索引按钮控制左右图片切换滚动">jquery 图片切换滚动特效带分页索引按钮控制左右图片切换滚动</a></li>
			<li><a href="http://www.51qianduan.com/" title="jquery筛选器插件选项卡 css3制作一个漂亮的HTML5筛选容器插件选项卡">jquery筛选器插件选项卡 css3制作一个漂亮的HTML5筛选容器插件选项卡</a></li>
			<li><a href="http://www.51qianduan.com/" title="jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示">jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示</a></li>
		</ul>
	</div>
	<h2>无缝上下文字滚动 支持左右无缝滚动</h2>
	<div id="marquee6">
		<ul>
			<li><a href="http://www.51qianduan.com/" title="jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果">jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果</a></li>
			<li><a href="http://www.51qianduan.com/" title="制作CSS3和HTML5的一个单页网站模板">制作CSS3和HTML5的一个单页网站模板</a></li>
			<li><a href="http://www.51qianduan.com/" title="jquery 幻灯片切换应用一个HTML5的幻灯片">jquery 幻灯片切换应用一个HTML5的幻灯片</a></li>
			<li><a href="http://www.51qianduan.com/" title="jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3">jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3</a></li>
			<li><a href="http://www.51qianduan.com/" title="用div+css制作纯CSS下拉菜单,兼容IE6 IE7 IE8及以上 Firefox">用div+css制作纯CSS下拉菜单,兼容IE6 IE7 IE8及以上 Firefox</a></li>
			<li><a href="http://www.51qianduan.com/" title="CSS如何定位工程">CSS如何定位工程</a></li>
		</ul>
	</div>
	<div class="control">↑鼠标按住:<a href="javascript:void(0);" id="goUM">加速上移</a> <a href="javascript:void(0);" id="goDM">加速下移</a></div>
</div><!--demopage end-->



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动导航菜单 滚动切换 图片滚动 文字滚动 图片文字滚动 全屏滚动 页面滚动 滚动流动 自动滚动图片轮播

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到