js广告代码：jQuery实现带小图展示说明的焦点广告代码

特效描述：利用jQuery实现 带小图 展示说明的 焦点广告，利用jQuery实现带小图展示说明的焦点广告

代码结构

1. 引入CSS

<link rel=”stylesheet” type=”text/css” href=”css/layout.css” />

<link rel=”stylesheet” type=”text/css” href=”css/style1.css” />

2. 引入JS

<script language=”javascript” type=”text/javascript” src=”js/jquery.js”>
</script>

<script language=”javascript” type=”text/javascript” src=”js/jquery.easing.js”>

</script>

<script language=”javascript” type=”text/javascript” src=”js/script.js”>

</script>

3. HTML代码

<div id=”container”>
<h1>

<strong>

Lof JSliderNews 1.0</strong>

– Jquery 1.3 & Easing plugin</h1>

<p>

<strong>

Direction: Right – Left. The Navigator is the list of thumbnails.</strong>

The plugin allow to use the wheelup and wheeldown to pvious|next item in the list
</p>

<!————————————- THE CONTENT ————————————————->

<div id=”lofslidecontent45″ class=”lof-slidecontent” style=”width:980px; height:340px;”>

<div class=”pload”>

<div>

</div>

</div>

<!– MAIN CONTENT –>

<div class=”lof-main-outer” style=”width:980px; height:340px;”>

<ul class=”lof-main-wapper”>

<li>

<img src=”images/thumbl_980x340.png” title=”Newsflash 2″ >

<div class=”lof-main-item-desc”>

<h3>

<a target=”_parent” title=”Newsflash 1″ href=”#Category-1″>

/ Newsflash 1 /</a>

<i>

— Monday, February 15, 2010 12:42</i>

</h3>

<h2>

Content of Newsflash 1</h2>

<p>

The one thing about a Web site, it always changes! Joomla! makes it easy to add Articles, content,…
<a class=”readmore” href=”#”>

Read more </a>

</p>

</div>

</li>

<li>

<img src=”images/thumbl_980x340_002.png” title=”Newsflash 1″ >

<div class=”lof-main-item-desc”>

<h3>

<a target=”_parent” title=”Newsflash 2″ href=”#Category-2″>

/ Newsflash 2 /</a>

<i>

— Monday, February 15, 2010 12:42</i>

</h3>

<h2>

Content of Newsflash 2</h2>

<p>

Joomla! makes it easy to launch a Web site of any kind. Whether you want a brochure site or you are…
<a class=”readmore” href=”#”>

Read more </a>

</p>

</div>

</li>

<li>

<img src=”images/thumbl_980x340_003.png” title=”Newsflash 3″ >

<div class=”lof-main-item-desc”>

<h3>

<a target=”_parent” title=”Newsflash 3″ href=”#Category-3″>

/ Newsflash 3 /</a>

<i>

— Monday, February 15, 2010 12:42</i>

</h3>

<h2>

Content of Newsflash 3</h2>

<p>

With a library of thousands of free Extensions, you can add what you need as your site grows. Don’t…
<a class=”readmore” href=”#”>

Read more </a>

</p>

</div>

</li>

<li>

<img src=”images/thumbl_980x340_004.png” title=”Newsflash 5″ >

<div class=”lof-main-item-desc”>

<h3>

<a target=”_parent” title=”Newsflash 4″ href=”#Category-4″>

/ Newsflash 4 /</a>

<i>

— Monday, February 15, 2010 12:42</i>

</h3>

<h2>

Content of Newsflash 4</h2>

<p>

Joomla! 1.5 – ‘Experience the Freedom’!. It has never been easier to create your own dynamic Web…
<a class=”readmore” href=”#”>

Read more </a>

</p>

</div>

</li>

<li>

<img src=”images/thumbl_980x340_005.png” title=”Newsflash 5″ >

<div class=”lof-main-item-desc”>

<h3>

<a target=”_parent” title=”Newsflash 5″ href=”#”>

/ Newsflash 5 /</a>

<i>

— Monday, February 15, 2010 12:42</i>

</h3>

<h2>

Content of Newsflash 5</h2>

<p>

Joomla! 1.5 – ‘Experience the Freedom’!. It has never been easier to create your own dynamic Web…
<a class=”readmore” href=”#”>

Read more </a>

</p>

</div>

</li>

<li>

<img src=”images/thumbl_980x340_006.png” title=”Newsflash 5″ >

<div class=”lof-main-item-desc”>

<h3>

<a target=”_parent” title=”Newsflash 6″ href=”#”>

/ Newsflash 6 /</a>

<i>

— Monday, February 15, 2010 12:42</i>

</h3>

<h2>

Content of Newsflash 6</h2>

<p>

Joomla! 1.5 – ‘Experience the Freedom’!. It has never been easier to create your own dynamic Web…
<a class=”readmore” href=”#”>

Read more </a>

</p>

</div>

</li>

<li>

<img src=”images/thumbl_980x340_007.png” title=”Newsflash 5″ >

<div class=”lof-main-item-desc”>

<h3>

<a target=”_parent” title=”Newsflash 7″ href=”#”>

/ Newsflash 7 /</a>

<i>

— Monday, February 15, 2010 12:42</i>

</h3>

<h2>

Content of Newsflash 7</h2>

<p>

Joomla! 1.5 – ‘Experience the Freedom’!. It has never been easier to create your own dynamic Web…
<a class=”readmore” href=”#”>

Read more </a>

</p>

</div>

</li>

<li>

<img src=”images/thumbl_980x340_008.png” title=”Newsflash 8″ >

<div class=”lof-main-item-desc”>

<h3>

<a target=”_parent” title=”Newsflash 8″ href=”#”>

/ Newsflash 8 /</a>

<i>

— Monday, February 15, 2010 12:42</i>

</h3>

<h2>

Content of Newsflash 8</h2>

<p>

Joomla! 1.5 – ‘Experience the Freedom’!. It has never been easier to create your own dynamic Web…
<a class=”readmore” href=”#”>

Read more </a>

</p>

</div>

</li>

</ul>

</div>

<!– END MAIN CONTENT –>

<!– NAVIGATOR –>

<div class=”lof-navigator-wapper”>

<div onclick=”return false” href=”” class=”lof-next”>

Next</div>

<div class=”lof-navigator-outer”>

<ul class=”lof-navigator”>

<li>

<img src=”images/thumbs/thumbl_980x340.png” />

</li>

<li>

<img src=”images/thumbs/thumbl_980x340_002.png” />

</li>

<li>

<img src=”images/thumbs/thumbl_980x340_003.png” />

</li>

<li>

<img src=”images/thumbs/thumbl_980x340_004.png” />

</li>

<li>

<img src=”images/thumbs/thumbl_980x340_005.png” />

</li>

<li>

<img src=”images/thumbs/thumbl_980x340_006.png” />

</li>

<li>

<img src=”images/thumbs/thumbl_980x340_007.png” />

</li>

<li>

<img src=”images/thumbs/thumbl_980x340_008.png” />

</li>

</ul>

</div>

<div onclick=”return false” href=”” class=”lof-pvious”>

Previous</div>

</div>

<!—————– ———————>

</div>

<script type=”text/javascript”>

</script>

<!————————————- END OF THE CONTENT ————————————————->

<p>

<div id=”footer”>

</div>

</div>

下载地址

立即下载