jquery焦点图代码,幻灯过渡特效,仿IE特效滤镜

  一款居于jquery框架的焦点图插件,有幻灯片过渡效果,模拟IE滤镜,完全兼容firefox,chrome浏览器,不需要使用IE下的滤镜。

jquery焦点图代码,幻灯过渡特效,仿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特效滤镜

评论(1)Web开发网
阅读(210)喜欢(1)不喜欢(0)JavaScript/Ajax开发技巧