[/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 id="example5" class="slider-pro">
- <div class="sp-slides">
- <div class="sp-slide">
- <img class="sp-image" src="CSS/images/blank.gif" data-src="images/image1_medium.jpg"
- data-retina="images/image1_large.jpg" />
- <div class="sp-caption">
- HTML5 资源教程</div>
- </div>
- <div class="sp-slide">
- <img class="sp-image" src="css/images/blank.gif" data-src="images/image2_medium.jpg"
- data-retina="images/image2_large.jpg" />
- <div class="sp-caption">
- HTML5 资源教程</div>
- </div>
- <div class="sp-slide">
- <img class="sp-image" src="css/images/blank.gif" data-src="images/image3_medium.jpg"
- data-retina="images/image3_large.jpg" />
- <div class="sp-caption">
- HTML5 资源教程</div>
- </div>
- <div class="sp-slide">
- <img class="sp-image" src="css/images/blank.gif" data-src="images/image4_medium.jpg"
- data-retina="images/image4_large.jpg" />
- <div class="sp-caption">
- HTML5 资源教程</div>
- </div>
- <div class="sp-slide">
- <img class="sp-image" src="css/images/blank.gif" data-src="images/image5_medium.jpg"
- data-retina="images/image5_large.jpg" />
- <div class="sp-caption">
- HTML5 资源教程</div>
- </div>
- <div class="sp-slide">
- <img class="sp-image" src="css/images/blank.gif" data-src="images/image1_medium.jpg"
- data-retina="images/image1_large.jpg" />
- <div class="sp-caption">
- HTML5 资源教程</div>
- </div>
- <div class="sp-slide">
- <img class="sp-image" src="css/images/blank.gif" data-src="images/image2_medium.jpg"
- data-retina="images/image2_large.jpg" />
- <div class="sp-caption">
- HTML5 资源教程</div>
- </div>
- <div class="sp-slide">
- <img class="sp-image" src="css/images/blank.gif" data-src="images/image3_medium.jpg"
- data-retina="images/image3_large.jpg" />
- <div class="sp-caption">
- HTML5 资源教程</div>
- </div>
- <div class="sp-slide">
- <img class="sp-image" src="css/images/blank.gif" data-src="images/image4_medium.jpg"
- data-retina="images/image4_large.jpg" />
- <div class="sp-caption">
- HTML5 资源教程</div>
- </div>
- <div class="sp-slide">
- <img class="sp-image" src="css/images/blank.gif" data-src="images/image5_medium.jpg"
- data-retina="images/image5_large.jpg" />
- <div class="sp-caption">
- HTML5 资源教程</div>
- </div>
- </div>
- <div class="sp-thumbnails">
- <div class="sp-thumbnail">
- <div class="sp-thumbnail-image-container">
- <img class="sp-thumbnail-image" src="images/image1_thumbnail.jpg" />
- </div>
- <div class="sp-thumbnail-text">
- <div class="sp-thumbnail-title">
- HTML5 资源教程</div>
- <div class="sp-thumbnail-description">
- html5tricks.com</div>
- </div>
- </div>
- <div class="sp-thumbnail">
- <div class="sp-thumbnail-image-container">
- <img class="sp-thumbnail-image" src="images/image2_thumbnail.jpg" />
- </div>
- <div class="sp-thumbnail-text">
- <div class="sp-thumbnail-title">
- HTML5 资源教程</div>
- <div class="sp-thumbnail-description">
- html5tricks.com</div>
- </div>
- </div>
- <div class="sp-thumbnail">
- <div class="sp-thumbnail-image-container">
- <img class="sp-thumbnail-image" src="images/image3_thumbnail.jpg" />
- </div>
- <div class="sp-thumbnail-text">
- <div class="sp-thumbnail-title">
- HTML5 资源教程</div>
- <div class="sp-thumbnail-description">
- html5tricks.com</div>
- </div>
- </div>
- <div class="sp-thumbnail">
- <div class="sp-thumbnail-image-container">
- <img class="sp-thumbnail-image" src="images/image4_thumbnail.jpg" />
- </div>
- <div class="sp-thumbnail-text">
- <div class="sp-thumbnail-title">
- HTML5 资源教程</div>
- <div class="sp-thumbnail-description">
- html5tricks.com</div>
- </div>
- </div>
- <div class="sp-thumbnail">
- <div class="sp-thumbnail-image-container">
- <img class="sp-thumbnail-image" src="images/image5_thumbnail.jpg" />
- </div>
- <div class="sp-thumbnail-text">
- <div class="sp-thumbnail-title">
- HTML5 资源教程</div>
- <div class="sp-thumbnail-description">
- html5tricks.com</div>
- </div>
- </div>
- <div class="sp-thumbnail">
- <div class="sp-thumbnail-image-container">
- <img class="sp-thumbnail-image" src="images/image6_thumbnail.jpg" />
- </div>
- <div class="sp-thumbnail-text">
- <div class="sp-thumbnail-title">
- HTML5 资源教程</div>
- <div class="sp-thumbnail-description">
- html5tricks.com</div>
- </div>
- </div>
- <div class="sp-thumbnail">
- <div class="sp-thumbnail-image-container">
- <img class="sp-thumbnail-image" src="images/image7_thumbnail.jpg" />
- </div>
- <div class="sp-thumbnail-text">
- <div class="sp-thumbnail-title">
- HTML5 资源教程</div>
- <div class="sp-thumbnail-description">
- html5tricks.com</div>
- </div>
- </div>
- <div class="sp-thumbnail">
- <div class="sp-thumbnail-image-container">
- <img class="sp-thumbnail-image" src="images/image8_thumbnail.jpg" />
- </div>
- <div class="sp-thumbnail-text">
- <div class="sp-thumbnail-title">
- HTML5 资源教程</div>
- <div class="sp-thumbnail-description">
- html5tricks.com</div>
- </div>
- </div>
- <div class="sp-thumbnail">
- <div class="sp-thumbnail-image-container">
- <img class="sp-thumbnail-image" src="images/image9_thumbnail.jpg" />
- </div>
- <div class="sp-thumbnail-text">
- <div class="sp-thumbnail-title">
- HTML5 资源教程</div>
- <div class="sp-thumbnail-description">
- html5tricks.com</div>
- </div>
- </div>
- <div class="sp-thumbnail">
- <div class="sp-thumbnail-image-container">
- <img class="sp-thumbnail-image" src="images/image10_thumbnail.jpg" />
- </div>
- <div class="sp-thumbnail-text">
- <div class="sp-thumbnail-title">
- HTML5 资源教程</div>
- <div class="sp-thumbnail-description">
- html5tricks.com</div>
- </div>
- </div>
- </div>
- </div>
js 代码:
- $(document).ready(function ($) {
- $('#example5').sliderPro({
- width: 670,
- height: 500,
- orientation: 'vertical',
- loop: false,
- arrows: true,
- buttons: false,
- thumbnailsPosition: 'right',
- thumbnailPointer: true,
- thumbnailWidth: 290,
- breakpoints: {
- 800: {
- thumbnailsPosition: 'bottom',
- thumbnailWidth: 270,
- thumbnailHeight: 100
- },
- 500: {
- thumbnailsPosition: 'bottom',
- thumbnailWidth: 120,
- thumbnailHeight: 50
- }
- }
- });
- });
- via: http://www.w2bc.com/Article/19015 http://www.w2bc.com/Article/19015 [/bgcolor][/color]
来源: http://www.qdfuns.com/article/16384/c496009bb80b721ed9af9810d6ccac4b.html