jQuery焦点图(笔记)

没时间自己去写，在网上找了个，觉得还蛮可以的。
经过我的精简再精简之后代码变少很多。贴出来共享。
soChangeDemo.html：
<div class="changeBox_a1" id="change_3"> <a href="#1"><img src="images/1.jpg" /></a> <a href="#2"><img src="images/2.jpg" /></a> <a href="#3"><img src="images/3.jpg" /></a> <a href="#4"><img src="images/4.jpg" /></a>
<ul class="ul_change_a2"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul></div>
<script type="text/javascript">$(function () { $('#change_3 img').soChange({ thumbObj: '#change_3 .ul_change_a2 li', thumbNowClass: 'on',//自定义导航对象当前class为on changeTime: 2500//自定义切换时间为2500ms });});</script>
style.css：
* { margin:0; padding:0 }
.changeBox_a1 { width:650px; height:250px; position:relative; }
.changeBox_a1 img { position:absolute; border:0; display:none; }
.ul_change_a2 { position:absolute; right:4px; bottom:4px; overflow:hidden; }
.ul_change_a2 li { display:inline; float:left; margin:2px; width:18px; height:20px; line-height:20px; text-align:center; border:1px solid #999; background:#fff; cursor:pointer; }
.ul_change_a2 li.on { border:1px solid #CC0000; background:#FFFF9D; color:#CC0000; }
jquery.soChange.js：
/* * soChange 1.5 - simple gallery with jQuery * made by bujichong 2010-01-29 * 作者：不羁虫 2010-01-29 * http://hi.baidu.com/bujichong/ */;(function($){ $.fn.extend({ "soChange": function(o){ o= $.extend({ thumbObj:null,//导航对象 botPrev:null,//按钮上一个 botNext:null,//按钮下一个 thumbNowClass:'now',//导航对象当前的class,默认为now thumbOverEvent:true,//鼠标经过thumbObj时是否切换对象，默认为true，为false时，只有鼠标点击thumbObj才切换对象 slideTime:1000,//平滑过渡时间，默认为1000ms autoChange:true,//是否自动切换，默认为true clickFalse:true,//导航对象如果有链接，点击是否链接无效，即是否返回return false，默认是return false链接无效，当thumbOverEvent为false时，此项必须为true，否则鼠标点击事件冲突 overStop:true,//鼠标经过切换对象时，切换对象是否停止切换，并于鼠标离开后重启自动切换，前提是已开启自动切换 changeTime:5000,//自动切换时间 delayTime:300//鼠标经过时对象切换迟滞时间，推荐值为300ms }, o || {}); var _self = $(this); var thumbObj; var size = _self.size(); var nowIndex =0; //定义全局指针 var index;//定义全局指针 var startRun;//预定义自动运行参数 var delayRun;//预定义延迟运行参数 //主切换函数 function fadeAB () { if (nowIndex != index) { if (o.thumbObj!=null) { $(o.thumbObj).removeClass(o.thumbNowClass).eq(index).addClass(o.thumbNowClass);} if (o.slideTime <= 0) { _self.eq(nowIndex).hide(); _self.eq(index).show(); }else{ _self.eq(nowIndex).fadeOut(o.slideTime); _self.eq(index).fadeIn(o.slideTime); } nowIndex = index; if (o.autoChange==true) { clearInterval(startRun);//重置自动切换函数 startRun = setInterval(runNext,o.changeTime);} } } //切换到下一个 function runNext() { index = (nowIndex+1)%size; fadeAB(); } //初始化 _self.hide().eq(0).show(); //点击任一图片 if (o.thumbObj!=null) { thumbObj = $(o.thumbObj); //初始化thumbObj thumbObj.removeClass(o.thumbNowClass).eq(0).addClass(o.thumbNowClass); thumbObj.click(function () { index = thumbObj.index($(this)); fadeAB(); if (o.clickFalse == true) { return false; } }); if (o.thumbOverEvent == true) { thumbObj.mouseenter(function () { index = thumbObj.index($(this)); delayRun = setTimeout(fadeAB,o.delayTime); }); thumbObj.mouseleave(function () { clearTimeout(delayRun); }); } } //点击上一个 if (o.botNext!=null) { $(o.botNext).click(function () { if(_self.queue().length<1){ runNext();} return false; }); } //点击下一个 if (o.botPrev!=null) { $(o.botPrev).click(function () { if(_self.queue().length<1){ index = (nowIndex+size-1)%size; fadeAB();} return false; }); } //自动运行 if (o.autoChange==true) { startRun = setInterval(runNext,o.changeTime); if (o.overStop == true) { _self.mouseenter(function () { clearInterval(startRun);//重置自动切换函数 }); _self.mouseleave(function () { startRun = setInterval(runNext,o.changeTime); }); } } } })})(jQuery);

延伸阅读