我爱模板网 > 特效插件 > 滚动轮播 >  有详细描述和标题的jQuery幻灯插件正文

有详细描述和标题的jQuery幻灯插件

特效介绍
图片幻灯插件一款非常优秀的图片幻灯插件,带左右箭头,大标题,小标题,和描述,以及缩略图。点击缩略图可以切换大图。大图作为背景,而文字描述,只有点击小标题后面的“read more >”才会显示。描述的背景是半透明的白色,带有个性的滚动条,可以随着段落字数的多少而自动调整高度。
使用方法
1、在head引入css文件
1<link rel="stylesheet" type="text/css" href="css/style.css" />
2<link type="text/css" href="css/jquery.jscrollpane.css" rel="stylesheet" media="all" />
2、在html引入下面的代码
001<div class="wrapper">
002    <div class="cr-container" id="cr-container">
003        <div class="cr-content-wrapper" id="cr-content-wrapper">
004            <div class="cr-content-container" id="content-1" style="display:block;">
005                <img src="images/1.jpg"class="cr-img"/>
006                <div class="cr-content">
007                    <div class="cr-content-headline">
008                        <h2>Become the perfect housewife</h2>
009                        <h3><span>How you can enjoy your time
010                        chained to the stove</span> <a href="#" class="cr-more-link">
011                        read more ></a></h3>
012                    </div>
013                    <div class="cr-content-text">
014                        <p>Even the all-powerful Pointing has no
015                        control about the blind texts it is an
016                        almost unorthographic life One day
017                        however a small line of blind text by
018                        the name of Lorem Ipsum decided to leave
019                        for the far World of Grammar.</p>
020                        <p>The Big Oxmox advised her not to do
021                        so, because there were thousands of bad
022                        Commas, wild Question Marks and devious
023                        Semikoli, but the Little Blind Text
024                        didn&#39;t listen. She packed her seven
025                        versalia, put her initial into the belt
026                        and made herself on the way.</p>
027                        <p>When she reached the first hills of
028                        the Italic Mountains, she had a last
029                        view back on the skyline of her hometown
030                        Bookmarksgrove, the headline of Alphabet
031                        Village and the subline of her own road,
032                        the Line Lane. Pityful a rethoric
033                        question ran over her cheek, then <strong>网页模板</strong></p>
034                    </div>
035                </div>
036            </div>
037            <div class="cr-content-container" id="content-2">
038                <img src="images/2.jpg"class="cr-img"/>
039                <div class="cr-content">
040                    <div class="cr-content-headline">
041                        <h2>Enjoy the summer!</h2>
042                        <h3><span>Welcome the warm season with
043                        these new and vibrant trends</span> <a href="#" class="cr-more-link">
044                        read more ></a></h3>
045                    </div>
046                    <div class="cr-content-text">
047                        <p>Even the all-powerful Pointing has no
048                        control about the blind texts it is an
049                        almost unorthographic life One day
050                        however a small line of blind text by
051                        the name of Lorem Ipsum decided to leave
052                        for the far World of Grammar.</p>
053                        <p>The Big Oxmox advised her not to do
054                        so, because there were thousands of bad
055                        Commas, wild Question Marks and devious
056                        Semikoli, but the Little Blind Text
057                        didn&#39;t listen. She packed her seven
058                        versalia, put her initial into the belt
059                        and made herself on the way.</p>
060                        <p>When she reached the first hills of
061                        the Italic Mountains, she had a last
062                        view back on the skyline of her hometown
063                        Bookmarksgrove, the headline of Alphabet
064                        Village and the <strong>网页模板</strong> subline of her own road,
065                        the Line Lane. Pityful a rethoric
066                        question ran over her cheek, then</p>
067                        <p>Eveen the all-powerful Pointing has
068                        no control about the blind texts it is
069                        an almost unorthographic life One day
070                        however a small line of blind text by
071                        the name of Lorem Ipsum decided to leave
072                        for the far World of Grammar.</p>
073                        <p>The Big Oxmox advised her not to do
074                        so, because there were thousands of bad
075                        Commas, wild Question Marks and devious
076                        Semikoli, but the Little Blind Text
077                        didn&#39;t listen. She packed her seven
078                        versalia, put her initial into the belt
079                        and made herself on the way.</p>
080                        <p>When she reached the first hills of
081                        the Italic Mountains, she had a last
082                        view back on the skyline of her hometown
083                        Bookmarksgrove, the headline of Alphabet
084                        Village and the subline of her own road,
085                        the Line Lane. Pityful a rethoric
086                        question ran over her cheek, then</p>
087                        <p>Eveen the all-powerful Pointing has
088                        no control about the blind texts it is
089                        an almost unorthographic life One day
090                        however a small line of blind text by
091                        the name of Lorem Ipsum decided to leave
092                        for the far World of Grammar.</p>
093                        <p>The Big Oxmox advised her not to do
094                        so, because there were thousands of bad
095                        Commas, wild Question Marks and devious
096                        Semikoli, but the Little Blind Text
097                        didn&#39;t listen. She packed her seven
098                        versalia, put her initial into the belt
099                        and made herself on the way.</p>
100                        <p>When she reached the first hills of
101                        the Italic Mountains, she had a last
102                        view back on the skyline of her hometown
103                        Bookmarksgrove, the headline of Alphabet
104                        Village and the subline of her own road,
105                        the Line Lane. Pityful a rethoric
106                        question ran over her cheek, then</p>
107                    </div>
108                </div>
109            </div>
110            <div class="cr-content-container" id="content-3">
111                <img src="images/3.jpg"class="cr-img"/>
112                <div class="cr-content">
113                    <div class="cr-content-headline">
114                        <h2>Did he cheat on you again?</h2>
115                        <h3><span>How to avoid becoming only
116                        second</span> <a href="#" class="cr-more-link">
117                        read more ></a></h3>
118                    </div>
119                    <div class="cr-content-text">
120                        <p>When she reached the first hills of
121                        the Italic Mountains, she had a last
122                        view back on the skyline of her hometown
123                        Bookmarksgrove, the headline of Alphabet
124                        Village and the subline of her own road,
125                        the Line Lane. Pityful a rethoric
126                        question ran over her cheek, then</p>
127                        <p>Even the all-powerful Pointing has no
128                        control about the blind texts it is an
129                        almost unorthographic <strong>网页模板</strong> life One day
130                        however a small line of blind text by
131                        the name of Lorem Ipsum decided to leave
132                        for the far World of Grammar.</p>
133                        <p>The Big Oxmox advised her not to do
134                        so, because there were thousands of bad
135                        Commas, wild Question Marks and devious
136                        Semikoli, but the Little Blind Text
137                        didn&#39;t listen. She packed her seven
138                        versalia, put her initial into the belt
139                        and made herself on the way.</p>
140                        <p>When she reached the first hills of
141                        the Italic Mountains, she had a last
142                        view back on the skyline of her hometown
143                        Bookmarksgrove, the headline of Alphabet
144                        Village and the subline of her own road,
145                        the Line Lane. Pityful a rethoric
146                        question ran over her cheek, then</p>
147                        <p>Even the all-powerful Pointing has no
148                        control about the blind texts it is an
149                        almost unorthographic life One day
150                        however a small line of 免费网页模板 blind text by
151                        the name of Lorem Ipsum decided to leave
152                        for the far World of Grammar.</p>
153                        <p>The Big Oxmox advised her not to do
154                        so, because there were thousands of bad
155                        Commas, wild Question Marks and devious
156                        Semikoli, but the Little Blind Text
157                        didn&#39;t listen. She packed her seven
158                        versalia, put her initial into the belt
159                        and made herself on the way.</p>
160                    </div>
161                </div>
162            </div>
163            <div class="cr-content-container" id="content-4">
164                <img src="images/4.jpg"class="cr-img"/>
165                <div class="cr-content">
166                    <div class="cr-content-headline">
167                        <h2>Luxury is not only for big girls</h2>
168                        <h3><span>From housewife to millionaire
169                        in just a week</span> <a href="#" class="cr-more-link">
170                        read more ></a></h3>
171                    </div>
172                    <div class="cr-content-text">
173                        <p>Even the all-powerful Pointing has no
174                        control about the blind texts it is an
175                        almost unorthographic life One day
176                        however a small line of blind text by
177                        the name of Lorem Ipsum decided to leave
178                        for the far World of Grammar.</p>
179                        <p>The Big Oxmox advised her not to do
180                        so, because there were thousands of bad
181                        Commas, wild Question Marks and devious
182                        Semikoli, but the Little Blind Text
183                        didn&#39;t listen. She packed her seven
184                        versalia, put her initial into the belt
185                        and made herself on the way.</p>
186                        <p>When she reached the first hills of
187                        the Italic Mountains, she had a last
188                        view back on the skyline of her hometown
189                        Bookmarksgrove, the headline of Alphabet
190                        Village and the subline of her own road,
191                        the Line Lane. Pityful a rethoric
192                        question ran over her cheek, then</p>
193                    </div>
194                </div>
195            </div>
196            <div class="cr-content-container" id="content-5">
197                <img src="images/5.jpg"class="cr-img"/>
198                <div class="cr-content">
199                    <div class="cr-content-headline">
200                        <h2>Spy Fiction at the pool</h2>
201                        <h3><span>What you can learn from the
202                        Dreyfus affair while sunbathing</span> <a href="#" class="cr-more-link">
203                        read more ></a></h3>
204                    </div>
205                    <div class="cr-content-text">
206                        <p>The Big Oxmox advised her not to do
207                        so, because there were thousands of bad
208                        Commas, wild Question Marks and devious
209                        Semikoli, but the Little Blind Text
210                        didn&#39;t listen. She packed her seven
211                        versalia, put her initial into the belt
212                        and made herself on the way.</p>
213                        <p>When she reached the first hills of
214                        the Italic Mountains, she had a last
215                        view back on the skyline of her hometown
216                        Bookmarksgrove, the headline of Alphabet
217                        Village and the subline of her own road,
218                        the Line Lane. Pityful a rethoric
219                        question ran over her cheek, then</p>
220                    </div>
221                </div>
222            </div>
223            <div class="cr-content-container" id="content-6">
224                <img src="images/6.jpg"class="cr-img"/>
225                <div class="cr-content">
226                    <div class="cr-content-headline">
227                        <h2>Fittest Housewife Contest</h2>
228                        <h3><span>Participate with the new
229                        dusting work-out plan</span> <a href="#" class="cr-more-link">
230                        read more ></a>
231                        </h3>
232                    </div>
233                    <div class="cr-content-text">
234                        <p>Even the all-powerful Pointing has no
235                        control about the blind texts it is an
236                        almost unorthographic life One day
237                        however a small line of blind text by
238                        the name of Lorem Ipsum decided to leave
239                        for the far World of Grammar.</p>
240                        <p>The <strong>网页模板</strong> Big Oxmox advised her not to do
241                        so, because there were thousands of bad
242                        Commas, wild Question Marks and devious
243                        Semikoli, but the Little Blind Text
244                        didn&#39;t listen. She packed her seven
245                        versalia, put her initial into the belt
246                        and made herself on the way.</p>
247                        <p>When she reached the first hills of
248                        the Italic Mountains, she had a last
249                        view back on the skyline of her hometown
250                        Bookmarksgrove, the headline of Alphabet
251                        Village and the subline of her own road,
252                        the Line Lane. Pityful a rethoric
253                        question ran over her cheek, then</p>
254                    </div>
255                </div>
256            </div>
257            <div class="cr-content-container" id="content-7">
258                <img src="images/7.jpg"class="cr-img"/>
259                <div class="cr-content">
260                    <div class="cr-content-headline">
261                        <h2>Crazy accessories shopping</h2>
262                        <h3><span>The bling bling that makes you
263                        sparkle even more</span> <a href="#" class="cr-more-link">
264                        read more ></a>
265                        </h3>
266                    </div>
267                    <div class="cr-content-text">
268                        <p>Even the all-powerful Pointing has no
269                        control about the blind texts it is an
270                        almost unorthographic life One day
271                        however a small line of blind text by
272                        the name of Lorem Ipsum decided to leave
273                        for the far World of Grammar.</p>
274                        <p>The Big Oxmox advised her not to do
275                        so, because there were thousands of bad
276                        Commas, wild Question Marks and devious
277                        Semikoli, but the Little Blind Text
278                        didn&#39;t listen. She packed her seven
279                        versalia, put her initial into the belt
280                        and made herself on the way.</p>
281                        <p>When she reached the first hills of
282                        the Italic Mountains, she had a last
283                        view back on the skyline of her hometown
284                        Bookmarksgrove, the headline of Alphabet
285                        Village and the subline of her own road,
286                        the Line Lane. Pityful a rethoric
287                        question ran over her cheek, then</p>
288                    </div>
289                </div>
290            </div>
291            <div class="cr-content-container" id="content-8">
292                <img src="images/8.jpg"class="cr-img"/>
293                <div class="cr-content">
294                    <div class="cr-content-headline">
295                        <h2>Modern Arts for Dummies</h2>
296                        <h3><span>Learn how to draw and discover
297                        the little Picasso in you!</span> <a href="#" class="cr-more-link">
298                        read more ></a>
299                        </h3>
300                    </div>
301                    <div class="cr-content-text">
302                        <p>Even the all-powerful Pointing has no
303                        control about the blind texts it is an
304                        almost unorthographic life One day
305                        however a small line of blind text by
306                        the name of Lorem Ipsum decided to leave
307                        for the far World of Grammar.</p>
308                        <p>The Big Oxmox advised her not to do
309                        so, because there were thousands of bad
310                        Commas, wild Question Marks and devious
311                        Semikoli, but the Little Blind Text
312                        didn&#39;t listen. She packed her seven
313                        versalia, put her initial into the belt
314                        and made herself on the way.</p>
315                        <p>When she <b>我爱模板网</b> reached the first hills of
316                        the Italic Mountains, she had a last
317                        view back on the skyline of her hometown
318                        Bookmarksgrove, the headline of Alphabet
319                        Village and the subline of her own road,
320                        the Line Lane. Pityful a rethoric
321                        question ran over her cheek, then</p>
322                    </div>
323                </div>
324            </div>
325        </div>
326        <div class="cr-thumbs">
327            <div data-content="content-1" class="cr-selected"><img src="images/thumbs/1.jpg"/><h4>
328                Become the perfect housewife</h4></div>
329            <div data-content="content-2"><img src="images/thumbs/2.jpg"/><h4>
330                Enjoy the Summer!</h4></div>
331            <div data-content="content-3"><img src="images/thumbs/3.jpg"/><h4>
332                Did he cheat on you again?</h4></div>
333            <div data-content="content-4"><img src="images/thumbs/4.jpg"/><h4>
334                Luxury is not only for big girls</h4></div>
335            <div data-content="content-5"><img src="images/thumbs/5.jpg"/><h4>
336                Spy Fiction at the pool</h4></div>
337            <div data-content="content-6"><img src="images/thumbs/6.jpg"/><h4>
338                Fittest Housewife Contest</h4></div>
339            <div data-content="content-7"><img src="images/thumbs/7.jpg"/><h4>
340                Crazy accessories shopping</h4></div>
341            <div data-content="content-8"><img src="images/thumbs/8.jpg"/><h4>
342                Arts for Dummies</h4></div>
343        </div>
344    </div><!-- cr-container -->
345    <div class="clr"></div>
346</div>
01<script type="text/javascript" src="http://www.5imoban.net/download/jquery/jquery-1.6.min.js"></script>
02<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
03<!-- the jScrollPane script -->
04<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
05<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
06<script type="text/javascript" src="js/jquery.crotator.js"></script>
07<script type="text/javascript">
08$(window).load(function(){
09    $('#cr-container').crotator();
10});
11</script>
3、根据需要修改html代码里面的英文为自己需要的内容。

部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!
上一篇:仿淘宝jQuery图片滚动插件 下一篇:动态模糊切换效果的flash+xml焦点图插件
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢