特效描述：利用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>
与本文相关的文章