โอเย้!! กลับมาพร้อมปัญหา ;w;!!
โค้ดครับ
it ตายแล้ว ( _ _;;)
จะทำให้เลื่อนตลอด + ใส่โค้ดจางยังไงครับ ;w;
ได้โปรดช่วยข้าน้อยด้วย ;w;
<div class="main_view">
<div class="window">
<div class="image_reel"><a href="#"><img alt="" src="http://image.ohozaa.com/i/36d/IVgE8.jpg" /></a> <a href="#"><img alt="" src="http://image.ohozaa.com/i/7dd/tWazK.jpg" /></a> <a href="#"><img alt="" src="http://image.ohozaa.com/i/775/x6Chj.jpg" /></a></div>
</div>
<div style="filter:alpha(opacity=50); moz-opacity:.5; opacity:.5; ">
<div class="paging"><a rel="1" href="#">1</a> <a rel="2" href="#">2</a> <a rel="3" href="#">3</a></div>
</div>
</div>
<style type="text/css"> *{outline: none;}
img {border: 0;}
.main_view { /*กรอบหน้าต่างโดยรวม*/
float: left;
position: absolute;
top: 340px; /*ระยะห่างจากขอบเว็บด้านบนถึงกรอบหน้าต่าง*/
left: 600px; /*ระยะห่างจากขอบเว็บด้านซ้ายถึงกรอบหน้าต่าง*/
width: 500px; /*ความกว้างของรูป*/
height: 450px; /*ความสูงของรูป*/
} /*--Window/Masking Styles--*/
.window { /*หน้าต่างที่เเสดงรูปภาพ*/
height:450px; /*ความสูงของรูป*/
width:500px; /*ความกว้างของรูป*/
overflow: hidden; /*ซ่อนเนื้อหาที่เกิน*/
position: relative;
}
.image_reel { /*รูปภาพ*/
position:absolute;
width: 50px; /*ความกว้างของรูป*/
height: 125px; /*ความสูงของรูป*/
}
.image_reel img {float: left;} /*--Paging Styles--*/
.paging { /*กำหนดเเถบตัวอักษร*/
font-family: "trebuchet ms", Tahoma; /*กำหนดชนิดของfont*/
font-size:10px; /*ขนาดfont*/
position: absolute;
top: 80px;
left: 0px; /*ระยะห่างจากขอบหน้าต่างถึงกรอบของเเถบอักษร*/
z-index: 100;
width: 50px; /*ความกว้างของของเเถบตัวอักษร*/
height:30px; /*ความสูงของของเเถบตัวอักษร*/
text-align: right; /*รูปเเบบการจัดคำ-ชิดขวา*/
line-height: 30px; /*ความสูงของบรรทัดทั้งบน เเละล่าง*/
background-color: #FFFFFF; /*สีของเเถบตัวอักษร*/
}
.paging a { /*ลิงค์ตัวอักษรในเเถบ*/
padding: 3px; /*ระยะห่างจากขอบถึงตัวอักษร*/
text-decoration: none; /*กำหนดเส้นของตัวอักษร-ไ่ม่มี*/
color: #F2FF2C; /*สีของตัวอักษร*/
}
.paging a.active {
color: #CCCCCC; /*สีของตัวอักษร*/
font-weight: bold;
background: #333333; /*สีของตบีจีตอนที่เมาส์คลิกอยู่*/
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px; /*โค้ดขอบโค้ง IE ใช้ไม่ได้*/
} .paging a:hover { text-decoration:underline; /*กำหนดเส้นของตัวอักษรตอนที่เมาส์ชี้อยู่-ขีดเส้นใต้*/
}
</style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript">
$(document).ready(function() {
//Set Default State of each portfolio piece
$(".paging").show();
$(".paging a:first").addClass("active");
//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});
//Paging + Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide $(".paging a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );
};
//Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $('.paging a.active').next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $('.paging a:first'); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 7000); //Timer speed in milliseconds (3 seconds)
};
rotateSwitch(); //Run function on launch
//On Hover
$(".image_reel a").hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
});
//On Click
$(".paging a").click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});
});
</script>
<div class="main_view">
<div style="filter:alpha(opacity=50); moz-opacity:.5; opacity:.5; ">
<div class="paging"><a rel="1" href="#">1</a> <a rel="2" href="#">2</a> <a rel="3" href="#">3</a></div>
</div>
</div>
