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
轉載于:https://www.cnblogs.com/hanbingljw/p/3966097.html
總結
以上是生活随笔為你收集整理的superslide 学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： WIN7+wampserver2.4+z
- 下一篇： 2015.1.12