近日了了解了一下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