jquery焦点图代码，幻灯过渡特效，仿IE特效滤镜
一款居于jquery框架的焦点图插件，有幻灯片过渡效果，模拟IE滤镜，完全兼容firefox，chrome浏览器，不需要使用IE下的滤镜。
原理依据spw/sph的配置，在容器上生成spw*sph个块（宽和高依据容器计算得出），这些块的背景设置为下一张要显示的图片，依靠background-position控制每个块显示下一张图片的某个区域，让这些块组合起来显示为下一张图片，然后设置这些块的透明度，按照随机到的效果控制这些块的显示。
jquery焦点图配置如下
$.fn.coinslider.defaults = {
width: 565,//焦点图默认宽度
height: 290,//焦点图默认高度
spw: 7,//控制过滤效果块的水平方向的数量
sph: 5,//控制过滤效果块的垂直方向的数量，注意spw和sph不要设置得太大，保持默认比较好，要不浏览器比较吃cpu
delay: 3000,//2个图片切换时间间隔
sDelay: 30,//效果块的动作时间
opacity: 0.7,//如果配置了图片的说明文字，则为说明文字层的透明度
titleSpeed: 500,//说明文字呈现出来的时间
effect: '',//图片切换效果，'random','swirl','rain','straight'其中一种，不传递默认为random，随机其中一种，其中3中效果中又有2个不同的方向的插除效果
navigation: true,//是否显示导航，就是上述图片那些正方形的点和左右按钮
links: true,//图片是否启用链接，如果设置为false，即使初始化的DOM中又链接也无法点击，被隐藏起来
hoverPause: true,//鼠标移动到焦点图上是否暂停播放
//////////////新增配置，图片pre/next文字导航
hoverShowNP:false,//导航为true时，配置此项为true，则鼠标移动到焦点图上才会显示文字导航
preWord:'prev',//上一张图片导航文字
nextWord:'next'//下一张图片导航文字
}
jquery焦点图测试代码及DOM结构
<!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焦点图代码，幻灯过渡特效，仿IE特效滤镜</title>
<link rel="stylesheet" href="/demo/coin-slider/coin-slider.css" type="text/css" />
</head>
<body>
<div id="flash" class="forstyle">
<a href="/" target="_blank">
<img src="/demo/coin-slider/1.jpg" alt="Mini Ninjas"/>
<span>
<b>Mini Ninjas</b>
Your quest to defeat the Evil Samurai Warlord has begun. Control the powers of nature, possess creatures, use your
furious Ninja skills to free your Ninja friends.
</span>
</a>
<a href="/" target="_blank">
<img src="/demo/coin-slider/2.jpg" alt="Price of Persia" />
</a>
<a href="/" target="_blank">
<img src="/demo/coin-slider/3.jpg" alt="Spiderman: Shattered Dimensions" />
</a>
<a href="/" target="_blank">
<img src="/demo/coin-slider/4.jpg" alt="Borderlands" />
<span>
<b>Borderlands</b>
Fun combat and a steady flow of rewards make this journey a massively enjoyable one, especially with some fellow mercenaries along for the ride.
</span>
</a>
</div>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/demo/coin-slider/coin-slider.min.js"></script>
<script>
$(document).ready(function () {
$('#flash').coinslider({ hoverPause: true, delay: 6000,preWord:'上一张',nextWord:'下一张',hoverShowNP:true});
});
</script>
</body>
</html>
源代码下载：jquery焦点图代码
加支付宝好友偷能量挖...
原创文章，转载请注明出处：jquery焦点图代码，幻灯过渡特效，仿IE特效滤镜