[/bgcolor][/color][color=rgb(0, 0, 0)][backcolor=rgb(254, 254, 242)]#### 在线预览 源码下载 [/bgcolor][/color][color=rgb(0, 0, 0)][backcolor=rgb(254, 254, 242)] 实现的代码.[/bgcolor][/color][color=rgb(0, 0, 0)][backcolor=rgb(254, 254, 242)]html 代码:[code]<div style="max-width: 800px; margin: 50px auto;">
- <div class="ms-showcase2-template ms-dir-v">
- <!-- masterslider -->
- <div class="master-slider ms-skin-default" id="masterslider">
- <div class="ms-slide">
- <img src="masterslider/loading-2.gif" data-src="images/big/1.jpg" alt="lorem ipsum dolor sit" />
- <img class="ms-thumb" src="images/1.jpg" alt="thumb" />
- </div>
- <div class="ms-slide">
- <img src="masterslider/loading-2.gif" data-src="images/big/2.jpg" alt="lorem ipsum dolor sit" />
- <img class="ms-thumb" src="images/2.jpg" alt="thumb" />
- </div>
- <div class="ms-slide">
- <img src="masterslider/loading-2.gif" data-src="images/big/3.jpg" alt="lorem ipsum dolor sit" />
- <img class="ms-thumb" src="images/3.jpg" alt="thumb" />
- </div>
- <div class="ms-slide">
- <img src="masterslider/loading-2.gif" data-src="images/big/4.jpg" alt="lorem ipsum dolor sit" />
- <img class="ms-thumb" src="images/4.jpg" alt="thumb" />
- </div>
- <div class="ms-slide">
- <img src="masterslider/loading-2.gif" data-src="images/big/5.jpg" alt="lorem ipsum dolor sit" />
- <img class="ms-thumb" src="images/5.jpg" alt="thumb" />
- </div>
- <div class="ms-slide">
- <img src="masterslider/loading-2.gif" data-src="images/big/6.jpg" alt="lorem ipsum dolor sit" />
- <img class="ms-thumb" src="images/6.jpg" alt="thumb" />
- </div>
- <div class="ms-slide">
- <img src="masterslider/loading-2.gif" data-src="images/big/7.jpg" alt="lorem ipsum dolor sit" />
- <img class="ms-thumb" src="images/7.jpg" alt="thumb" />
- </div>
- </div>
- <!-- end of masterslider -->
- </div>
</div>[/code]js 代码:
- $(document).ready(function () {
- var slider = new MasterSlider();
- slider.setup('masterslider', {
- width: 610,
- height: 630,
- space: 5,
- view: 'basic'
- });
- slider.control('arrows');
- slider.control('scrollbar', { dir: 'h' });
- slider.control('thumblist', { autohide: false, dir: 'v', arrows: false });
- });[/code]via: http://www.w2bc.com/Article/24052 http://www.w2bc.com/Article/24052 [/bgcolor][/color]
来源: http://www.qdfuns.com/article/16384/efa8d328f61321901127dfee69a18533.html