jquery商城类封装插件

自从解决了定时器的问题后，什么都好弄了

这是仿苏宁商城banner的，当然我没弄得那么好啦，但是我想就是那个缩略图，我没弄好吧，方法我猜想是通过把所有li都放进数组，然后通过遍历，就可以做出相应的效果吧；

html

<div class="banner">
    <div class="slider">
        <a href="javascript:;" class="prev"><</a>
        <a href="javascript:;" class="next">></a>
        <ul>
            <li style="background:#F6F6F6">
                <a href="">
                    <img src="./首页-海汇网_files/banner.png" alt=""></a>
            </li>
            <li style="background:#2f2f2f">
                <a href="">
                    <img src="./首页-海汇网_files/banner1.png" alt=""></a>
            </li>
            <li style="background:#222">
                <a href="">
                    <img src="./首页-海汇网_files/banner2.png" alt=""></a>
            </li>
        </ul>
    </div>
    <div class="others">
        <div class="pagination"></div>
    </div>
</div>

<script type="text/javascript">
      $('.banner').fadeTab({
          'pageNum':true
      });
  </script>

css

.banner .slider{
    width:100%;
    position: relative;
    height:450px;
    overflow: hidden;
}
.banner .slider li{
   display: block;
/*   background:#999;*/
    position: absolute;
    z-index: 60;
    top: 0;
    left: 0;
    opacity: 1;
    width: 100%;
    height: 450px;
}
.banner .slider li a{
    position: absolute;
    left: 50%;
    width: 1000px;
    background:#666;
    height: 450px;
    margin-left: -500px;
}
.banner .others{
    width:1000px;
    margin:0 auto;
    height:30px;
    z-index: 1000;
    bottom:30px;
    position: relative;
}
.banner .slider .prev{
    width:50px;
    height:50px;
    display: none;
    z-index: 1000;
    position: absolute;
    left:100px;
    top:50%;
    border-radius: 100%;
    line-height: 50px;
    margin-top:-20px;
    background:#333;
    opacity: 0.5;
    color:#fff;
    font-size: 20px;
}
.banner .slider .next{
    width:50px;
    z-index: 1000;
    height:50px;
    display: none;
    position: absolute;
    right:100px;
    line-height: 50px;
    border-radius: 100%;
    top:50%;
    margin-top:-20px;
    background:#333;
    opacity: 0.5;
    color:#fff;
    font-size: 20px;
}
.banner .others .pagination{
    bottom: 0px;
    height:30px;
    z-index: 1001;

    text-align: center;
    line-height: 30px;
    font-size: 16px;
    margin:0 auto;
}
.banner .others .pagination i{
    display: inline-block;
    width:10px;
    height:10px;
    cursor: pointer;
    background:#fff;
    margin:5px;
    border-radius: 50%;
    opacity: 0.8;
    font-size: 0;
}
.banner .others .pagination i.on{
    opacity: 1;
    width:20px;
    vertical-align: top;
    margin-top:0px;
    height:20px;
    font-style: normal;
    font-size: 12px;
    text-decoration: none;
    text-align: center;
    line-height: 20px;
    background:#fff;
}
.banner .others .pagination i.active{
    opacity: 1;
    width:10px;

    margin-top:0px;
    height:10px;

    background:#fff;
}

jquery

 /**
  *
  * @authors Your Name (you@example.org)
  * @date    2015-09-13 01:54:25
  * @version $Id$
  */
 (function($) {
	$.fn.fadeTab = function(options) {
		var settings = $.extend({
			"autoPlay": true,
			'time': 3000,
			'fadeInSpeed':800,
			'fadeOutSpeed':400,
			'pageNum':false,
			'pageClassOn':'on',
			'pageClassActive':'active'
		}, options);

		return this.each(function() {
			var n = 0;
			var t;
			var pageIndex;
			var b = true;
			var $this = $(this);
			var $slider = $this.find('.slider');
			var $others = $this.find('.others');
			var pageLow = $others.find('.pagination');
			var prevBtn = $slider.find('.prev');
			var nextBtn = $slider.find('.next');
			var sliderLi = $slider.find('li');
			var count = sliderLi.length;
			var time = 3000;
			var pageClass;

			//初始化
			var intFade = function() {
				for (j = 0; j < sliderLi.length; j++) {
					var pi = '<i></i>';
					pageLow.append(pi);
				};
				pageIndex = $others.children('.pagination').find('i');
				if(settings.pageNum == true){
					pageClass = settings.pageClassOn;
					pageIndex.eq(0).addClass(pageClass).text(1);
				}else{
					pageClass = settings.pageClassActive;
					pageIndex.eq(0).addClass(pageClass);
				}
				sliderLi.not(':first-child').hide();
			}
			intFade();

			//回调，防止重复点击造成的轮播延迟的情况
			var callBack = function() {
				b = true;
			}

			//分页
			var pageTab = function(i, fn) {
				sliderLi.eq(i).stop(false, true).fadeIn(800).siblings().fadeOut(400);
				pageIndex.eq(i).addClass(pageClass).siblings().removeClass(pageClass);
				if(settings.pageNum == true){
				    pageIndex.eq(i).text(i + 1);
			    }
				//使用回调的方法，让每次动画执行完毕后，再让b = true;
				if (fn) {
					setTimeout(fn, 800)
				}
			};

			//上一张
			var fadePrev = function() {
				if (!b) {
					return;
				}
				b = false;
				if (n <= 0) {
					n = count - 1;
				} else {
					n--;
				}
				pageTab(n, callBack);
			};

			//下一张
			var fadeNext = function() {
				if (!b) {
					return;
				};
				b = false;
				if (n >= sliderLi.length - 1) {
					n = 0;
				} else {
					n++;
				}
				pageTab(n, callBack);
			};

			//圆点点击
			pageIndex.click(function() {
				if (!b) {
					return;
				}
				b = false;;
				var i = $(this).index(); //获取Li元素内的值，即012
				n = i;
				pageTab(n, callBack);
			});

			prevBtn.on('click', fadePrev);
			nextBtn.on('click', fadeNext);

			//鼠标悬停停止
			$this.hover(function() {
				if (t) {
					clearInterval(t)
				};
				prevBtn.show();
				nextBtn.show();
			}, function() {
				prevBtn.hide();
				nextBtn.hide();
				if(settings.autoPlay){
			        t = setInterval(showAuto, settings.time);
			    }
			});

			//自动播放
			function showAuto() {
				if (n >= sliderLi.length - 1) {
					n = 0;
				} else {
					n++;
				}
				pageTab(n, callBack);

			};
			if(settings.autoPlay){
			     t = setInterval(showAuto, settings.time);
			}
		})
 	}
 })(jQuery)