菜鸟的一个小问题
我毕业设计是做一个教学管理系统，在首页上我做了一个图片滑动，是在网上下载的一个插件，没看的太明白首先定义了一个JS文件，具体是这样的：
(function($) {
$.fn.flashSlider = function(options) {
var options = $.extend({}, $.fn.flashSlider.defaults, options);
this.each(function() {
var obj = $(this);
var curr = 1; //当前索引
var $img = obj.find("img");
var s = $img.length;
var w = $img.eq(0).width();
var h = $img.eq(0).height();
var $flashelement = $("ul", obj);
options.height == 0 ? obj.height(h) : obj.height(options.height);
options.width == 0 ? obj.width(w) : obj.width(options.width);
obj.css("overflow", "hidden");
obj.css("position", "relative");
$flashelement.css('width', s * w);
if (!options.vertical) {
$("li", obj).css('float', 'left')
}
else {
$img.css('display', 'block')
};
if (options.controlsShow) {
var navbtnhtml = '<div id="flashnvanum">';
for (var i = 0; i < s; i++) {
navbtnhtml += '<span>' + (i + 1) + '</span>';
}
navbtnhtml += '</div>';
obj.append(navbtnhtml);
obj.find("#flashnvanum span").hover(function() {
var num = $(this).html();
flash(num, true);
}, function() {
timeout = setTimeout(function() {
flash((curr / 1 + 1), false);
}, options.pause / 4);
});
};
function setcurrnum(index) {
obj.find("#flashnvanum span").eq(index).addClass('on').siblings().removeClass('on');
}
function flash(index, clicked) {
$flashelement.stop();
var next = index == s ? 1 : index + 1;
curr = index - 1;
setcurrnum((index - 1));
if (!options.vertical) {
p = ((index - 1) * w * -1);
$flashelement.animate(
{ marginLeft: p },
options.speed, options.easing
);
} else {
p = ((index - 1) * h * -1);
$flashelement.animate(
{ marginTop: p },
options.speed, options.easing
);
};
if (clicked) {
clearTimeout(timeout);
};
if (options.auto && !clicked) {
timeout = setTimeout(function() {
flash(next, false);
}, options.speed + options.pause);
};
}
var timeout;
//初始化
setcurrnum(0);
if (options.auto) {
timeout = setTimeout(function() {
flash(2, false);
}, options.pause);
};
});
};
//默认值
$.fn.flashSlider.defaults = {
controlsShow: true, //是否显示数字导航
vertical: false, //纵向还是横向滑动
speed: 1000, //滑动速度
auto: true, //是否自定滑动
pause: 4000, //两次滑动暂停时间
easing: "swing", //easing效果，默认swing，更多效果需要easing插件支持
height: 0, //容器高度，不设置自动获取图片高度
width: 0//容器宽度，不设置自动获取图片宽度
}
})(jQuery);
然后再首页插入四张图片：
<div id="slider">
<ul>
<li>
<img src="images/1.jpg"alt="" style="width: 500px" /></li>
<li>
<img src="images/2.jpg" alt="" style="width: 500px" /></li>
<li>
<img src="images/3.jpg" alt="" style="width: 500px"/></li>
<li>
<img src="images5.jpg" alt="" style="width: 500px" /></li>
<li>
<img src="images/4.jpg" alt="" style="width: 500px" /></li>
</ul>
</div>
请哪位高手帮忙看看具体代码怎么实现的，最好把上面那个JS文件写个注释，谢谢了！ --------------------编程问答-------------------- flashSlider——基于Jquery的图片展示插件
大多数的jquery图片幻灯片插件都只是提供了“上一个”“下一个”操作，没有实现数字导航，比如Easy Slider ，写这个插件也主要是在Easy Slider基础上改动的，由于有点像flash图片展示的效果，所以就叫flashSlider吧
先看看效果：
flashSlider的功能
1.支持纵向滑动和横向滑动
2.支持自动滚动和连续滑动
3.数字导航功能
4.自定义容器高度和宽度
5.可设置滑动速度、是否自动、停顿间隔
6.支持Jquery的easing效果（更多效果需要easing插件的支持，默认是swing）
flashSlider的使用方法
1.首先是是Html标记
<div id="slider">
<ul>
<li>
<img src="images/01.jpg" alt="" />li>
<li>
<img src="images/02.jpg" alt="" />li>
<li>
<img src="images/03.jpg" alt="" />li>
<li>
<img src="images/04.jpg" alt="" />li>
<li>
<img src="images/05.jpg" alt="" />li>
ul>
div>
2.然后调用jQuery库和flashSlider插件
<script src="javascript/jquery-1.3.2.min.js" type="text/javascript">script>
<script src="javascript/jquery.flashSlider-1.0.min.js" type="text/javascript">script> 3.初始化代码
<script type="text/javascript">
$(document).ready(function() {
$("#slider").flashSlider();
});
script>
4.加入css样式
/
*容器*/
slider ul, #slider li
{
margin: 0;
padding: 0;
list-style: none;
}
/*数字导航样式*/
#flashnvanum
{
bottom: 10px;
position: absolute;
right: 20px;
width: 90px;
}
#flashnvanum span
{
background: transparent url(../images/flashbutton.gif) no-repeat scroll -15px 0;
color: #86A2B8;
cursor: pointer;
float: left;
font-family: Arial;
font-size: 12px;
height: 15px;
line-height: 15px;
margin: 1px;
text-align: center;
width: 15px;
}
#flashnvanum span.on
{
background: transparent url(../images/flashbutton.gif) no-repeat scroll 0 0;
color: #FFFFFF;
height: 15px;
line-height: 15px;
width: 15px;
}
flashSlider的默认参数
//默认值
$.fn.flashSlider.defaults = {
controlsShow: true, //是否显示数字导航
vertical: false, //纵向还是横向滑动
speed: 800, //滑动速度
auto: true, //是否自定滑动
pause: 2000, //两次滑动暂停时间
easing: "swing", //easing效果，默认swing，更多效果需要easing插件支持
height: 0, //容器高度，不设置自动获取图片高度
width: 0//容器宽度，不设置自动获取图片宽度
}
源代码： http://files.cnblogs.com/dushouke/jquery.flashSlider1.0.rar
--------------------编程问答-------------------- http://www.cnblogs.com/dushouke/archive/2009/12/30/1636390.html --------------------编程问答-------------------- 楼上回答很好
--------------------编程问答--------------------
楼主可以看下，这里面都是Jquery实现的图片滑动参考
--------------------编程问答--------------------
mark
--------------------编程问答--------------------
http://www.flashslider.com/看看jquery
--------------------编程问答-------------------- 学习 顶 --------------------编程问答-------------------- 还是jquery 吧，方便好用！ --------------------编程问答-------------------- 路过，帮顶！ --------------------编程问答-------------------- ddddddd --------------------编程问答-------------------- JQuery
我还不会啊 --------------------编程问答-------------------- JQuery 现在好多都在用啊！多学学！！ --------------------编程问答-------------------- 没搞过Jquery，看来以后必须得搞了！！ --------------------编程问答-------------------- 是啊。。。以后还是要学学的。。。帮你顶一下。。。加油咯
补充：.NET技术 , ASP.NET
