jQuery自适应倾斜图片切换代码.zip资源-CSDN文库

共19个文件

jpg：6个

css：5个

js：3个

版权申诉

javascript

html5

jQuery

30 浏览量 2022-11-24 12:30:53 上传评论收藏 441KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

jQuery自适应倾斜图片切换代码.zip （19个子文件）

jQuery自适应倾斜图片切换代码

jQuery自适应倾斜图片切换代码.jpg 31KB

jiaoben4033

css

default.css 6KB

styles.css 3KB

ie7.css 227B

ie8.css 561B

normalize.css 2KB

img

Mountain-Range.jpg 90KB

Pink-Forest.jpg 51KB

Sky.jpg 81KB

Mt-Fuji.jpg 52KB

Lake.jpg 65KB

fonts

icomoon.woff 1KB

icomoon.svg 2KB

icomoon.eot 2KB

icomoon.ttf 1KB

index.html 4KB

jquery.min.js 91KB

jquery-1.10.2.min.js 91KB

jquery.sldr.js 28KB

<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery自适应倾斜图片切换代码 - 网页模板</title> <link rel="stylesheet" type="text/css" href="css/default.css"> <link href="css/styles.css" rel="stylesheet"> </head> <body> <div class="stage"> <div id="SLDR-ONE" class="sldr"> <ul class="wrp animate"> <li class="elmnt-one"><div class="skew"><div class="wrap"><img src="img/Lake.jpg" width="1000" height="563"></div></div></li> <li class="elmnt-two"><div class="skew"><div class="wrap"><img src="img/Mountain-Range.jpg" width="1000" height="563"></div></div></li> <li class="elmnt-three"><div class="skew"><div class="wrap"><img src="img/Mt-Fuji.jpg" width="1000" height="563"></div></div></li> <li class="elmnt-four"><div class="skew"><div class="wrap"><img src="img/Pink-Forest.jpg" width="1000" height="563"></div></div></li> </ul> </div> <div class="clear"></div> <div class="captions"> <div class="focalPoint"><p><small>Lake</small></p></div> <div><p><small>Mountain Range</small></p></div> <div><p><small>Mt. Fuji</small></p></div> <div><p><small>Pink Forest</small></p></div> </div> <ul class="selectors"> <li class="focalPoint"><a href="">•</a></li><li><a href="">•</a></li><li><a href="">•</a></li><li><a href="">•</a></li> </ul> <button class="sldr-prv sldr-nav prev">Prev</button> <button class="sldr-nxt sldr-nav next">Next</button> </div> </div> <script src="js/jquery-1.10.2.min.js"></script> <script src="js/jquery.sldr.js"></script> <script> $( window ).load( function() { $( '.sldr' ).each( function() { var th = $( this ); th.sldr({ focalClass : 'focalPoint', offset : th.width() / 2, sldrWidth : 'responsive', nextSlide : th.nextAll( '.sldr-nav.next:first' ), previousSlide : th.nextAll( '.sldr-nav.prev:first' ), selectors : th.nextAll( '.selectors:first' ).find( 'li' ), toggle : th.nextAll( '.captions:first' ).find( 'div' ), sldrInit : sliderInit, sldrStart : slideStart, sldrComplete : slideComplete, sldrLoaded : sliderLoaded, sldrAuto : true, sldrTime : 5000, hasChange : true }); }); }); /** * Sldr Callbacks */ /** * When the sldr is initiated, before the DOM is manipulated * @param {object} args the slides, callback, and config of the slider * @return null */ function sliderInit( args ) { } /** * When individual slides are loaded * @param {object} args the slides, callback, and config of the slider * @return null */ function slideLoaded( args ) { } /** * When the full slider is loaded, after the DOM is manipulated * @param {object} args the slides, callback, and config of the slider * @return null */ function sliderLoaded( args ) { } /** * Before the slides change focal points * @param {object} args the slides, callback, and config of the slider * @return null */ function slideStart( args ) { } /** * After the slides are done changing focal points * @param {object} args the slides, callback, and config of the slider * @return null */ function slideComplete( args ) { } </script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p> <p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p> </div> </body> </html>

评论收藏

内容反馈

版权申诉