div 좀 봐주세요,,
본문
인테넷에서 소스를 구해서 하려는데 너무 안되네요
아래 소스는 2단으로 높이가 700으로 감싸고 있는거 같은데.. 사진높이가 600이고 그밑에 섬네일이 100이네요..
맨밑에 div를 한개 더둬서 "오늘은 더 보지 않기" 팝업창으로 만드려고 합니다.
<script type="text/javascript" src="../tab-slider/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../tab-slider/js/jssor.slider.mini.js"></script>
<!-- use jssor.slider.debug.js instead for debug -->
<script>
jQuery(document).ready(function ($) {
var jssor_1_options = {
$AutoPlay: true,
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$
},
$ThumbnailNavigatorOptions: {
$Class: $JssorThumbnailNavigator$,
$Cols: 3,
$Align: 200
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizes
function ScaleSlider() {
var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
if (refSize) {
refSize = Math.min(refSize, 510);
jssor_1_slider.$ScaleWidth(refSize);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
});
</script>
<style>
.jssort16 .p {
position: absolute;
top: 0;
left: 0;
width: 170px;
height: 100px;
}
.jssort16 .t {
position: absolute;
top: 0;
left: 0;
width: 170px;
height: 100px;
border: none;
}
.jssort16 .p img {
position: absolute;
top: 0;
left: 0;
width: 170px;
height: 100px;
filter: alpha(opacity=55);
opacity: 100;
transition: opacity .6s;
-moz-transition: opacity .6s;
-webkit-transition: opacity .6s;
-o-transition: opacity .6s;
}
.jssort16 .pav img, .jssort16 .pav:hover img, .jssort16 .p:hover img {
filter: alpha(opacity=100);
opacity: 1;
transition: none;
-moz-transition: none;
-webkit-transition: none;
-o-transition: none;
}
.jssort16 .pav:hover img, .jssort16 .p:hover img {
filter: alpha(opacity=70);
opacity: .7;
}
.jssort16 .title, .jssort16 .title_back {
position: absolute;
bottom: 0px;
left: 0px;
width: 170px;
height: 30px;
line-height: 30px;
text-align: center;
color: #000;
font-size: 20px;
}
.jssort16 .title_back {
background-color: #fff;
filter: alpha(opacity=50);
opacity: .5;
}
.jssort16 .pav .title_back {
background-color: #000;
filter: alpha(opacity=50);
opacity: .5;
}
.jssort16 .pav .title {
color: #fff;
}
.jssort16 .p.pav:hover .title_back, .jssort16 .p:hover .title_back {
filter: alpha(opacity=40);
opacity: .4;
}
.jssort16 .p.pdn img {
filter: alpha(opacity=100);
opacity: 1;
}
</style>
<div id="jssor_1" style="position: relative; margin: 0 auto; top: 100px; left: 0px; width: 510px; height: 700px; visibility:hidden; overflow: hidden; z-index:1000">
<!-- Loading Screen -->
<div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 510px; height: 600px; overflow: hidden;">
<div data-p="112.50" style="display: none;">
<img data-u="image" src="../tab-slider/img/05.jpg" />
<div data-u="thumb">
<img src="../tab-slider/img/landscape.jpg" />
<div class="title_back"></div>
<div class="title">
1111
</div>
</div>
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="../tab-slider/img/001.jpg" />
<div data-u="thumb">
<img src="../tab-slider/img/motor.jpg" />
<div class="title_back"></div>
<div class="title">
2222
</div>
</div>
</div>
<div data-p="112.50" style="display: none;">
<img data-u="image" src="../tab-slider/img/004.jpg" />
<div data-u="thumb">
<img src="../tab-slider/img/photography.jpg" />
<div class="title_back"></div>
<div class="title">
3333
</div>
</div>
</div>
</div>
<!-- Thumbnail Navigator -->
<div data-u="thumbnavigator" class="jssort16" style="position:absolute;left:0px;bottom:0px;width:510px;height:100px; " data-autocenter="1">
<!-- Thumbnail Item Skin Begin -->
<div data-u="slides" style="cursor: default;">
<div data-u="prototype" class="p">
<div data-u="thumbnailtemplate" class="t"></div>
</div>
</div>
</div>
<!-- Thumbnail Item Skin End --> <a href="javascript:document.all.noticelayer.style.visibility='hidden';setCookie( 'nlayer', 'done' , 1);"><strong>[오늘 하루는 그만 보기]</strong></a>
</div>
