jQuery带标题缩略图的百叶窗图片轮播切换效果

共19个文件

png：11个

css：3个

js：3个

jQuery

带标题缩略图

图片轮播切换

需积分: 13 140 浏览量 2018-04-27 15:20:58 上传评论收藏 457KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

jQuery带标题缩略图的百叶窗图片轮播切换效果.rar （19个子文件）

css

jquery.tiles.min.css 11KB

styles.css 947B

normalize.css 7KB

img

img03.png 16KB

img01.png 60KB

img02.png 51KB

img04.png 30KB

img05.png 68KB

img10.png 30KB

img08.png 15KB

Thumbs.db 33KB

img06.png 48KB

img09.png 46KB

prev_next.png 5KB

img07.png 25KB

index.html 4KB

html5.js 2KB

jquery-1.8.3.min.js 91KB

jquery.tiles.js 11KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery图片轮播插件多种切换效果</title>  <script src="js/jquery-1.8.3.min.js"></script> <script src="js/jquery.tiles.js"></script> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/styles.css" media="screen">  <link rel="stylesheet" href="css/jquery.tiles.min.css"> </head> <body> <div class="title"> <label>Effect:</label> <select id="effects-select"> <option value="default">default</option> <option value="simple">simple</option> <option value="left">left</option> <option value="up">up</option> <option value="leftright">leftright</option> <option value="updown">updown</option> <option value="switchlr">switchlr</option> <option value="switchud">switchud</option> <option value="fliplr">fliplr</option> <option value="flipud">flipud</option> <option value="reduce">reduce</option> <option value="360">360</option> </select> <div class="code"> <code>x: 6</code> <code>y: 4</code> <code>random: true</code> </div> <button type="button" class="start action">Play</button> <button type="button" class="stop action">Stop</button> </div> <div class="slider-wrap"> <div class="slider"> <p><strong>Pig ham:</strong> hock pork loin brisket pastrami frankfurter andouille.</p> <img src="img/img01.png"><p><strong>Sausage:</strong> ground round sirloin ball tip beef ribs.</p> <img src="img/img02.png"><p><strong>Pig ham:</strong> hock pork loin brisket pastrami frankfurter andouille.</p> <img src="img/img03.png"><p><strong>Pork turkey:</strong> shoulder, filet mignon chuck t-bone bacon.</p> <img src="img/img04.png"><p><strong>Short loin:</strong> pig jowl fatback, pork loin pork chop.</p> <img src="img/img05.png"><p><strong>Sausage:</strong> ground round sirloin ball tip beef ribs.</p> <img src="img/img06.png"><p><strong>Pig ham:</strong> hock pork loin brisket pastrami frankfurter andouille.</p> <img src="img/img07.png"><p><strong>Pork turkey:</strong> shoulder, filet mignon chuck t-bone bacon.</p> <img src="img/img08.png"><p><strong>Short loin:</strong> pig jowl fatback, pork loin pork chop.</p> <img src="img/img09.png"><p><strong>Sausage:</strong> ground round sirloin ball tip beef ribs.</p> <img src="img/img10.png"><p><strong>Pig ham:</strong> hock pork loin brisket pastrami frankfurter andouille.</p> </div> </div> <script type="text/javascript"> var $slider = $('.slider-wrap'); var html = $slider.html(); // Options var defaults = { thumbSize:20, onSlideshowEnd:function(){ $('.stop, .start').toggle() } }; var effects = { 'default': { x:6, y:4, random: true }, simple: { x:6, y:4, effect: 'simple', random: true }, left: { x:1, y:8, effect: 'left' }, up: { x:20, y:1, effect: 'up', rewind: 60, backReverse: true }, leftright: { x:1, y:8, effect: 'leftright' }, updown: { x:20, y:1, effect: 'updown', cssSpeed: 500, backReverse: true }, switchlr: { x:20, y:1, effect: 'switchlr', backReverse: true }, switchud: { x:1, y:8, effect: 'switchud' }, fliplr: { x:20, y:1, effect: 'fliplr', backReverse: true }, flipud: { x:20, y:3, effect: 'flipud', reverse: true, rewind: 75 }, reduce: { x:6, y:4, effect: 'reduce' }, 360: { x:1, y:1, effect: '360', fade: true, cssSpeed: 600 } }; $('#effects-select').change(function(){ var effect = $(this).val(); $slider.fadeTo( 0,0 ).html( html ); $('.stop').hide(); $('.start').show(); setTimeout(function(){ $('.slider').tilesSlider($.extend( {}, defaults, effects[ effect ])); $slider.fadeTo( 0,1 ); $('body').removeClass('tiles-preload'); }, 100 ); $('.code').empty().html(function() { var e = effects[ effect ], c = []; for ( var i in e ) { if ( i !== 'effect' ) { c.push('<code>'+ i +': '+ e[i] +'</code>'); } } return c.join(''); }); }); $('.start').click(function() { $(this).hide(); $('.stop').show(); $('.slider').tilesSlider('start'); }); $('.stop').click(function() { $(this).hide(); $('.start').show(); $('.slider').tilesSlider('stop'); }); $('.slider').tilesSlider( $.extend( {}, defaults, effects['default'] ) ); </script> </body> </html>

评论收藏

内容反馈