 |
|
โค้ดที่เอามาใส่ค่ะ
Code (PHP)
<script type="text/javascript" src="jquery v1.7.1.js"></script>
<style type="text/css">
#slideshow #slideshowWindow {
width:500px;
height:300px;
margin:0;
padding:0;
position:relative;
overflow:hidden;
}
#slideshow #slideshowWindow .slide {
margin:0;
padding:0;
width:500px;
height:257px;
position:relative;
}
#slideshow #slideshowWindow .slide .slideText {
position:absolute;
top:130px;
left:0px;
width:100%;
height:130px;
background-image:url(greyBg.png);
background-repeat:repeat;
margin:0;
padding:0;
color:#000;
font-family:Myriad Pro, Arial, Helvetica, sans-serif;
}
#slideshow #slideshowWindow .slide .slideText a:link,
#slideshow #slideshowWindow .slide .slideText a:visited {
color:#000;
text-decoration:none;
}
#slideshow #slideshowWindow .slide .slideText h2,
#slideshow #slideshowWindow .slide .slideText p {
margin:10px 0 0 10px;
padding:0;
}
/*///////////////////////////////////////////////////////*/
.nav {
display:block;
text-indent:-10000px;
position:absolute;
cursor:pointer;
}
#leftNav {
top:223px;
left:780px;
width:94px;
height:34px;
background-image:url(previous.jpg);
background-repeat:no-repeat;
z-index:999;
}
#rightNav {
top:225px;
left:910px;
width:53px;
height:26px;
background-image:url(next.jpg);
background-repeat:no-repeat;
z-index:999;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
var currentPosition = 0;
var slideWidth = 500;
var slides = $('.slide');
var numberOfSlides = slides.length;
var slideShowInterval;
var speed = 3000;
//Assign a timer, so it will run periodically
slideShowInterval = setInterval(changePosition, speed);
slides.wrapAll('<div id="slidesHolder"></div>')
slides.css({ 'float' : 'left' });
//set #slidesHolder width equal to the total width of all the slides
$('#slidesHolder').css('width', slideWidth * numberOfSlides);
$('#slideshow')
.prepend('<span class="nav" id="leftNav">Move Left</span>')
.append('<span class="nav" id="rightNav">Move Right</span>');
manageNav(currentPosition);
//tell the buttons what to do when clicked
$('.nav').bind('click', function() {
//determine new position
currentPosition = ($(this).attr('id')=='rightNav')
? currentPosition+1 : currentPosition-1;
//hide/show controls
manageNav(currentPosition);
clearInterval(slideShowInterval);
slideShowInterval = setInterval(changePosition, speed);
moveSlide();
});
function manageNav(position) {
//hide left arrow if position is first slide
if(position==0){ $('#leftNav').hide() }
else { $('#leftNav').show() }
//hide right arrow is slide position is last slide
if(position==numberOfSlides-1){ $('#rightNav').hide() }
else { $('#rightNav').show() }
}
/*changePosition: this is called when the slide is moved by the
timer and NOT when the next or previous buttons are clicked*/
function changePosition() {
if(currentPosition == numberOfSlides - 1) {
currentPosition = 0;
manageNav(currentPosition);
} else {
currentPosition++;
manageNav(currentPosition);
}
moveSlide();
}
//moveSlide: this function moves the slide
function moveSlide() {
$('#slidesHolder')
.animate({'marginLeft' : slideWidth*(-currentPosition)});
}
});
</script>
</head>
<body>
<div id="slideshow">
<div id="slideshowWindow">
<div class="slide">
<img src="1.jpg" />
<div class="slideText">
<h2 class="slideTitle">Slide 1</h2>
<p class="slideDes">Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
<p class="slideLink"><a href="#">click here</a></p>
</div><!--/slideText-->
</div><!--/slide-->
<div class="slide">
<img src="2.jpg" />
<div class="slideText">
<h2 class="slideTitle">Slide 2</h2>
<p class="slideDes">Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
<p class="slideLink"><a href="#">click here</a></p>
</div><!--/slideText-->
</div><!--/slide-->
<div class="slide">
<img src="3.jpg" />
<div class="slideText">
<h2 class="slideTitle">Slide 3</h2>
<p class="slideDes">Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
<p class="slideLink"><a href="#">click here</a></p>
</div><!--/slideText-->
</div><!--/slide-->
</div><!--/slideshowWindow-->
</div><!--/slideshow-->
ความจริงรู้มันต้องเป็นแบบนี้ค่ะแต่พอทำออกมาปุ่ม next กับ previous มันไม่ขึ้นค่ะ
ทำตาม http://www.webchief.co.uk/blog/simple-jquery-slideshow/index.php?page=3
รบกวนด้วยค่ะ
Tag : HTML/CSS, JavaScript, jQuery
|
|
|
 |
 |
 |
 |
| Date :
2012-02-06 14:07:48 |
By :
fight2932 |
View :
2329 |
Reply :
2 |
|
 |
 |
 |
 |
|
|
|
|
 |
