ห้องสำหรับลองโค้ด
<style type="text/css">
span#slide_box_sp{
display:block;
float:left;
}
div.go_l_nav{
display:block;
cursor:pointer;
background-color:red;
float:left;
}
div.go_r_nav{
display:block;
cursor:pointer;
background-color:red;
float:left;
}
div.content_slide{
display:block;
margin:0px;
float:left;
overflow:hidden;
}
a.list_nav{
font-size:11px;
text-align:center;
float:left;
margin:0px;
background-color:#FFFF66;
color:#333333;
}
a.list_nav:hover{
font-size:11px;
text-align:center;
float:left;
margin:0px;
background-color:#99FF33;
color:#621cc4;
}
div#content_slide_in{
display:block;
margin-left:0px;
}
</style>
<div align="center" style="list-style-type: none;">
<div style="margin:auto;width:800px;">
<span id="slide_box_sp">
<div class="go_l_nav" title="Back"></div>
<div class="content_slide">
<div id="content_slide_in">
<a href="#" class="list_nav">https://i.imgur.com/N3OuwwP.png/a>
<a href="#" class="list_nav">https://i.imgur.com/QA3SS6L.png</a>
<a href="#" class="list_nav">https://i.imgur.com/cRsix9q.png</a>
<a href="#" class="list_nav">รูป หรือ ข้อความ 4</a>
<a href="#" class="list_nav">รูป หรือ ข้อความ 5</a>
<a href="#" class="list_nav">รูป หรือ ข้อความ 6</a>
<a href="#" class="list_nav">รูป หรือ ข้อความ 7</a>
<a href="#" class="list_nav">รูป หรือ ข้อความ 8</a>
</div>
</div>
<div class="go_r_nav" title="Next"></div>
</span>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
// เริ่มส่วนที่่ควรปรับแต่ง
var box_w=100;// กำหนดความกว้างของแต่ละ box
var box_h=100;// กำหนดความสูงของ slide
var box_show=4;// กำหนดจำนวนรายการที่จะแสดงเริ่มต้น
var nav_w=30; // กำหนดความกว้างของตัวเลื่อยนซ้าย ขวา
var marGL=2; // กำหนดระยะห่างของแต่ละ box
// สิ้นสุดส่วนที่ควรปรับแต่ง
var slide_w=(box_show*(marGL+box_w))+(nav_w*2)+marGL
var content_w=(box_show*(marGL+box_w));
var nol_nav_l,new_nev_l=null;
$("span#slide_box_sp").width(slide_w);
$("a.list_nav").width(box_w).css("marginLeft",marGL);
$("span#slide_box_sp,span#slide_box_sp *").height(box_h);
$("div.go_l_nav,div.go_r_nav").width(nav_w);
$("div.go_r_nav").css("marginLeft",marGL);
$("div.content_slide").width(content_w);
$("div#content_slide_in").css("marginLeft","0px");
$("div.go_r_nav").click(function(){
var numA=$("div#content_slide_in > a").length-box_show;
numA=numA*(box_w+marGL);
var charA="-"+numA+"px";
now_nav_l=$("div#content_slide_in").css("marginLeft");
if(now_nav_l!=charA){
now_nav_l=now_nav_l.replace("px","");
new_nav_l=now_nav_l-box_w-marGL;
$("div#content_slide_in").animate({
marginLeft:new_nav_l
},100);
}
});
$("div.go_l_nav").click(function(){
now_nav_l=$("div#content_slide_in").css("marginLeft");
if(now_nav_l!="0px"){
now_nav_l=now_nav_l.replace("px","");
now_nav_l=parseInt(now_nav_l);
new_nav_l=now_nav_l+box_w+marGL;
$("div#content_slide_in").animate({
marginLeft:new_nav_l
},100);
}
});
});
</script>
ของแมค
wwwwwwwwwwwwwwwwwwwดู
หน้า:
[1]
2