zoukankan      html  css  js  c++  java
  • 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{
        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;
         100%;
        height: 450px;
    }
    .banner .slider li a{
        position: absolute;
        left: 50%;
         1000px;
        background:#666;
        height: 450px;
        margin-left: -500px;
    }
    .banner .others{
        1000px;
        margin:0 auto;
        height:30px;
        z-index: 1000;
        bottom:30px;
        position: relative;
    }
    .banner .slider .prev{
        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{
        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;
        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;
        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;
        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)
    

      

  • 相关阅读:
    第十四周学习进度
    二阶段冲刺(七)
    二阶段冲刺(六)
    二阶段冲刺(五)
    二阶段冲刺(四)
    二阶段冲刺(三)
    二阶段冲刺(二)
    二阶段冲刺(一)
    第十三周学习进度
    linux初级学习笔记二:linux操作系统及常用命令,文件的创建与删除和命名规则,命令行展开以及linux中部分目录的作用!(视频序号:02_3)
  • 原文地址:https://www.cnblogs.com/bestsamcn/p/5105811.html
Copyright © 2011-2022 走看看