以下是 jQuery带小图展示说明的焦点广告特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lof JSliderNews 1.0 - Jquery 1.3</title>
<link rel="stylesheet" type="text/css" href="css/layout.css" />
<link rel="stylesheet" type="text/css" href="css/style1.css" />
<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>
<script type="text/javascript">
$(document).ready( function(){
var buttons = { previous:$('#lofslidecontent45 .lof-previous') ,
next:$('#lofslidecontent45 .lof-next') };
$obj = $('#lofslidecontent45').lofJSidernews( { interval : 4000,
direction : 'opacitys',
easing : 'easeInOutExpo',
duration : 1200,
auto : false,
maxItemDisplay : 4,
navPosition : 'horizontal', // horizontal
navigatorHeight : 32,
navigatorWidth : 80,
mainWidth:980,
buttons : buttons} );
});
</script>
</head>
<body>
<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 previous|next item in the list
</p>
<!------------------------------------- THE CONTENT ------------------------------------------------->
<div id="lofslidecontent45" class="lof-slidecontent" style="width:980px; height:340px;">
<div class="preload"><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-previous">Previous</div>
</div>
</div>
<script type="text/javascript">
</script>
<p>
<div id="footer">
</div>
</div>
</body>
</html>
JS代码(script.js):
// JavaScript Document/*! Copyright (c) 2009 Brandon Aaron (http://brandonaaron.net) * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. * Thanks to:http://adomas.org/javascript-mouse-wheel/ for some pointers. * Thanks to:Mathias Bank(http://www.mathias-bank.de) for a scope bug fix. * * Version:3.0.2 * * Requires:1.2.2+ */
(function($){
var types = ['DOMMouseScroll','mousewheel'];
$.event.special.mousewheel ={
setup:function(){
if ( this.addEventListener )for ( var i=types.length;
i;
)this.addEventListener( types[--i],handler,false );
elsethis.onmousewheel = handler;
}
,teardown:function(){
if ( this.removeEventListener )for ( var i=types.length;
i;
)this.removeEventListener( types[--i],handler,false );
elsethis.onmousewheel = null;
}
}
;
$.fn.extend({
mousewheel:function(fn){
return fn ? this.bind("mousewheel",fn):this.trigger("mousewheel");
}
,unmousewheel:function(fn){
return this.unbind("mousewheel",fn);
}
}
);
function handler(event){
var args = [].slice.call( arguments,1 ),delta = 0,returnValue = true;
event = $.event.fix(event || window.event);
event.type = "mousewheel";
if ( event.wheelDelta ) delta = event.wheelDelta/120;
if ( event.detail ) delta = -event.detail/3;
// Add events and delta to the front of the argumentsargs.unshift(event,delta);
return $.event.handle.apply(this,args);
}
}
)(jQuery);
/** * @version$Id:$Revision * @packagejquery * @subpackagelofslidernews * @copyrightCopyright (C) JAN 2010 LandOfCoder.com <@emai:landofcoder@gmail.com>. All rights reserved. * @website http://landofcoder.com * @licenseThis plugin is dual-licensed under the GNU General Public License and the MIT License */
// JavaScript Document(function($){
$.fn.lofJSidernews = function( settings ){
return this.each(function(){
// get instance of the lofSiderNew.new $.lofSidernews( this,settings );
}
);
}
$.lofSidernews = function( obj,settings ){
this.settings ={
direction:'',mainItemSelector:'li',navInnerSelector:'ul',navSelector:'li',navigatorEvent:'click',wapperSelector:'.lof-main-wapper',interval:4000,auto:true,// whether to automatic play the slideshowmaxItemDisplay:3,startItem:0,navPosition:'vertical',navigatorHeight:100,navigatorWidth:310,duration:600,navItemsSelector:'.lof-navigator li',navOuterSelector:'.lof-navigator-outer',isPreloaded:true,easing:'easeInOutQuad'}
$.extend( this.settings,settings ||{
}
);
this.nextNo = null;
this.previousNo = null;
this.maxWidth = this.settings.mainWidth || 600;
this.wrapper = $( obj ).find( this.settings.wapperSelector );
this.slides = this.wrapper.find( this.settings.mainItemSelector );
if( !this.wrapper.length || !this.slides.length ) return;
// set width of wapperif( this.settings.maxItemDisplay > this.slides.length ){
this.settings.maxItemDisplay = this.slides.length;
}
this.currentNo = isNaN(this.settings.startItem)||this.settings.startItem > this.slides.length?0:this.settings.startItem;
this.navigatorOuter = $( obj ).find( this.settings.navOuterSelector );
this.navigatorItems = $( obj ).find( this.settings.navItemsSelector );
this.navigatorInner = this.navigatorOuter.find( this.settings.navInnerSelector );
if( this.settings.navPosition == 'horizontal' ){
this.navigatorInner.width( this.slides.length * this.settings.navigatorWidth );
this.navigatorOuter.width( this.settings.maxItemDisplay * this.settings.navigatorWidth );
this.navigatorOuter.height(this.settings.navigatorHeight );
}
else{
this.navigatorInner.height( this.slides.length * this.settings.navigatorHeight );
this.navigatorOuter.height( this.settings.maxItemDisplay * this.settings.navigatorHeight );
this.navigatorOuter.width(this.settings.navigatorWidth );
}
this.navigratorStep = this.__getPositionMode( this.settings.navPosition );
this.directionMode = this.__getDirectionMode();
if( this.settings.direction == 'opacity'){
this.wrapper.addClass( 'lof-opacity' );
$(this.slides).css('opacity',0).eq(this.currentNo).css('opacity',1);
}
else{
this.wrapper.css({
'left':'-'+this.currentNo*this.maxSize+'px','width':( this.maxWidth ) * this.slides.length}
);
}
if( this.settings.isPreloaded ){
this.preLoadImage( this.onComplete );
}
else{
this.onComplete();
}
}
$.lofSidernews.fn = $.lofSidernews.prototype;
$.lofSidernews.fn.extend = $.lofSidernews.extend = $.extend;
$.lofSidernews.fn.extend({
startUp:function( obj,wrapper ){
seft = this;
this.navigatorItems.each( function(index,item ){
$(item).click( function(){
seft.jumping( index,true );
seft.setNavActive( index,item );
}
);
$(item).css({
'height':seft.settings.navigatorHeight,'width':seft.settings.navigatorWidth}
);
}
)this.registerWheelHandler( this.navigatorOuter,this );
this.setNavActive(this.currentNo );
if( this.settings.buttons && typeof (this.settings.buttons) == "object" ){
this.registerButtonsControl( 'click',this.settings.buttons,this );
}
if( this.settings.auto )this.play( this.settings.interval,'next',true );
return this;
}
,onComplete:function(){
setTimeout( function(){
$('.preload').fadeOut( 900 );
}
,400 );
this.startUp( );
}
,preLoadImage:function( callback ){
var self = this;
var images = this.wrapper.find( 'img' );
var count = 0;
images.each( function(index,image){
if( !image.complete ){
image.onload =function(){
count++;
if( count >= images.length ){
self.onComplete();
}
}
image.onerror =function(){
count++;
if( count >= images.length ){
self.onComplete();
}
}
}
else{
count++;
if( count >= images.length ){
self.onComplete();
}
}
}
);
}
,navivationAnimate:function( currentIndex ){
if (currentIndex <= this.settings.startItem|| currentIndex - this.settings.startItem >= this.settings.maxItemDisplay-1){
this.settings.startItem = currentIndex - this.settings.maxItemDisplay+2;
if (this.settings.startItem < 0) this.settings.startItem = 0;
if (this.settings.startItem >this.slides.length-this.settings.maxItemDisplay){
this.settings.startItem = this.slides.length-this.settings.maxItemDisplay;
}
}
this.navigatorInner.stop().animate( eval('({
'+this.navigratorStep[0]+':-'+this.settings.startItem*this.navigratorStep[1]+'}
)'),{
duration:500,easing:'easeInOutQuad'}
);
}
,setNavActive:function( index,item ){
if( (this.navigatorItems) ){
this.navigatorItems.removeClass( 'active' );
$(this.navigatorItems.get(index)).addClass( 'active' );
this.navivationAnimate( this.currentNo );
}
}
,__getPositionMode:function( position ){
if(position == 'horizontal' ){
return ['left',this.settings.navigatorWidth];
}
return ['top',this.settings.navigatorHeight];
}
,__getDirectionMode:function(){
switch( this.settings.direction ){
case 'opacity':this.maxSize=0;
return ['opacity','opacity'];
default:this.maxSize=this.maxWidth;
return ['left','width'];
}
}
,registerWheelHandler:function( element,obj ){
element.bind('mousewheel',function(event,delta ){
var dir = delta > 0 ? 'Up':'Down',vel = Math.abs(delta);
if( delta > 0 ){
obj.previous( true );
}
else{
obj.next( true );
}
return false;
}
);
}
,registerButtonsControl:function( eventHandler,objects,self ){
for( var action in objects ){
switch (action.toString() ){
case 'next':objects[action].click( function(){
self.next( true)}
);
break;
case 'previous':objects[action].click( function(){
self.previous( true)}
);
break;
}
}
return this;
}
,onProcessing:function( manual,start,end ){
this.previousNo = this.currentNo + (this.currentNo>0 ? -1:this.slides.length-1);
this.nextNo= this.currentNo + (this.currentNo < this.slides.length-1 ? 1:1- this.slides.length);
return this;
}
,finishFx:function( manual ){
if( manual ) this.stop();
if( manual && this.settings.auto ){
this.play( this.settings.interval,'next',true );
}
this.setNavActive( this.currentNo );
}
,getObjectDirection:function( start,end ){
return eval("({
'"+this.directionMode[0]+"':-"+(this.currentNo*start)+"}
)");
}
,fxStart:function( index,obj,currentObj ){
if( this.settings.direction == 'opacity' ){
$(this.slides).stop().animate({
opacity:0}
,{
duration:this.settings.duration,easing:this.settings.easing}
);
$(this.slides).eq(index).stop().animate({
opacity:1}
,{
duration:this.settings.duration,easing:this.settings.easing}
);
}
else{
this.wrapper.stop().animate( obj,{
duration:this.settings.duration,easing:this.settings.easing}
);
}
return this;
}
,jumping:function( no,manual ){
this.stop();
if( this.currentNo == no ) return;
var obj = eval("({
'"+this.directionMode[0]+"':-"+(this.maxSize*no)+"}
)");
this.onProcessing( null,manual,0,this.maxSize ).fxStart( no,obj,this ).finishFx( manual );
this.currentNo = no;
}
,next:function( manual,item){
this.currentNo += (this.currentNo < this.slides.length-1) ? 1:(1 - this.slides.length);
this.onProcessing( item,manual,0,this.maxSize ).fxStart( this.currentNo,this.getObjectDirection(this.maxSize ),this ).finishFx( manual );
}
,previous:function( manual,item ){
this.currentNo += this.currentNo > 0 ? -1:this.slides.length - 1;
this.onProcessing( item,manual ).fxStart( this.currentNo,this.getObjectDirection(this.maxSize ),this ).finishFx( manual);
}
,play:function( delay,direction,wait ){
this.stop();
if(!wait){
this[direction](false);
}
var self = this;
this.isRun = setTimeout(function(){
self[direction](true);
}
,delay);
}
,stop:function(){
if (this.isRun == null) return;
clearTimeout(this.isRun);
this.isRun = null;
}
}
)}
)(jQuery)CSS代码(layout.css):
body{margin:0px;font-family:Arial,Helvetica,sans-serif;background:#39414A;}
#container{width:980px;margin:0px auto 0px;background:#FFFFFF;padding:10px;font-size:12px;margin-top:50px;}
a{text-transform:none;color:#333}
#footer{background:#F0F0F0;padding:10px;border:#999 dotted 1px;}
CSS代码(style.css):
@charset "utf-8";/* CSS Document */
.lof-slidecontent{position:relative;overflow:hidden;border:#F4F4F4 solid 1px;width:892px;height:300px;}
.lof-slidecontent .preload{height:100%;width:100%;background:#FFF;position:absolute;top:0;left:0;z-index:100000;color:#FFF;text-align:center}
.lof-slidecontent .preload div{height:100%;width:100%;background:transparent url(../images/load-indicator.gif) no-repeat scroll 50% 50%;}
.lof-main-outer{position:relative;height:100%;width:600px;z-index:3px;overflow:hidden;}
/*******************************************************/
.lof-main-item-desc{z-index:100px;position:absolute;top:150px;left:50px;width:400px;background:url(../images/transparent_bg.png);/* filter:0.7(opacity:60) */
}
.lof-main-item-desc p{color:#FFF;margin:0 8px;padding:8px 0}
.lof-main-item-desc h3 a{color:#FFF;margin:0;font-size:140%;padding:20px 8px 2px;font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;}
.lof-main-item-desc h3 a:hover{color:#FF6;text-decoration:underline;}
/* main flash */
ul.lof-main-wapper{/* margin-right:auto;*/
overflow:hidden;background:transparent url(../images/load-indicator.gif) no-repeat scroll 50% 50%;padding:0px;margin:0;height:300px;width:600px;position:absolute;overflow:hidden;}
ul.lof-main-wapper li{overflow:hidden;padding:0px;margin:0px;height:100%;width:600px;float:left;}
.lof-opacity li{position:absolute;top:0;left:0;float:inherit;}
ul.lof-main-wapper li img{padding:0px;width:600px;}
li-desc{z-index:100px;position:absolute;top:150px;left:50px;width:400px;background:url(../images/transparent_bg.png);/* filter:0.7(opacity:60) */
}
li-desc p{color:#FFF;margin:0 8px;padding:8px 0}
li-desc h3 a{color:#FFF;margin:0;font-size:140%;padding:20px 8px 2px;font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;}
li-desc h3 a:hover{color:#FF6;text-decoration:underline;}
/* item navigator */
ul.lof-navigator{top:0;padding:0;margin:0;position:absolute;width:100%;}
ul.lof-navigator li{cursor:hand;cursor:pointer;list-style:none;width:100%;padding:0;margin:0;overflow:hidden;}
.lof-navigator-outer{position:absolute;right:0;top:00px;z-index:100;height:300px;width:310px;overflow:hidden;color:#FFF}
.lof-navigator li.active{background:url(../images/arrow-bg.png) no-repeat scroll left center;color:#FFF}
.lof-navigator li:hover{}
.lof-navigator li h3{color:#FFF;font-size:100%;padding:15px 0 0 !important;margin:0;}
.lof-navigator li div{background:url(../images/transparent_bg.png);color:#FFF;height:100%;position:relative;margin-left:15px;padding-left:15px;border-top:1px solid #E1E1E1;}
.lof-navigator li.active div{background:url(../images/grad-bg.gif);color:#FFF;}
.lof-navigator li img{height:60px;width:60px;margin:15px 15px 10px 0px;float:left;padding:3px;border:#C5C5C5 solid 1px;}
.lof-navigator li.active img{border:##6C8E5C solid 1px;}
.lof-navigator li.active h3{color:#FFF;}
分享到QQ
分享到微博
微信扫一扫
