jQuery带缩略图焦点图插件多图切换+自定义滑块内容.zip资源-CSDN文库

共32个文件

jpg：12个

png：7个

js：6个

版权申诉

jquery

42 浏览量 2022-11-06 23:56:35 上传评论收藏 514KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

jQuery带缩略图焦点图插件多图切换+自定义滑块内容.zip （32个子文件）

132686958739876788

images

_notes

dwsync.xml 945B

diapo

next.png 1KB

prev.png 1KB

pause.png 954B

play.png 1KB

thumbs

ratatouille2.jpg 3KB

big_buck_bunny.jpg 2KB

_notes

dwsync.xml 2KB

megamind1048.jpg 3KB

megamind_07.jpg 3KB

up-official-trailer-fake.jpg 3KB

wall-e.jpg 2KB

demo

list-check-green.png 1KB

list-error.png 1KB

arrow_caption.png 2KB

slides

ratatouille2.jpg 85KB

big_buck_bunny.jpg 24KB

_notes

dwsync.xml 2KB

megamind1048.jpg 79KB

megamind_07.jpg 99KB

up-official-trailer-fake.jpg 96KB

wall-e.jpg 40KB

diapo.css 3KB

_notes

dwsync.xml 286B

index.htm 14KB

scripts

jquery.min.js 89KB

jquery.hoverIntent.minified.js 1KB

diapo.js 39KB

jquery.mobile-1.0rc2.customized.min.js 47KB

_notes

dwsync.xml 1KB

jquery.easing.1.3.js 8KB

diapo.min.js 21KB

<!DOCTYPE HTML>  <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > <title>jQuery带缩略图焦点图插件DEMO演示</title> <meta name="viewport" content="width=960">  <link rel='stylesheet' id='style-css' href='diapo.css' type='text/css' media='all'> <script type='text/javascript' src='scripts/jquery.min.js'></script> <script type='text/javascript' src='scripts/jquery.mobile-1.0rc2.customized.min.js'></script> <script type='text/javascript' src='scripts/jquery.easing.1.3.js'></script> <script type='text/javascript' src='scripts/jquery.hoverIntent.minified.js'></script> <script type='text/javascript' src='scripts/diapo.js'></script> <script> $(function(){ $('.pix_diapo').diapo(); }); </script> <style> body { font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 12px; line-height: 20px; } section { display: block; overflow: hidden; position: relative; } .button { background: #014464; background: -moz-linear-gradient(top, #0D658E, #0C577A 50%, #014D71 51%, #003E5C); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0E658E), color-stop(.5, #0C577A), color-stop(.5, #014D71), to(#003E5C)); border: 1px solid #368DBE; border-top: 1px solid #c3d6df; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 0 1px 3px black; -webkit-box-shadow: 0 1px 3px black; box-shadow: 0 1px 3px black; color: white; display: block; font-size: 12px; font-weight: bold; height: 30px; line-height: 30px; padding: 5px 20px; text-align: center; text-decoration: none; text-shadow: 1px 1px 1px black; text-transform: uppercase; width: auto; } .button2 { background: #d9ae00; background: -moz-linear-gradient(top, #b28b06, #9c7705 50%, #9c7705 51%, #5c4100); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #b28b06), color-stop(.5, #9c7705), color-stop(.5, #9c7705), to(#5c4100)); border: 1px solid #c7a60c; border-top: 1px solid #e5d51f; } .button3 { background: #ffd838; background: -moz-linear-gradient(top, #edbf21, #c89b0f 50%, #9c7705 51%, #906706); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #edbf21), color-stop(.5, #c89b0f), color-stop(.5, #c89b0f), to(#906706)); border: 1px solid #c7a60c; border-top: 1px solid #e5d51f; } .price_table { float: right; font-size: 12px; margin: 10px auto 0; padding: 20px 0; position: relative; width: 570px; } .price_table .price_column.highlighted { background: #ffd838; margin: -5px!important; padding: 10px; z-index: 2; } .price_table .price_column { display: block; margin: 5px; float: left; position: absolute; width: 180px; z-index: 1; } .price_table .price_column > div { background: #eeeeee; } .price_table .price_column > div > div { padding: 10px 15px; border-bottom: 1px solid #cccccc; border-top: 1px solid #f6f6f6; } .price_table .price_column > div > p { padding: 10px 15px; border-bottom: 1px solid #cccccc; border-top: 1px solid #f6f6f6; } .price_table .price_column > div > ul { padding: 10px 15px; border-bottom: 1px solid #cccccc; border-top: 1px solid #f6f6f6; } .price_table .price_title { background-color: #333333; border-top: 0!important; color: #ffffff; font-size: 14px; } .price_table .highlighted .price_title { font-size: 16px; } .price_table .price_price { font-size: 36px; line-height: 40px; } .price_table .highlighted .price_price { font-size: 40px; line-height: 44px; } .price_table .price_explanation { font-size: 10px; line-height: 13px; text-transform: uppercase; } .price_table .cusButton { background-color: #333333; display: block; text-align: center; } .price_table li { padding: 5px 0; } .price_table div.pix_check { background: url(images/demo/list-check-green.png) no-repeat 15px center; padding-left: 38px!important; } .price_table div.pix_error { background: url(images/demo/list-error.png) no-repeat 15px center; padding-left: 38px!important; } </style> </head> <body> <section> <div style="overflow:hidden; width:960px; margin: 5px auto; padding:0 20px;"> <div class="pix_diapo"> <div data-thumb="images/thumbs/megamind1048.jpg"> <img src="images/slides/megamind1048.jpg"> <div class="caption elemHover fromLeft"> This is a simple sliding image with caption. You can have more than one caption and decide the layout of the caption via css. </div> </div> <div data-thumb="images/thumbs/megamind_07.jpg"> <img src="images/slides/megamind_07.jpg"> <div class="caption elemHover fromRight" style="bottom:65px; padding-bottom:5px; color:#ff0; text-transform:uppercase"> Here you can see two captions. </div> <div class="caption elemHover fromLeft" style="padding-top:5px;"> The first are loaded immediately before than the second one </div> </div> <div data-thumb="images/thumbs/wall-e.jpg" data-time="7000"> <img src="images/slides/wall-e.jpg"> <div class="elemHover caption fromLeft" style="bottom:70px; width:auto; -webkit-border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px;"> You can also get the same effect as the caption with: </div> <div class="elemHover button fromTop" data-easing="easeOutExpo" style="left:388px; bottom:78px;"> A button </div> <div class="elemHover button button2 fromBottom" data-easing="easeOutExpo" style="left:512px; bottom:78px;"> Or two buttons </div> <div class="elemHover fadeIn" style="left:600px; bottom:auto; top:0; padding-top:50px; color:#ff0; font-size:13px; line-height:20px; width:auto; -webkit-border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; background:url(images/demo/arrow_caption.png) no-repeat 230px 30px"> Or any other html element...<br> and you can decide the transition time of any slide </div> </div> <div data-thumb="images/thumbs/up-official-trailer-fake.jpg"> <iframe width="940" height="470" src="http://www.youtube.com/embed/qas5lWp7_R0?wmode=transparent&autoplay=1" data-fake="images/slides/up-official-trailer-fake.jpg" frameborder="0" allowfullscreen></iframe> <div class="elemHover caption fromLeft elemToHide" style="bottom: 350px; width:auto; -webkit-border-top-right-radius: 6px;

评论收藏

内容反馈

版权申诉