近日了了解了一下jquery 插件superSlide，有种相见恨晚的感觉，这实在是一款常用，实用的插件；
可以做
1.标签切换 / 书签切换 / 默认效果
2.焦点图 / 幻灯片
3.图片滚动
4.导航
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>jquery superslide 使用</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://www.u-dental.cn/templets/u-dental/js/jquery.SuperSlide.js" type="text/javascript"></script>
</head>
<style>
#box{ width: 600px; height:300px;margin:0 auto; background: #e2e2e2; }
.cat{position: relative;}
a{ color:inherit; text-decoration: none;}
ul{ list-style: none; padding: 0;margin: 0;}
ul li{ height: 30px; line-height: 30px;}
.nav-header ul li.on{background: #000;color:white;} /*用于设置导航栏获得焦点的样式*/
.cat-nav{float: left; margin:10px; }
p { height: 5em;line-height: 5em;text-align: center;vertical-align: middle;}
.f1{*text-align: center;}
.f2{*text-align: center;}
</style>
<body style="*text-align:center;">
<div id="box">
<div class="cat">
<div class="cat-nav">
<div class="nav-header">商品目录</div>
<ul>
<li><a>list item 1</a></li>
<li><a>list item 2</a></li>
<li><a>list item 3</a></li>
<li><a>list item 4</a></li>
<li><a>list item 5</a></li>
<li><a>list item 6</a></li>
<li><a>list item 7</a></li>
<li><a>list item 8</a></li>
</ul>
</div>
<div class="cat-content">
<div class="f1">
<style>
.cat-brand{width: 200px; height:150px; background: pink;*text-align: center; margin:0 auto; }
.one{background: yellow;}
.two{background: blue;}
.three{background: red;}
.cat-brand-img li{width: 180px;height:130px;margin:0 auto;}
.cat-brand-control li{ float: left; color:#000;}
.cat-brand-control{margin-left: 90px;}
.cat-brand-control li.on{color:white;}
</style>
<h2>使用slide插件添加图片banner滚动效果</h2>
<div class="cat-brand">
<ul class="cat-brand-img">
<li class="one"><a><img src="#"/></a></li>
<li class="two"><a><img src="#"/></a></li>
<li class="three"><a><img src="#"/></a></li>
</ul>
<ul class="cat-brand-control">
<li><a>•</a></li>
<li><a>•</a></li>
<li><a>•</a></li>
</ul>
</div>
<script>
$(".cat-brand").slide({
titCell:".cat-brand-control li", //指向nav title
mainCell:".cat-brand-img", //指向内容区
autoPlay:true, //自动播放
interTime:1500,
delayTime:0
});
</script>
</div>
<div class="f2">
<style>
.slideimg{ width: 200px;height: 180px; *text-align: center;background: #ccc;margin:0 auto;}
.l1,.l2,.l3{width: 180px; height: 150px; margin: 0 auto;}
.l1{background: blue;}
.l2{background: yellow;}
.l3{background: pink;}
.next{float: left; margin-top: 80px;font-weight: bold;}
.pre{float:right; margin-top:80px; font-weight: bold;}
</style>
<p>无缝图片滚动</p>
<div class="slideimg">
<a class="pre"> > </a>
<a class="next"> < </a>
<ul class="slidecont">
<li class="l1"><a></a></li>
<li class="l2"><a></a></li>
<li class="l3"><a></a></li>
</ul>
</div>
<script>
$(function(){
$(".slideimg").slide({
mainCell:".slidecont",
effect:"left", //向左滚动
prevCell:".next",
nextCell:".pre",
autoPlay:true,
interTime:3000,
delayTime:500,
autoPage:true
});
});
</script>
</div>
<div class="f3">
<p>内容3</p>
</div>
<div class="f4">
<p>内容4</p>
</div>
<div class="f5">
<p>内容5</p>
</div>
<div class="f6">
<p>内容6</p>
</div>
<div class="f7">
<p>内容7</p>
</div>
<div class="f8">
<p>内容1</p>
</div>
</div>
</div>
</div>
<script>
$(function(){
$("a").attr("href","javascript:void();"); //为链接加空
$(".cat").slide({
titCell:".cat-nav li", //指向nav title
mainCell:".cat-content", //指向内容区
autoPlay:true,
interTime:7400,
delayTime:0 });
});
</script>
</body>
</html>
官网：http://www.superslide2.com/demo.html
时间： 2024-10-25 10:20:49