先上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>jquery轮播小插件</title>
<style type="text/css">
*{margin:0; padding:0; list-style:none;}
.advPlay_node{width:475px; height:255px; padding:5px; border:1px solid #333; overflow:hidden;}
</style>
</head>
<body>
<div class="advPlay_node fl">
<div id="advPlay">
<ul>
<li><a href="http://www.baidu.com"><img src="../images/adv_1.jpg" alt="test_01" title="test_01" /></a></li>
<li><a href="http://www.souhu.com"><img src="../images/adv_1.jpg" alt="test_02" title="test_02" /></a></li>
<li><a href="http://www.sina.com.cn"><img src="../images/adv_1.jpg" alt="test_03" title="test_03" /></a></li>
<li><a href="http://www.qq.com"><img src="../images/adv_1.jpg" alt="test_04" title="test_04" /></a></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="../do/jquery.js"></script>
<script type="text/javascript" src="JQ.js"></script>
<script type="text/javascript">
$().ready(function(){
$('#advPlay').mPicFlash({'state':'left','speed':1000,'title':true});
})
</script>
</body>
</html>
传说中，神秘的JQ.js文件
// JavaScript Document
$.fn.extend({
mPicFlash:function(obj){
var _method=this,
flash={
index:0,
state:obj&&obj.state&&obj.state=='top'?'top':'left',
speed:obj&&obj.speed&&typeof obj.speed==='number'?obj.speed:3000,
title:obj&&obj.title&&obj.title===true?true:false,
init:function(){
this.width=_method.parent().width();
this.height=_method.parent().height();
this.length=_method.find('ul li').length;
this.change={
float:this.state=='left'?'left':'none',
ulCss:this.state=='left'?{'width':this.width*this.length,'position':'absolute','z-index':'10'}:{'height':this.height*this.length,'position':'absolute','z-index':'10'}
};
_method.css({'width':this.width,'height':this.height,'float':'left','overflow':'hidden','position':'relative'}).find('ul,li,img').css({'width':this.width,'height':this.height,'border':'none','float':this.change.float,'overflow':'hidden'});
_method.find('ul').css(this.change.ulCss);
var html=this.title?'<p style="width:100%; height:28px; background:#000; font-size:14px; line-height:28px; overflow:hidden; padding-left:10px; position:absolute; bottom:0; left:0; z-index:11; filter:alpha(opacity=60); opacity:0.6;"></p>':'';
html+='<ol style="height:18px; color:#fff; position:absolute; bottom:5px; right:0; z-index:12; filter:alpha(opacity=60); opacity:0.6;">';
for(var i=1;i<=this.length;i++){
html+='<li style="width:16px; height:16px; background:#000; cursor:pointer; float:left; line-height:15px; margin:1px 5px 1px 5px; text-align:center;">'+i+'</li>'
};
_method.append(html+'</ol>');
this.picChange();
},
GO:function(){
this.init();
this.bindFn();
},
picChange:function(){
_method.find('ol li').eq(this.index).css({'background':'#f00','border':'1px solid #fff','margin':'0 4px 0 4px'}).siblings().css({'background':'#000','border':'0','margin':'1px 5px 1px 5px'});
_method.find('ul').stop(true,false).animate(this.state=='left'?{left:-1*this.width*this.index}:{top:-1*this.height*this.index},600);
_method.find('p').stop(true,false).fadeTo(300,0,function(){
_method.find('p').fadeTo(300,0.6);
});
_method.find('p').html('<a href="'+_method.find('ul a').eq(this.index).attr('href')+'" style="color:#fff; text-decoration:none;">'+_method.find('ul a img').eq(this.index).attr('title')+'</a>');
},
bindFn:function(){
var method=this;
_method.find('ol li').mouseover(function(){
if(advPlay){clearInterval(advPlay);}
if(method.index==$(this).index()){return false;}
method.index=$(this).index();
method.picChange();
});
_method.find('ol li').mouseout(function(){
advPlay=setInterval(function(){
method.setTimeFn();
},method.speed);
});
var advPlay=setInterval(function(){
method.setTimeFn();
},method.speed);
},
setTimeFn:function(){
this.index++;
if(this.index==this.length){this.index=0;}
this.picChange();
}
};
flash.GO();
}
});
分享到：
相关推荐
jQuery轮播图插件是一种广泛应用于网页设计中的动态展示图像或内容的工具，它通过JavaScript库jQuery实现，为网站添加了交互性和视觉吸引力。在网页设计中，轮播图能够有效地展示多张图片或信息，通常以幻灯片的形式...
jQuery-fsscroll是针对jQuery设计的一个全屏轮播插件，旨在为网页添加高质量的全屏轮播效果。 **全屏轮播插件jQuery-fsscroll：** 这个插件专为那些希望在网页上实现引人注目的全屏滚动效果的开发者而设计。它可以...
**jQuery轮播图插件mySystem.js详解** 在网页设计中，轮播图是一种常见的元素，用于展示多张图片或内容，节省空间的同时增加页面的动态效果。jQuery库以其丰富的功能和易用性，成为了创建轮播图插件的首选工具之一...
**jQuery轮播插件详解** 在网页设计中，图片轮播是一种常见的展示方式，它可以高效地展示多张图片，节省空间并提升用户体验。基于jQuery的轮播插件因其丰富的功能和简单易用的API，成为了开发者们首选的实现工具。...
《jQuery轮播图插件movingboxes.js详解及应用》 jQuery作为一款强大的JavaScript库，极大地简化了网页中的动态效果和事件处理。在网页设计中，轮播图是一种常见的元素，用于展示多张图片或内容。jQuery轮播图插件如...
"兼容ie8的响应式jquery轮播图插件"正是为了解决这个问题而诞生的。 jQuery库是JavaScript的一个强大工具集，它简化了DOM操作、事件处理、动画制作以及Ajax交互。jQuery轮播图插件是jQuery库的一种应用，它提供了一...
【jQuery轮播图插件TerseBanner详解】 在网页设计中，轮播图是一种常见的元素，用于展示多张图片或内容，节省空间的同时增加页面的动态感。`TerseBanner`是一个专门针对jQuery设计的轻量级轮播图插件，以简洁、优雅...
**jQuery库：bsc-slider 轮播图插件** ...总的来说，bsc-slider 是一个功能齐全、易于集成的jQuery轮播图插件，它的多样化过渡动画和自定义选项为网页设计者提供了丰富的创意空间，让网页的图像展示更加生动有趣。
总结来说，jQuery轮播插件是通过结合JavaScript和CSS技术实现的一种动态内容展示工具，它使得网页的交互性与视觉效果得到显著提升。通过理解和应用上述知识点，你可以创建适合自己项目需求的个性化轮播插件。
**jQuery轮播图插件camRoll Slider详解** 在网页设计中，轮播图是一种常见的元素，用于展示多个图片或内容...通过对源代码的深入理解和调整，开发者可以轻松地将此插件集成到自己的项目中，打造出个性化的轮播图组件。
jQuery 3D Carousel轮播图插件Waterwheel-Carousel是一个功能强大的JavaScript库，专为网页设计师和开发者设计，用于创建具有三维效果的旋转轮播图。这个插件基于流行的jQuery框架，允许用户轻松地在网页上实现动态...
【MxSlider.js：堆叠卡片样式jQuery轮播图插件】 MxSlider.js是一款针对网页设计者和开发者精心打造的jQuery插件，其特色在于实现了堆叠卡片样式的响应式轮播图效果。这款插件的核心优势在于其兼容性和交互性，能够...
**jQuery图片轮换插件nivo-slider详解** 在网页设计中，动态的图片展示往往能吸引用户的注意力，提升用户体验。jQuery作为一个轻量级、高性能的JavaScript库，为开发者提供了丰富的功能，其中包括各种各样的插件，...
总的来说，xSlider.js作为一个优秀的jQuery轮播图插件，以其高效、易用和兼容性的特点，为网页设计师和开发者提供了一个强大的工具，帮助他们快速实现高质量的轮播图效果，提升网站的用户体验。在实际开发中，结合...
jQuery Lightbox Plugin就是这样一款专为网页图片展示而设计的插件，它基于流行的JavaScript库jQuery，实现了轻量级、优雅的图片查看器功能，使用户可以在不离开当前页面的情况下，享受全屏浏览大图的体验。...
**jQuery和CSS3商品滑动展示轮播图插件详解** 在网页设计中，商品展示是至关重要的一环，尤其在电商网站中，吸引用户的注意力并引导他们浏览更多商品是提高转化率的关键。这款基于jQuery和CSS3动画的商品滑动展示...
**jQuery轮播图详解——以...总之，`terseBanner`作为一款jQuery轮播图插件，以其简洁的代码和强大的功能，为开发者提供了高效构建轮播图的工具。理解其工作原理和使用方法，对于提升网页动态效果的制作水平大有裨益。
在这个背景下，jQuery插件成为实现这些效果的强大工具，而"easySlider.js"就是这样一款专为响应式设计打造的jQuery轮播图插件。 easySlider.js的核心特点在于其轻量化和易用性。作为一个仅仅5KB大小的压缩文件，它...
**jQuery图片轮播插件**是网页设计中常用的一种组件，用于展示一组图片或内容，通过自动切换或用户交互来实现动态展示效果。在网页设计领域，jQuery因其简洁的API和丰富的插件库，成为了创建动态效果的首选库。本文...
**jQuery图片轮播插件——Sliding Image Gallery详解** 在网页设计中，图片展示往往是一项重要的功能，尤其在产品展示、摄影网站或者个人博客中，一个高质量的图片轮播插件能够极大地提升用户体验。今天我们要探讨...