<!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>选项卡和图片滚动结合jquery代码 - 网页模板</title>
<script type="text/javascript" src="js/jquery.pack.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.js"></script>
<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; }
a:hover{ color:#1974A1; }
.js{width:90%; margin:10px auto 0 auto; }
.js p{ padding:5px 0; font-weight:bold; overflow:hidden; }
.js p span{ float:right; }
.js p span a{ color:#f00; text-decoration:underline; }
.js textarea{ height:100px; width:98%; padding:5px; border:1px solid #ccc; border-top:2px solid #aaa; border-left:2px solid #aaa; }
/* 本例子css */
.slideGroup{ width:510px; border:1px solid #ddd; text-align:left; }
.slideGroup .parHd{ height:30px; line-height:30px; background:#f4f4f4; padding:0 20px; border-bottom:1px solid #ddd; position:relative; }
.slideGroup .parHd ul{ float:left; position:absolute; left:20px; top:-1px; height:32px; }
.slideGroup .parHd ul li{ float:left; padding:0 15px; cursor:pointer; }
.slideGroup .parHd ul li.on{ height:30px; background:#fff; border:1px solid #ddd; border-bottom:2px solid #fff; }
.slideGroup .parBd{ padding:10px; zoom:1; }
.slideGroup .slideBox{ overflow:hidden; zoom:1; }
.slideGroup .sPrev,.slideGroup .sNext{ display:block; width:30px; height:90px; float:left; border:1px solid #ddd; background:url(images/icoLeft.gif) center center no-repeat #f4f4f4; }
.slideGroup .sNext{ background:url(images/icoRight.gif) center center no-repeat #f4f4f4; }
.slideGroup .sPrev:hover,.slideGroup .sNext:hover{ border-color:#f60; }
.slideGroup .parBd .tempWrap{ float:left; }
.slideGroup .parBd ul{ overflow:hidden; zoom:1; float:left; }
.slideGroup .parBd ul li{ margin:0 8px; float:left; _display:inline; overflow:hidden; text-align:center; }
.slideGroup .parBd ul li .pic{ text-align:center; }
.slideGroup .parBd ul li .pic img{ width:120px; height:90px; display:block; padding:2px; border:1px solid #ccc; }
.slideGroup .parBd ul li .pic a:hover img{ border-color:#999; }
.slideGroup .parBd ul li .title{ line-height:24px; }
</style>
</head>
<body>
<br>
<div class="slideGroup" style="margin:0 auto">
<div class="parHd">
<ul><li>教育</li><li>培训</li><li>出国</li></ul>
</div>
<div class="parBd">
<div class="slideBox">
<a class="sPrev" href="javascript:void(0)"></a>
<ul>
<li>
<div class="pic"><a href="http://www.moobnn.com/jiaoben" target="_blank"><img src="images/pic1.jpg" /></a></div>
<div class="title"><a href="javascript:void(0);" >效果图1.1</a></div>
</li>
<li>
<div class="pic"><a href="http://www.moobnn.com/jiaoben" target="_blank"><img src="images/pic1.jpg" /></a></div>
<div class="title"><a href="javascript:void(0);" >效果图1.2</a></div>
</li>
<li>
<div class="pic"><a href="http://www.moobnn.com/jiaoben" target="_blank"><img src="images/pic1.jpg" /></a></div>
<div class="title"><a href="javascript:void(0);" >效果图1.3</a></div>
</li>
<li>
<div class="pic"><a href="http://www.moobnn.com/jiaoben" target="_blank"><img src="images/pic1.jpg" /></a></div>
<div class="title"><a href="javascript:void(0);" >效果图1.4</a></div>
</li>
</ul>
<a class="sNext" href="javascript:void(0)"></a>
</div><!-- slideBox End -->
<div class="slideBox">
<a class="sPrev" href="javascript:void(0)"></a>
<ul>
<li>
<div class="pic"><a href="http://www.moobnn.com/jiaoben" target="_blank"><img src="images/pic2.jpg" /></a></div>
<div class="title"><a href="javascript:void(0);" >效果图2.1</a></div>
</li>
<li>
<div class="pic"><a href="http://www.moobnn.com/jiaoben" target="_blank"><img src="images/pic2.jpg" /></a></div>
<div class="title"><a href="javascript:void(0);" >效果图2.2</a></div>
</li>
<li>
<div class="pic"><a href="http://www.moobnn.com/jiaoben" target="_blank"><img src="images/pic2.jpg" /></a></div>
<div class="title"><a href="javascript:void(0);" >效果图2.3</a></div>
</li>
<li>
<div class="pic"><a href="http://www.moobnn.com/jiaoben" target="_blank"><img src="images/pic2.jpg" /></a></div>
<div class="title"><a href="javascript:void(0);" >效果图2.4</a></div>
</li>
</ul>
<a class="sNext" href="javascript:void(0)"></a>
</div><!-- slideBox End -->
<div class="slideBox">
<a class="sPrev" href="javascript:void(0)"></a>
<ul>
<li>
<div class="pic"><a href="http://www.moobnn.com/jiaoben" target="_blank"><img src="images/pic3.jpg" /></a></div>
<div class="title"><a href="javascript:void(0);" >效果图3.1</a></div>
</li>
<li>
<div class="pic"><a href="http://www.moobnn.com/jiaoben" target="_blank"><img src="images/pic3.jpg" /></a></div>
<div class="title"><a href="javascript:void(0);" >效果图3.2</a></div>
</li>
<li>
<div class="pic"><a href="http://www.moobnn.com/jiaoben" target="_blank"><img src="images/pic3.jpg" /></a></div>
<div class="title"><a href="javascript:void(0);" >效果图3.3</a></div>
</li>
<li>
<div class="pic"><a href="http://www.moobnn.com/jiaoben" target="_blank"><img src="images/pic3.jpg" /></a></div>
<div class="title"><a href="javascript:void(0);" >效果图3.4</a></div>
</li>
</ul>
<a class="sNext" href="javascript:void(0)"></a>
</div><!-- slideBox End -->
</div><!-- parBd End -->
</div>
<script type="text/javascript">
/*
SuperSlide组合注意：
1、内外层mainCell、targetCell、prevCell、nextCell等对象不能相同，除非特殊应用；
2、注意书写顺序，通常先写内层js调用，再写外层js调用
*/
/* 内层图片滚动切换 */
jQuery(".slideGroup .slideBox").slide({
mainCell:"ul",
vis:3,
prevCell:".sPrev",
nextCell:".sNext",
effect:"leftLoop"
});
/* 外层tab切换 */
jQuery(".slideGroup").slide({
titCell:".parHd li",
mainCell:".parBd"
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
选项卡和图片滚动结合jquery代码.zip
版权申诉
147 浏览量
2022-11-26
11:03:36
上传
评论
收藏 204KB ZIP 举报
选项卡和图片滚动结合jquery代码.zip （9个子文件） 
选项卡和图片滚动结合jquery代码 
选项卡和图片滚动结合jquery代码.jpg 44KB jiaoben2065 images pic3.jpg 65KB pic1.jpg 30KB pic2.jpg 43KB
icoRight.gif 53B icoLeft.gif 53B
index.html 8KB js 
jquery.pack.js 92KB jquery.SuperSlide.js 9KB资源评论
