jquery banner广告图片滚动插件制作图片与文字无缝滚动 图片翻滚 焦点图左右切换



176 701 234



特效描述:jquery banner 图片滚动 无缝滚动 图片翻滚 焦点图左右切换,jquery banner广告图片滚动插件,图片上下滚动、左右滚动、文字上下滚动、左右滚动、图片无缝滚动、文字无缝滚动、按钮控制图片滚动、按钮控制文字滚动、图片或文字设置加减速滚动、焦点图左右切换、banner广告制作等,kxbdSuperMarquee 是一款多功能滚动插件。

代码结构

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.dijiuzhanzhang.com/" title="jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动"><img width="150" height="150" alt="jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动" src="images/1.jpg" /></a></li>
			<li><a href="http://www.dijiuzhanzhang.com/" title="jquery 滚动条 Scrollbar 设置浏览器默认滚动条样式"><img width="150" height="150" alt="jquery 滚动条 Scrollbar 设置浏览器默认滚动条样式" src="images/2.jpg" /></a></li>
			<li><a href="http://www.dijiuzhanzhang.com/" title="jquery 图片切换 switchable 带左右按钮控制分页索引图片切换"><img width="150" height="150" alt="jquery 图片切换 switchable 带左右按钮控制分页索引图片切换" src="images/3.jpg" /></a></li>
			<li><a href="http://www.dijiuzhanzhang.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.dijiuzhanzhang.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.dijiuzhanzhang.com/" title="jquery 图片放大镜 图片类似放大镜效果鼠标滑过小图异步加载中图、大图"><img width="150" height="150" alt="jquery 图片放大镜 图片类似放大镜效果鼠标滑过小图异步加载中图、大图" src="images/2.jpg" /></a></li>
			<li><a target="_blank" href="http://www.dijiuzhanzhang.com/" title="jquery 图片幻灯片 点击小图显示大图异步加载 支持按钮播放"><img width="150" height="150" alt="jquery 图片幻灯片 点击小图显示大图异步加载 支持按钮播放" src="images/3.jpg" /></a></li>
			<li><a target="_blank" href="http://www.dijiuzhanzhang.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.dijiuzhanzhang.com/" title="jquery 文字连续滚动 节奏感十足的齿轮式滚动图片展示与文字内容特效展示"><img width="620" height="340" alt="jquery 文字连续滚动 节奏感十足的齿轮式滚动图片展示与文字内容特效展示" src="images/big/1.jpg" /></a></li>
				<li><a target="_blank" href="http://www.dijiuzhanzhang.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.dijiuzhanzhang.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.dijiuzhanzhang.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.dijiuzhanzhang.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.dijiuzhanzhang.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.dijiuzhanzhang.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.dijiuzhanzhang.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.dijiuzhanzhang.com/" title="jquery colorpicker 插件颜色选择器 点击颜色选择颜色值与颜色相应变化">jquery colorpicker 插件颜色选择器 点击颜色选择颜色值与颜色相应变化</a></li>
			<li><a href="http://www.dijiuzhanzhang.com/" title="jquery评论星星打分特效、鼠标滑过星星显示评论信息">jquery评论星星打分特效、鼠标滑过星星显示评论信息</a></li>
			<li><a href="http://www.dijiuzhanzhang.com/" title="jquery图片切换滚动 水平手风琴切换滚动鼠标滑过图片水平切换">jquery图片切换滚动 水平手风琴切换滚动鼠标滑过图片水平切换</a></li>
			<li><a href="http://www.dijiuzhanzhang.com/" title="jquery 图片切换滚动特效带分页索引按钮控制左右图片切换滚动">jquery 图片切换滚动特效带分页索引按钮控制左右图片切换滚动</a></li>
			<li><a href="http://www.dijiuzhanzhang.com/" title="jquery筛选器插件选项卡 css3制作一个漂亮的HTML5筛选容器插件选项卡">jquery筛选器插件选项卡 css3制作一个漂亮的HTML5筛选容器插件选项卡</a></li>
			<li><a href="http://www.dijiuzhanzhang.com/" title="jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示">jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示</a></li>
		</ul>
	</div>
	<h2>无缝上下文字滚动 支持左右无缝滚动</h2>
	<div id="marquee6">
		<ul>
			<li><a href="http://www.dijiuzhanzhang.com/" title="jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果">jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果</a></li>
			<li><a href="http://www.dijiuzhanzhang.com/" title="制作CSS3和HTML5的一个单页网站模板">制作CSS3和HTML5的一个单页网站模板</a></li>
			<li><a href="http://www.dijiuzhanzhang.com/" title="jquery 幻灯片切换应用一个HTML5的幻灯片">jquery 幻灯片切换应用一个HTML5的幻灯片</a></li>
			<li><a href="http://www.dijiuzhanzhang.com/" title="jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3">jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3</a></li>
			<li><a href="http://www.dijiuzhanzhang.com/" title="用div+css制作纯CSS下拉菜单,兼容IE6 IE7 IE8及以上 Firefox">用div+css制作纯CSS下拉菜单,兼容IE6 IE7 IE8及以上 Firefox</a></li>
			<li><a href="http://www.dijiuzhanzhang.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-->



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


热门标签: 滚动 滚动条 页面滚动 滚动插件 滚动条插件 滚动条美化 滑动选项卡 滑动切换 滚动切换 滚动条切换 flash焦点图 flash幻灯片 flashbanner flash图片轮播 自动滚动图片轮播 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 切换按钮 表单 表单美化 表单插件 表单美化插件 焦点图 幻灯片 轮播图 bar焦点图 图片滚动 图片滚动条 纯图片轮播 图片轮播 文字滚动 文字无缝滚动 文字间歇滚动 自动滚动图片轮播 选项卡自动切换 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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