首页 > 代码库 > superslide 学习笔记

superslide 学习笔记

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

superslide 学习笔记