Jquery幻灯片轮播广告特效插件

Jquery幻灯片轮播广告特效插件

这次要跟大家分享的插件是幻灯片效果的插件,这个特效在现在的网站中也是最常用到的交互特效之一,这两天才整理好,发出来给大家,希望对大家的生活和工作都会有所帮助。废话不多说直接进入今天主题。


首先看下HTML代码结构

<!--  轮播动画开始  -->
<div id="slider">
    <!-- 大图开始 -->
    <ul class="view">
        <li>
            <a href="javascript:;" target="_blank">
                <img src="images/pichaoad01.jpg" alt="flash轮播特效图片1" />
            </a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">
                <img src="images/pichaoad02.jpg" alt="flash轮播特效图片2" />
            </a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">
                <img src="images/pichaoad03.jpg" alt="flash轮播特效图片3" />
            </a>
        </li>
    </ul>
    <!-- 小图标 -->
    <ul class="control">
        <li><a href="javascript:;"></a></li>
        <li><a href="javascript:;"></a></li>
        <li><a href="javascript:;"></a></li>
    </ul>
    <!-- 触发器 -->
    <!-- 上下翻页切换按钮 -->
    <div id="btn_prev"></div>
    <div id="btn_next"></div>
</div>
<!--  轮播动画结束  -->

代码量不多,相对还算比较简洁吧

接下来在看下CSS代码

#slider {
	width:960px;
	height:450px;
	margin:0 auto;
	overflow:hidden;
	position:relative;
}
#slider .view {
	width:960px;
	height:450px;
	position: relative;
}
#slider .view li {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
.control {
	margin:0 auto;
	position: absolute;
	z-index: 10;
	right:47%;
	bottom: 15px;
}
.control li {
width: 20px;
height: 20px;
display: inline;
}
.control li a {
	width: 20px;
	height: 20px;
	display: inline-block;
	overflow: hidden;
	background: url(../images/triggers.png) no-repeat 0 0;
	font-size: 0.2px;
	line-height: 10000;
}
.control li.current a,.control li a:hover {
	background: url(../images/triggers.png) no-repeat 0 -20px;
}
#btn_prev,#btn_next{
	width:50px;
	height:45px;
	z-index: 99;
	position:absolute;
	top: 50%;
	cursor:pointer;
	background:url(../images/prev.png);
}
#btn_next{right:0;background:url(../images/next.png);}



接下来就是重头戏Jquery代码了

(function($) {
	$.fn.soChange=function(options){
		var defaults={
			thumbObj: null,
			btnPrev: null,
			btnNext: null,
			thumbNowClass: "current",
			thumbOverEvent: true,
			slideTime: 1000,
			autoChange: true,
			clickFalse: true,
			overStop: true,
			changeTime: 5000,
			delayTime: 300
		};
		var $obj = $.extend(defaults,options);	
		var $this = $(this);
		var i;  
		var $size = $this.size();
		var $idx = 0;
		var g;
		var c;
		var f;
		//初始化所有大图都隐藏只有第一贞显示
		$this.hide().eq(0).show();
		//执行动画
		function j() {
			g = ($idx + 1) % $size;
			d();
		}
		//动画方法
		function d() {
			if ($idx != g) {
				//切换控制器样式
				if ($obj.thumbObj != null) {
					$($obj.thumbObj).removeClass($obj.thumbNowClass).eq(g).addClass($obj.thumbNowClass)
				}
				//根据切换设置时间选择相对应的方式
				if ($obj.slideTime <= 0) {
					$this.eq($idx).hide();
					$this.eq(g).show()
				} else {
					$this.eq($idx).fadeOut($obj.slideTime);
					$this.eq(g).fadeIn($obj.slideTime)
				}
				//切换完幻灯片后将$idx更新为最新值
				$idx = g;
				if ($obj.autoChange == true) {
					clearInterval(c);
					c = setInterval(j, $obj.changeTime)
				}
			}
		}
		if ($obj.thumbObj != null) {
			i = $($obj.thumbObj);
			i.removeClass($obj.thumbNowClass).eq(0).addClass($obj.thumbNowClass);

			i.click(function() {
				g = i.index($(this));
				d();
				if ($obj.clickFalse == true) {
					return false
				}
			});
			if ($obj.thumbOverEvent == true) {
				i.mouseenter(function() {
					g = i.index($(this));
					f = setTimeout(d, $obj.delayTime)
				});
				i.mouseleave(function() {
					clearTimeout(f)
				})
			}
		}
		//上下按钮
		if ($obj.btnNext != null) {
			$($obj.btnNext).click(function() {
				if ($this.queue().length < 1) {
					j();
				}
				return false
			})
		}
		if ($obj.btnPrev != null) {
			$($obj.btnPrev).click(function() {
				if ($this.queue().length < 1) {
					g = ($idx + $size - 1) % $size;
					d();
				}
				return false
			})
		}
		//启动自动切换
		if ($obj.autoChange == true) {
			c = setInterval(j, $obj.changeTime);

			if ($obj.overStop == true) {
				$this.mouseenter(function() {
					clearInterval(c)
				});
				$this.mouseleave(function() {
					c = setInterval(j, $obj.changeTime)
				})
			}
		}
	}	
})(jQuery);

有耐心的同学可以看下仔细研究下源码,代码中都有注释,如果有什么地方不明白的可以给我留言


github地址https://github.com/owen-hong/gradual-change

下载地址https://github.com/owen-hong/gradual-change/archive/master.zip


转载请注明来自 520UED http://www.520ued.com/article/5387fdbcb992a7c43f5c2033

comments powered by Disqus