<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="JS代码,幻灯片,图文,内容幻灯片,jQuery特效,JS图片特效,JS广告代码,JS常用代码" />
<meta name="description" content="jQuery实现图文混排内容幻灯片展示效果,更多幻灯片,图文,内容幻灯片,jQuery特效代码请访问脚本之家JS代码频道。" />
<title>jQuery实现图文混排内容幻灯片展示效果_脚本之家</title>
<link href="css/default.css" rel="stylesheet" type="text/css" media="screen,projection" />
<link href="css/jquery.ennui.contentslider.css" rel="stylesheet" type="text/css" media="screen,projection" />
<title> Content Slider Demonstration | Ennui Design </title>
</head>
<body>
<h1> Content Slider Demonstration </h1>
<h2> Content Slider Version 1 </h2>
<p>
This content slider was implemented with the following code:
</p>
<pre><code class="js">$(function() {
$('#one').ContentSlider({
width : '900px',
height : '400px',
speed : 800,
easing : 'easeInOutBack'
});
});</code></pre>
<div id="one" class="contentslider">
<div class="cs_wrapper">
<div class="cs_slider">
<div class="cs_article">
<h2> <a href="#">Article Number One</a> </h2>
<a href="#">
<img src="images/article01.jpg"
alt="Artist's interpretation of article headline" />
</a>
<p>
Hendrerit tincidunt vero vel eorum claritatem. Soluta
legunt quod qui dolore typi. Vel dolore soluta qui odio
non. Sollemnes minim eorum feugiat nihil nobis. Gothica
dolor in legentis nihil quinta.
</p>
<p>
Iriure parum autem putamus lectores duis. Quam sit quis
me me zzril. Facer etiam in lectores hendrerit etiam.
Exerci lorem liber tincidunt nostrud decima. Mutationem
est zzril ipsum facer nobis.
</p>
<a href="#" class="readmore">Read More</a>
</div><!-- End cs_article -->
<div class="cs_article">
<h2> <a href="#">Article Number Two</a> </h2>
<a href="#">
<img src="images/article02.jpg"
alt="Artist's interpretation of article headline" />
</a>
<p>
Nibh nihil et ex accumsan insitam. Qui lius congue
hendrerit quam vero. Demonstraverunt molestie ipsum
magna nobis sequitur. Ex diam euismod quis ii velit.
</p>
<p>
In quam lectores placerat Investigationes illum. Diam
sollemnes nihil lorem claram consectetuer. Eros nam
placerat claritas claritatem congue. Adipiscing ut
clari suscipit nulla habent.
</p>
<a href="#" class="readmore">Read More</a>
</div><!-- End cs_article -->
<div class="cs_article">
<h2> <a href="#">Article Number Three</a> </h2>
<a href="#">
<img src="images/article03.jpg"
alt="Artist's interpretation of article headline" />
</a>
<p>
Clari eum vel blandit notare quarta. Autem processus
lectores augue iriure facit. Volutpat aliquip erat
imperdiet ipsum tation. Typi luptatum ut
demonstraverunt eros quam. Ut clari consectetuer
tincidunt liber qui.
</p>
<p>
Modo vel facilisis qui liber est. Eorum Investigationes
processus adipiscing commodo ea. Id iis claritatem vero
ea consequat.
</p>
<a href="#" class="readmore">Read More</a>
</div><!-- End cs_article -->
<div class="cs_article">
<h2> <a href="#">Article Number Four</a> </h2>
<a href="#">
<img src="images/article04.jpg"
alt="Artist's interpretation of article headline" />
</a>
<p>
Iis nostrud claritas quis sed qui. Ut nunc facilisi
claritatem quinta sit. Assum ii liber diam zzril nobis.
Qui nibh delenit fiant te illum. Delenit claritas ut
exerci eros typi.
</p>
<p>
Videntur vel euismod ut eleifend quis. Nobis aliquam
nunc vero blandit illum. Lius placerat litterarum
processus quam legere. Accumsan modo non at congue
duis. Odio duis ut blandit feugait in.
</p>
<a href="#" class="readmore">Read More</a>
</div><!-- End cs_article -->
</div><!-- End cs_slider -->
</div><!-- End cs_wrapper -->
</div><!-- End contentslider -->
<h2> Content Slider Version 2 </h2>
<p>
This content slider was implemented with the following code:
</p>
<pre><code class="js">$(function() {
$('#two').ContentSlider({
width : '600px',
height : '266px',
speed : 400,
easing : 'easeOutQuad',
textResize : true
});
});</code></pre>
<div id="two" class="contentslider">
<div class="cs_wrapper">
<div class="cs_slider">
<div class="cs_article">
<h2> <a href="#">Article Number One</a> </h2>
<a href="#">
<img src="images/article01.jpg"
alt="Artist's interpretation of article headline" />
</a>
<p>
Hendrerit tincidunt vero vel eorum claritatem. Soluta
legunt quod qui dolore typi. Vel dolore soluta qui odio
non. Sollemnes minim eorum feugiat nihil nobis. Gothica
dolor in legentis nihil quinta.
</p>
<p>
Iriure parum autem putamus lectores duis. Quam sit quis
me me zzril. Facer etiam in lectores hendrerit etiam.
Exerci lorem liber tincidunt nostrud decima. Mutationem
est zzril ipsum facer nobis.
</p>
<a href="#" class="readmore">Read More</a>
</div><!-- End cs_article -->
<div class="cs_article">
<h2> <a href="#">Article Number Two</a> </h2>
<a href="#">
<img src="images/article02.jpg"
alt="Artist's interpretation of article headline" />
</a>
<p>
Nibh nihil et ex accumsan insitam. Qui lius congue
hendrerit quam vero. Demonstraverunt molestie ipsum
magna nobis sequitur. Ex diam euismod quis ii velit.
</p>
<p>
In quam lectores placerat Investigationes illum. Diam
sollemnes nihil lorem claram consectetuer. Eros nam
placerat claritas claritatem congue. Adipiscing ut
clari suscipit nulla habent.
</p>
<a href="#" class="readmore">Read More</a>
</div><!-- End cs_article -->
<div class="cs_article">
<h2> <a href="#">Article Number Three</a> </h2>
<a href="#">
<img src="images/article03.jpg"
alt="Artist's interpretation of article headline" />
</a>
<p>
Clari eum vel blandit notare quarta. Autem processus
lectores augue iriure facit. Volutpat aliquip erat
imperdiet ipsum tation. Typi luptatum ut
demonstraverunt eros quam. Ut clari consectetuer
tincidunt liber qui.
</p>
<p>
Modo vel facilisis qui liber est. Eorum Investigationes
processus adipiscing commodo ea. Id iis claritatem vero
ea consequat.
</p>
<a href="#" class="readmore">Read More</a>
</div><!-- End cs_article -->
<div class="cs_article">
<h2> <a href="#">Article Number Four</a> </h2>
<a href="#">
<img src="images/article04.jpg"
alt="Artist's interpretation of article headline" />
</a>
<p>
Iis nostrud claritas quis sed qui. Ut nunc facilisi
claritatem quinta sit. Assum ii liber diam zzril nobis.
Qui nibh delenit fiant te illum. Delenit claritas ut
exerci eros typi.
</p>
<p>
Videntur vel euismod ut eleifend quis. Nobis aliquam
nunc vero blandit illum. Lius placerat litterarum
processus quam legere. Accumsan modo non at congue
duis. Odio duis ut blandit feugait in.
</p>
<a href="#" class="readmore">Read More</a>
</div><!-- End cs_article -->
</div><!-- End cs