001.<script type="text/javascript" src="jquery v1.7.1.js"></script>
002.<style type="text/css">
003.#slideshow #slideshowWindow {
004. width:500px;
005. height:300px;
006. margin:0;
007. padding:0;
008. position:relative;
009. overflow:hidden;
010.}
011.
012.#slideshow #slideshowWindow .slide {
013. margin:0;
014. padding:0;
015. width:500px;
016. height:257px;
017. position:relative;
018.}
019.
020.#slideshow #slideshowWindow .slide .slideText {
021. position:absolute;
022. top:130px;
023. left:0px;
024. width:100%;
025. height:130px;
026. background-image:url(greyBg.png);
027. background-repeat:repeat;
028. margin:0;
029. padding:0;
030. color:#000;
031. font-family:Myriad Pro, Arial, Helvetica, sans-serif;
032.}
033.
034.#slideshow #slideshowWindow .slide .slideText a:link,
035.#slideshow #slideshowWindow .slide .slideText a:visited {
036. color:#000;
037. text-decoration:none;
038.}
039.
040.#slideshow #slideshowWindow .slide .slideText h2,
041.#slideshow #slideshowWindow .slide .slideText p {
042. margin:10px 0 0 10px;
043. padding:0;
044.}
045.
046..nav {
047. display:block;
048. text-indent:-10000px;
049. position:absolute;
050. cursor:pointer;
051.}
052.
053.#leftNav {
054. top:223px;
055. left:780px;
056. width:94px;
057. height:34px;
058. background-image:url(previous.jpg);
059. background-repeat:no-repeat;
060. z-index:999;
061.}
062.
063.#rightNav {
064. top:225px;
065. left:910px;
066. width:53px;
067. height:26px;
068. background-image:url(next.jpg);
069. background-repeat:no-repeat;
070. z-index:999;
071.}
072.</style>
073.<script type="text/javascript">
074.$(document).ready(function() {
075.
076. var currentPosition = 0;
077. var slideWidth = 500;
078. var slides = $('.slide');
079. var numberOfSlides = slides.length;
080. var slideShowInterval;
081. var speed = 3000;
082.
083.
084. slideShowInterval = setInterval(changePosition, speed);
085.
086. slides.wrapAll('<div id="slidesHolder"></div>')
087.
088. slides.css({ 'float' : 'left' });
089.
090.
091. $('#slidesHolder').css('width', slideWidth * numberOfSlides);
092.
093. $('#slideshow')
094. .prepend('<span class="nav" id="leftNav">Move Left</span>')
095. .append('<span class="nav" id="rightNav">Move Right</span>');
096.
097. manageNav(currentPosition);
098.
099.
100. $('.nav').bind('click', function() {
101.
102.
103. currentPosition = ($(this).attr('id')=='rightNav')
104. ? currentPosition+1 : currentPosition-1;
105.
106.
107. manageNav(currentPosition);
108. clearInterval(slideShowInterval);
109. slideShowInterval = setInterval(changePosition, speed);
110. moveSlide();
111. });
112.
113. function manageNav(position) {
114.
115. if(position==0){ $('#leftNav').hide() }
116. else { $('#leftNav').show() }
117.
118. if(position==numberOfSlides-1){ $('#rightNav').hide() }
119. else { $('#rightNav').show() }
120. }
121.
122.
123.
124.
125. function changePosition() {
126. if(currentPosition == numberOfSlides - 1) {
127. currentPosition = 0;
128. manageNav(currentPosition);
129. } else {
130. currentPosition++;
131. manageNav(currentPosition);
132. }
133. moveSlide();
134. }
135.
136.
137.
138. function moveSlide() {
139. $('#slidesHolder')
140. .animate({'marginLeft' : slideWidth*(-currentPosition)});
141. }
142.
143. });
144.</script>
145.</head>
146.
147.<body>
148.<div id="slideshow">
149. <div id="slideshowWindow">
150. <div class="slide">
151. <img src="1.jpg" />
152. <div class="slideText">
153. <h2 class="slideTitle">Slide 1</h2>
154. <p class="slideDes">Lorem ipsum dolor sit amet,
155. consectetur adipisicing elit, sed do eiusmod tempor
156. incididunt ut labore et dolore magna aliqua.</p>
157. <p class="slideLink"><a href="#">click here</a></p>
158. </div><!--/slideText-->
159. </div><!--/slide-->
160. <div class="slide">
161. <img src="2.jpg" />
162. <div class="slideText">
163. <h2 class="slideTitle">Slide 2</h2>
164. <p class="slideDes">Lorem ipsum dolor sit amet,
165. consectetur adipisicing elit, sed do eiusmod tempor
166. incididunt ut labore et dolore magna aliqua.</p>
167. <p class="slideLink"><a href="#">click here</a></p>
168. </div><!--/slideText-->
169. </div><!--/slide-->
170. <div class="slide">
171. <img src="3.jpg" />
172. <div class="slideText">
173. <h2 class="slideTitle">Slide 3</h2>
174. <p class="slideDes">Lorem ipsum dolor sit amet,
175. consectetur adipisicing elit, sed do eiusmod tempor
176. incididunt ut labore et dolore magna aliqua.</p>
177. <p class="slideLink"><a href="#">click here</a></p>
178. </div><!--/slideText-->
179. </div><!--/slide-->
180. </div><!--/slideshowWindow-->
181.</div><!--/slideshow-->
