jQuery全窗口幻灯片.zip资源-CSDN文库

共11个文件

jpg：9个

html：1个

js：1个

版权申诉

javascript

html5

jQuery

28 浏览量 2022-11-21 11:33:07 上传评论收藏 1.38MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

jQuery全窗口幻灯片.zip （11个子文件）

jQuery全窗口幻灯片

jQuery全窗口幻灯片.jpg 95KB

jiaoben1273

img

ny1.jpg 161KB

ny6.jpg 195KB

ny3.jpg 205KB

ny2.jpg 244KB

ny7.jpg 112KB

ny4.jpg 119KB

ny5.jpg 124KB

ny8.jpg 175KB

index.html 5KB

jquery.carouFredSel-6.0.4-packed.js 35KB

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1" /> <title>jQuery全窗口幻灯片 - 站长素材</title> <script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script> <script src="jquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script> <script type="text/javascript"> function getMinMarge( newItems ) { var center = newItems.eq(0).outerWidth(true) + (newItems.eq(1).outerWidth(true) / 2); var minMarg = ($(window).width() / 2) - center; return minMarg; } function showTitle( item ) { $('#title').html( item.attr( 'alt' ) ); } $(function() { $('#carousel').carouFredSel({ width: 10000, // should be wide enough ;) height: 790, align: false, circular: false, infinite: false, items: 3, prev: '#prev', next: '#next', auto: false, scroll: { items: 1, duration: 1000, onBefore: function( data ) { $(this).parent().animate({ 'marginLeft': getMinMarge( data.items.visible ) }, data.scroll.duration); data.items.old.eq(1).animate({ 'opacity': 0.2 }, data.scroll.duration); data.items.visible.eq(1).animate({ 'opacity': 1 }, data.scroll.duration); showTitle( data.items.visible.eq(1) ); } }, onCreate: function( data ) { $(this).parent().css({ 'marginLeft': getMinMarge( data.items ) }); $(this).children().not(':eq(1)').css({ 'opacity': 0.2 }); showTitle( data.items.eq(1) ); } }); }); </script> <style type="text/css"> html, body { background-color: #434; height: 100%; padding: 0; margin: 0; position: relative; } body { min-height: 700px; } body * { font-family: Arial, Geneva, SunSans-Regular, sans-serif; font-size: 14px; color: #fff; line-height: 22px; } #wrapper { width: 100%; height: 790px; margin-top: -395px; position: absolute; left: 0; top: 50%; overflow: hidden; } #carousel img { background-color: #fff; border: none; display: block; padding: 15px; margin: 30px; float: left; box-shadow: 0 0 20px #000; } #carousel .empty { display: block; width: 600px; height: 400px; float: left; } #bar { background-color: #191919; text-align: center; width: 100%; position: absolute; top: 0; left: 0; } #bar * { color: #fff; line-height: 50px; font-size: 18px; font-weight: bold; } #prev, #next { font-size: 30px; color: #fff; text-decoration: none; display: block; width: 50px; height: 50px; position: absolute; top: 0; } #prev:hover, #next:hover { background-color: #000; } #prev.disabled, #next.disabled { background-color: transparent !important; cursor: default; opacity: 0.1; } #prev { left: 0; } #next { right: 0; } #donate-spacer { height: 100%; } #donate { width: 750px; padding: 50px 75px; margin: 0 auto; overflow: hidden; } #donate p, #donate form { margin: 0; float: left; } #donate p { width: 650px; } #donate form { width: 100px; } </style> </head> <body> <div id="wrapper"> <div id="carousel"> <span class="empty"></span>  <img src="img/ny1.jpg" alt="Lunar New Year 2013: Year of the Dragon" width="900" height="600" style="margin-top: 80px;" /> <img src="img/ny2.jpg" alt="An 18 meter long dragon at Malang city park" width="525" height="700" /> <img src="img/ny3.jpg" alt="Actors perform the dragon dance" width="600" height="600" style="margin-top: 80px;" /> <img src="img/ny4.jpg" alt="Members of the chinese community in India celebrate the Chinese New Year" width="800" height="500" style="margin-top: 130px;" /> <img src="img/ny5.jpg" alt="Woman pray at a Buddhist temple in Denpasar" width="700" height="700" /> <img src="img/ny6.jpg" alt="A reveller writes the "Dragon" in traditional Chinese characters" width="800" height="550" style="margin-top: 105px;" /> <img src="img/ny7.jpg" alt="Chinese living in Ukraine carry a dragon on January 22" width="800" height="400" style="margin-top: 180px;" /> <img src="img/ny8.jpg" alt="Fireworks over Hoan Kiem Lake" width="800" height="600" style="margin-top: 80px;" /> <span class="empty"></span>  </div> </div> <div id="bar"> <a id="prev" href="#">«</a> <a id="next" href="#">»</a> <span id="title"></span> </div> <div id="donate-spacer"></div> <div id="donate"> <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p> <p>来源：<a href="http://www.moobnn.com/" target="_blank">站长素材</a></p> </div> </body> </html>

评论收藏

内容反馈

版权申诉