js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:js代码_js特效免费下载_JS特效代码网 > 网页特效 > JS广告代码 > JS幻灯片

jquery SuperSlide插件实现商品轮播切换滚动特效

发布时间:2015-08-30 22:06:24    您是第0位浏览者

本js特效代码兼容:ie6 、ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器

jquery SuperSlide插件实现商品轮播切换滚动特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">    
	<html xmlns="http://www.w3.org/1999/xhtml">    
	<head>    
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    
		<title>jquery SuperSlide插件实现商品轮播切换滚动特效</title>    
		<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>    
		<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>    
	</head>    
	<body>    
		<style type="text/css">    
		/* css 重置 */    
		*{margin:0; padding:0; list-style:none; }    
		body{ background:#fff; font:normal 12px/22px 宋体;  }    
		img{ border:0;  }    
		a{ text-decoration:none; color:#333;  }    
		/* 本例子css */    
		.picScroll-left{ width:1200px;  overflow:hidden; position:relative;  border:1px solid #ccc; height: 280px; margin: auto auto; top: 30px;}    
		.picScroll-left .hd{ overflow:hidden;  height:30px; background:#f4f4f4; padding:0 10px;  }    
		.picScroll-left .hd .prev,.picScroll-left .hd .next{ display:block;  width:5px; height:9px; float:right; margin-right:5px; margin-top:10px;  overflow:hidden;    
			cursor:pointer; background:url("images/arrow.png") no-repeat;}    
		.picScroll-left .hd .next{ background-position:0 -50px;  }    
		.picScroll-left .hd .prevStop{ background-position:-60px 0; }    
		.picScroll-left .hd .nextStop{ background-position:-60px -50px; }    
		.picScroll-left .hd ul{ float:right; overflow:hidden; zoom:1; margin-top:10px; zoom:1; }    
		.picScroll-left .hd ul li{ float:left;  width:9px; height:9px; overflow:hidden; margin-right:5px; text-indent:-999px; cursor:pointer; background:url("images/icoCircle.gif") 0 -9px no-repeat; }    
		.picScroll-left .hd ul li.on{ background-position:0 0; }    
		.picScroll-left .hd img {margin-top: 5px;}    
		.picScroll-left .bd{ padding:10px;}    
		.picScroll-left .bd ul{ overflow:hidden; zoom:1; }    
		.picScroll-left .bd ul li{ margin:0 8px; float:left; _display:inline; overflow:hidden; text-align:center;  }    
		.picScroll-left .bd ul li .pic{ text-align:center; }    
		.picScroll-left .bd ul li .pic img{ width:272px; height:180px; display:block;  padding:2px; border:1px solid #ccc; }    
		.picScroll-left .bd ul li .pic a:hover img{ border-color:#999;  }    
		.picScroll-left .bd ul li .title{ line-height:24px; text-align: left; font-size: 14px; font-family: "微软雅黑"; text-indent: 5px;}    
.picScroll-left .bd ul li .title p {color:#bf283e;}    
		</style>    
		<div class="picScroll-left">    
			<div class="hd">    
				<a class="next"></a>    
				<ul></ul>    
				<span class="pageState"></span>    
				<a class="prev"></a>    
			</div>    
			<div class="bd">    
				<ul class="picList">    
					<li>    
						<div class="pic"><a href="http://www.jstxdm.com" target="_blank"><img src="images/pic1.jpg" /></a></div>    
						<div class="title"><a href="http://www.jstxdm.com" target="_blank">可爱心形肘部补丁套头衫</a><p>¥283</p></div>    
					</li>    
					<li>    
						<div class="pic"><a href="http://www.jstxdm.com" target="_blank"><img src="images/pic2.jpg" /></a></div>    
						<div class="title"><a href="http://www.jstxdm.com" target="_blank">优雅打褶单肩铅笔连衣裙</a><p>¥439</p></div>    
					</li>    
					<li>    
						<div class="pic"><a href="http://www.jstxdm.com" target="_blank"><img src="images/pic3.jpg" /></a></div>    
						<div class="title"><a href="http://www.jstxdm.com" target="_blank">休闲仿皮拼接高腰打底裤</a><p>¥322</p></div>    
					</li>    
					<li>    
						<div class="pic"><a href="http://www.jstxdm.com" target="_blank"><img src="images/pic4.jpg" /></a></div>    
						<div class="title"><a href="http://www.jstxdm.com" target="_blank">连帽加厚保暖棉衣棉服</a><p>¥322</p></div>    
					</li>    
					<li>    
						<div class="pic"><a href="http://www.jstxdm.com" target="_blank"><img src="images/pic5.jpg" /></a></div>    
						<div class="title"><a href="http://www.jstxdm.com" target="_blank">韩版格子毛呢大衣外套女中长款</a><p>¥289</p></div>    
					</li>    
					<li>    
						<div class="pic"><a href="http://www.jstxdm.com" target="_blank"><img src="images/pic6.jpg" /></a></div>    
						<div class="title"><a href="http://www.jstxdm.com" target="_blank">中长款加厚羽绒服 可拆卸连帽</a><p>¥429</p></div>    
					</li>    
				</ul>    
			</div>    
		</div>    
		<script type="text/javascript">    
			jQuery(".picScroll-left").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true,effect:"left",autoPlay:true,vis:4,trigger:"mouseover"});    
		</script>    
	</body>    
</html>



插件 轮播 滚动 切换

jquery tab选项卡插件支持鼠标滑过、点击、自动切换、数据回调等特效

jquery实现图片相册淡入淡出特效插件

jQuery jCountdown 翻牌倒计时插件

jQuery dropkick下拉框美化插件

jQuery Scrollify鼠标滚轮控制页面滚动特效插件

jQuery DsDialog 一款超全功能的漂亮对话框插件

jquery qq表情插件,鼠标点击qq表情图片插入文本框表单

jQuery鼠标悬停在图片上显示说明按钮的HoverEx插件

jQuery带缩略图焦点图插件

jquery相册带开关灯效果的Album插件

jquery.fullPage插件,仿网易邮箱6.0介绍上下滚动动画效果

jquery SuperSlide插件实现商品轮播切换滚动特效

jquery highcharts插件生成走势图及水印

jquery图片无缝滚动插件,上下左右图片无缝滚动特效实例

css3对话框插件来制作动画弹出表单特效

jquery实现图片放大镜插件,鼠标悬停局部图片放大镜头显示特效

js myfocus焦点图插件,实现24种焦点图片切换特效

jQuery幻灯片插件,按钮控制图片过渡特效

jQuery BreakingNews插件,实现广告通知单行文字滚动

jQuery实现简单的图片相册插件

仿车轮网带左右滚动JS焦点图轮播特效代码

js实现轮播幻灯片3D特效并且可以左右翻页

js实现10屏带缩略图和标题的幻灯片轮播特效

jquery五屏焦点幻灯轮播特效

jquery.slider多种过渡效果的图片轮播幻灯片特效

js仿微运5.0网站全屏图片轮播特效

jquery仿华谊兄弟首页3D图片轮播特效

jQuery实现左右布局带缩略图轮播图特效

jquery实现带按钮控制轮播焦点图特效

jquery实现婚纱摄影网站宽屏图片幻灯片轮播切换特效

jquery实现数字焦点图轮播特效

jquery实现选项卡形式,四屏焦点图片轮播特效,带控制的选项卡轮播

win8扁平风格宽屏焦点图片动画轮播特效

CSS3实现手风琴叠加图片自动轮播特效

html5实现手机触摸滑动图片幻灯片轮播切换特效

jQuery实现五屏上下轮播焦点图特效

CSS+JS实现滚动轮播图特效,带数字上下箭头切换功能

js实现图片幻灯片轮播图切换特效代码

js实现从两侧向中间拼合图片幻灯片轮播切换特效代码

js仿QQ软件官网平滑滚动图片,幻灯片轮播特效代码

友荐云推荐