CSS我就不贴了，之后我会将其上传 。最重要的是JavaScript代码：[javascript] view plain copy(function($) { $.fn.slider = function(options) { //this指向当前的选择器 var config = { index: 0, timer: null, speed: 3000, min: 0.3，//和css中的样式对应 max: 1 }; var opts = $.extend(config, options)； //核心方法，把当前index的图片和icon显示，把除此之外的图片和icon隐藏 var core = function() { if (opts.index > 4) { opts.index = 0; } else if (opts.index < 0) { opts.index = 4; } $(".slider_icon span").eq(opts.index).addClass("active").siblings("span").removeClass("active"); $(".slider_img a").eq(opts.index).css("display", "block").stop().animate({ "opacity": opts.max }, 1000).siblings("a").css({ "display": "none", "opacity": opts.min })； }； //左边 $（this）.find("#left").bind("click", function() { --opts.index; core（)； }）； //右边 $（this）.find("#right").bind("click", function() { ++opts.index; core（)； }）； //每个icon分配事件 $（this）.find(".slider_icon").on("click", "span", function() { var index = $(this).index(); opts.index = index; core（)； }）； //定时器 var start = function() { opts.timer = setInterval(function() { ++opts.index; core(); }, opts.speed); } $(this).hover(function() { clearInterval(opts.timer); }, function() { start(); }); start(); } }(jQuery)); 1:core方法，其实图片轮播的本质就是把当前索引的图片显示，导航icon高亮，其余的隐藏，我做的是淡入淡出 。
2：向左，向右，导航其实无非就是index的改变，jquery提供了一个index（)方法，可以获得所有匹配元素中当前元素的索引，从0开始 。3：定时器，要实现图片的自动导航，无非就是每隔一定的时间，index+1 。
另外，当鼠标放入的时候，要清楚定时器，当输入移出的时候，再开启定时器 。
10. 带左右按钮jquery轮播特效怎么写 //我项目里面的轮播，可以参考 。
<！DOCTYPE html><meta charset="utf-8" />t><body>