|
|
|
พี่ๆ คะจะรบกวนช่วยดูให้ทีค่ะ ว่าจะขยายให้เต็ม 100% ยังไงกับรูปภาพค่ะ |
|
|
|
|
|
|
|
จาก code ด้านล่างค่ะ ถ้าต้องการปรับให้รูปภาพ abc.jpg ความกว้าง 100% และความสูงเป็น auto ต้องแก้ตรงไหนคะ
รบกวนทีนะคะ ขอบคุณค่ะ
ปล. แก้ตรง 100% ที่บรรทัด 60 , 74, 77 ก็ยังไม่ได้ค่ะ
Code (PHP)
<html>
<head>
<title>Slide Banner</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jssor.js"></script>
<script type="text/javascript" src="js/jssor.slider.js"></script>
<script>
jQuery(document).ready(function ($) {
var _SlideshowTransitions = [
//Fade
{ $Duration: 1200, $Opacity: 2 }
];
var options = {
$AutoPlay: true,
$AutoPlaySteps: 1,
$AutoPlayInterval: 3000,
$PauseOnHover: 1,
$ArrowKeyNavigation: true,
$SlideDuration: 500,
$MinDragOffsetToSlide: 20,
$SlideSpacing: 0,
$DisplayPieces: 1,
$ParkingPosition: 0,
$UISearchMode: 1,
$PlayOrientation: 1,
$DragOrientation: 3,
$SlideshowOptions: {
$Class: $JssorSlideshowRunner$,
$Transitions: _SlideshowTransitions,
$TransitionsOrder: 1,
$ShowLink: true
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$,
$ChanceToShow: 2,
$AutoCenter: 1,
$Steps: 1,
$Lanes: 1,
$SpacingX: 10,
$SpacingY: 10,
$Orientation: 1
},
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$,
$ChanceToShow: 2,
$Steps: 1
}
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
function ScaleSlider() {
var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
if (parentWidth)
jssor_slider1.$ScaleWidth(Math.min(parentWidth,100%));
else
window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();
if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) {
$(window).bind('resize', ScaleSlider);
}
});
</script>
<div id="slider1_container" style="position: relative; top: -21px; margin-bottom: -20px; left: 0px; width: 100%; height: auto; overflow: hidden; ">
<div style="position: absolute; padding:0px 0px; top: 0px; left: 0px;">
<div style="position: absolute; background: url(img/loading.gif) no-repeat center center; top: 0px; left: 0px;width: 100%;height:100%;">
</div>
</div>
<div u="slides" style="position: absolute; top: 0px; left: 0px; top: 0x; width: 100%; height: auto; overflow: hidden;">
<a href=$bannerurl target=_blank><img src=banners/$bannerfile border=0></a>";
</div>
<style>
.jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {
background: url(img/b05.png) no-repeat;
overflow: hidden;
cursor: pointer;
}
.jssorb05 div {
background-position: -7px -7px;
}
.jssorb05 div:hover, .jssorb05 .av:hover {
background-position: -37px -7px;
}
.jssorb05 .av {
background-position: -67px -7px;
}
.jssorb05 .dn, .jssorb05 .dn:hover {
background-position: -97px -7px;
}
</style>
<div u="navigator" class="jssorb05" style="position: absolute; bottom: 16px; right: 6px;">
<div u="prototype" style="POSITION: absolute; WIDTH: 16px; HEIGHT: 16px;"></div>
</div>
<style>
.jssora12l, .jssora12r, .jssora12ldn, .jssora12rdn {
position: absolute;
cursor: pointer;
display: block;
background: url(img/a12.png) no-repeat;
overflow: hidden;
}
.jssora12l {
background-position: -16px -37px;
}
.jssora12r {
background-position: -75px -37px;
}
.jssora12l:hover {
background-position: -136px -37px;
}
.jssora12r:hover {
background-position: -195px -37px;
}
.jssora12ldn {
background-position: -256px -37px;
}
.jssora12rdn {
background-position: -315px -37px;
}
</style>
</div>
</body>
</html>
Tag : PHP, HTML/CSS, JavaScript
|
ประวัติการแก้ไข 2016-06-17 21:06:05
|
|
|
|
|
Date :
2016-06-17 21:04:21 |
By :
because |
View :
765 |
Reply :
3 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
มีใครช่วยตอบทีมั้ยคะ
|
|
|
|
|
Date :
2016-06-18 15:54:34 |
By :
because |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ในโค๊ดตัวอย่างไม่เห็นมี abc.jpg เลยครับ
edit :
หมายถึง $bannerfile อันนี้รึเปล่าครับ
|
ประวัติการแก้ไข 2016-06-18 18:40:54
|
|
|
|
Date :
2016-06-18 18:38:49 |
By :
beelzerbub |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ใช่ค่ะ ตัวแปร $bannerfile
|
|
|
|
|
Date :
2016-06-20 05:49:07 |
By :
because |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Load balance : Server 02
|