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



225 899 300



特效描述: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-->



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


热门标签: 滚动导航菜单 导航切换 图片头像上传 带标题的焦点图 滚动切换 文件上传 带缩略图的幻灯片 带简介的焦点图 图片滚动 图片切换 文本框 图片轮播 文字滚动 文字切换 下拉框 自动滚动图片轮播 背景切换 复选 图片文字滚动 马赛克幻灯片 手风琴 单选 全屏滚动 全屏焦点图 选项卡自动切换 登录框 页面滚动 视频切换 注册框 列表切换 搜索框 验证码 渐隐切换 二级联动 全屏切换 三级联动 切换按钮 城市选择 缩放切换 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 滚动流动 滚动切换 滑动选项卡切换 flash焦点图 自动滚动图片轮播 选项卡切换 滑动手风琴 切换按钮 form表单 焦点图幻灯片

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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