淡入淡出轮播幻灯片

qq_42793160

于 2019-05-05 21:46:59 发布

阅读量124

点赞数

分类专栏：自娱自乐

本文链接：https://blog.csdn.net/qq_42793160/article/details/89855786

版权

自娱自乐专栏收录该内容

3 篇文章 0 订阅

订阅专栏

构造函数（声明变量）

function Slider($elem,options){
        this.$elem = $elem;
        this.options = options;
        this.$indicators = this.$elem.find('.slider-indicator');
        this.$items = this.$elem.find('.slider-item');
        this.itemNum = this.$items.length;
        this.curIndex = this._getCorrectIndex(this.options.activeIndex); 
        this.$controls = this.$elem.find('.slider-control');
        
        this._init();
    }

淡入淡出

初始化

if (this.options.animation === 'fade') {
        	//要记住添加fade的类
        	this.$elem.addClass('slider-fade');  
            //显示当前图片
        	this.$items.eq(this.curIndex).show()

            this.$items.on('show shown hide hidden',function (e) {
                self.$elem.trigger('slider-'+e.type,[self.$items.index(this), this]);
                // 发送消息，同时传参当前显示的第几个及该DOM
            });   
        
             //init showHide
            this.$items.showHide(this.options)
        	this.to = this._fade
        }
        
         //bind event
        this.$elem.hover(function() {
            //显示隐藏左右按钮，利用冒泡事件
            self.$controls.show()
        },function() {
            self.$controls.hide()
        }).on('click','.slider-control-left',function(){
        	    var num = self.curIndex-1;
                self.to(self._getCorrectIndex(num), 1); 
        }).on('click','.slider-control-right',function(){
            	var num = self.curIndex+1;
                self.to(self._getCorrectIndex(num), -1); 
        }).on('click', '.slider-indicator', function() {
        	    console.log(45)
                //用index函数获取点击原点的序号，将它传入进行判断
        	    self.to(self._getCorrectIndex(self.$indicators.index(this)));
        });
        //auto判断interval是否有值和是否是数字,然后执行鼠标划入停止
        
        if (this.options.interval && !isNaN(Number(this.options.interval))) {
                this.$elem.hover($.proxy(this.pause, this),$.proxy(this.auto, this))
                this.auto()
        }  
    };

实现淡入淡出的动作

//实现淡入淡出动作   
    Slider.prototype._fade=function(index){
       // 如果点击按钮与当前图片位置一致则不显示
    	if (this.curIndex === index) {return}
        //隐藏当前的显示指定的
    	this.$items.eq(this.curIndex).showHide('hide');
        this.$items.eq(index).showHide('show');
        //将当前的css的class删掉，为指定的图片添加class
        this.$indicators.eq(this.curIndex).removeClass('slider-indicator-active')
        this.$indicators.eq(index).addClass('slider-indicator-active')
        this.curIndex = index
    };

自动运行和停止

 Slider.prototype.auto=function(){
    	var self = this;
        this.intervalId = setInterval(function() {
            self.to(self._getCorrectIndex(self.curIndex+1));
        },this.options.interval)
    };
    //清除计时器
    Slider.prototype.pause=function(){
        clearInterval(this.intervalId);
    };

对外进行抛出

$.fn.extend({
    	slider: function(option) {
    		return this.each(function() {
    			//jq的data用法
                console.log($(this))
                var $this = $(this),
                mode = $this.data('slider'),
                //将所有的数据赋值给options
                options = $.extend({}, Slider.DEFAULT, $(this).data(), typeof option === 'object' && option);
                //判断是否第一次执行
                if (!mode) {
                	$this.data('slider', mode = new Slider($this, options));
                }
                 if (typeof mode[option] === 'function') {
                 	 mode[option]();
                 }
    		})
    	}
    })

完整代码

(function ($) {
	'use strict'
    //学习一下扩展方法
    function Slider($elem,options){
        this.$elem = $elem;
        this.options = options;
        this.$indicators = this.$elem.find('.slider-indicator');
        this.$items = this.$elem.find('.slider-item');
        this.itemNum = this.$items.length;
        this.curIndex = this._getCorrectIndex(this.options.activeIndex); 
        this.$controls = this.$elem.find('.slider-control');
        
        this._init();
    }

    Slider.DEFAULTS = {
        css3: false,
        js: false,
        animation: 'fade', // slide
        activeIndex: 0,
        interval: 0
    };
    //删除所有的样式，判断是滑入滑出还是淡入淡出，对showHide进行初始化，绑定事件、设置自动运行，发送消息
    Slider.prototype._init=function(){
        //初始状态
    	this.$indicators.removeClass('slider-indicator-active')
        this.$indicators.eq(this.curIndex).addClass('slider-indicator-active')
        var self = this

        if (this.options.animation === 'slide') {
            this.$elem.addClass('slider-slide');
            //将默认的那张设置在可视区域非
            this.$items.eq(this.curIndex).css('left', 0)

            //slide的发送消息
            this.$items.on('move moved',function (e) {
                //获取将要运动的那个图片元素
                var index = self.$items.index(this)
                if (e.type === 'move') {
                    if (index === self.curIndex) {
                        self.$elem.trigger('slider-hide', [index, this])
                    } else {
                        self.$elem.trigger('slider-show', [index, this])
                    }
                }
               
                if (e.type === 'moved') {
                    if (index === self.curIndex) {
                        self.$elem.trigger('slider-shown', [index, this])
                    }else {
                        self.$elem.trigger('slider-hidden', [index, this])
                    }
                }
                
            })
            //init move
            this.$items.move(this.options)
            this.itemWidth = this.$items.eq(0).width();
            this.transitionClass = this.$items.eq(0).hasClass('transition') ? 'transition' : '';
            this.to = this._slide
        } else {
        	//呀记住添加fade的类
        	this.$elem.addClass('slider-fade');  
            //显示当前图片
        	this.$items.eq(this.curIndex).show()

            this.$items.on('show shown hide hidden',function (e) {
                self.$elem.trigger('slider-'+e.type,[self.$items.index(this), this]);
                // 发送消息，同时传参当前显示的第几个及该DOM
            });   
        
             //init shoHide
            this.$items.showHide(this.options)
        	this.to = this._fade
        }
       
        //bind event

        this.$elem.hover(function() {
            //显示隐藏左右按钮
            self.$controls.show()
        },function() {
            self.$controls.hide()
        }).on('click','.slider-control-left',function(){
        	    var num = self.curIndex-1;
                self.to(self._getCorrectIndex(num), 1); 
        }).on('click','.slider-control-right',function(){
            	var num = self.curIndex+1;
                self.to(self._getCorrectIndex(num), -1); 

        }).on('click', '.slider-indicator', function() {
        	    console.log(45)
                //用index函数获取点击原点的序号，将它传入进行判断
        	    self.to(self._getCorrectIndex(self.$indicators.index(this)));
        });
        //auto判断interval是否有值和是否是数字,然后执行鼠标划入停止
        
        if (this.options.interval && !isNaN(Number(this.options.interval))) {
                this.$elem.hover($.proxy(this.pause, this),$.proxy(this.auto, this))
                this.auto()
        }

       
    };
    //实现循环
    Slider.prototype._getCorrectIndex = function(index) {
        if (isNaN(Number(index))) {return}
        if (index > this.itemNum - 1) {return 0;}
        if (index < 0) {return this.itemNum - 1}
        return index;
    };
    //实现淡入淡出动作   
    Slider.prototype._fade=function(index){
    	//隐藏当前的显示指定的
    	if (this.curIndex === index) {return}
    //需要发送
    	this.$items.eq(this.curIndex).showHide('hide');
        this.$items.eq(index).showHide('show');
        //将当前的css的class删掉，为指定的图片添加class
        this.$indicators.eq(this.curIndex).removeClass('slider-indicator-active')
        this.$indicators.eq(index).addClass('slider-indicator-active')
        this.curIndex = index
    }; 
    Slider.prototype.auto=function(){
    	var self = this;
        this.intervalId = setInterval(function() {
            self.to(self._getCorrectIndex(self.curIndex+1));
        },this.options.interval)
    };
    //清除计时器
    Slider.prototype.pause=function(){
        clearInterval(this.intervalId);
    };

    $.fn.extend({
    	slider: function(option) {
    		return this.each(function() {
    			//jq的data用法
                console.log($(this))
                var $this = $(this),
                mode = $this.data('slider'),
                //将所有的数据赋值给options，这里为什么使用了$(this)
                options = $.extend({}, Slider.DEFAULT, $(this).data(), typeof option === 'object' && option);
                //判断是否第一次执行
                if (!mode) {
                	$this.data('slider', mode = new Slider($this, options));
                }
                 if (typeof mode[option] === 'function') {
                 	 mode[option]();
                 }
    		})
    	}
    })
})(jQuery)

HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>幻灯片</title>
    <link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="./css/common.css" />
    <style>
    	.text-hidden{
        text-indent: -9999px;
        overflow: hidden;
        }
    	.slider{margin-left: 280px;
    		width: 728px;
    		height: 504px;
    		overflow: hidden;
            position: relative;
    	}
        .slider-indicator-wrap{
            position: absolute;
            left: 50%;
            bottom: 24px;
            margin-left: -36px;
           
        }
        .slider-indicator{
            width: 8px; 
            height: 8px;
            background-color: #313a43;
            border-radius: 50%;
            margin-right: 12px;
            
            cursor: pointer;
        }
        .slider-indicator-active {
        	position: relative;
        	top: -2px;
        	background-color: #f7f8f9;
        	border: 2px solid #858b92; 
        }
        .slider-control{
           position: absolute;
           top: 50%;
           margin-top: -31px;
           width: 28px;
           height: 62px;
           line-height: 62px;
           background-color: #000;
           opacity: 0.4;
           /*等同于 opacity: 0.4; 是为了兼容IE*/
           filter: alpha(opacity=40);
           color: #fff;
           font-size: 22px;
           font-family: simsun;
           text-align: center;
        }
        .slider-control-left{
        	left: 0;
        }
        .slider-control-right{
            right: 0;
        }
        .slider-fade .slider-item{
        	display: none;
        	top: 0;
        	left: 0;
        	width: 100%;
        	height: 100%;
        }
        /*.slider-slide .slider-item {
            position: absolute;
            left: 100%;
            top: 0;
            width: 100%;
            height: 100%;
        }*/

    </style>
</head>
<body>
    <!-- 传入哪个父元素，需要思考一下 -->
    <div id="focus-slider" class="slider ">
        <div class="slider-container">
            <!-- 这么写是为了方便添加图片和更改 -->
            <div class="slider-item">
                <a href="###" target="_blank"><img src="./img/focus-slider/1.png" alt=""  /></a>
            </div>
            <div class="slider-item">
                <a href="###" target="_blank"><img src="./img/focus-slider/2.png" alt=""  /></a>
            </div>
            <div class="slider-item">
                <a href="###" target="_blank"><img src="./img/focus-slider/3.png" alt=""  /></a>
            </div>
            <div class="slider-item">
                <a href="###" target="_blank"><img src="./img/focus-slider/4.png" alt=""  /></a>
            </div>
        </div>
        <!-- 要是使用无序尼？ -->
        <ol class="slider-indicator-wrap">
            <li class="slider-indicator text-hidden fl">1</li>
            <li class="slider-indicator text-hidden fl">2</li>
            <li class="slider-indicator text-hidden fl">3</li>
            <li class="slider-indicator text-hidden fl">4</li>
        </ol>
        <a href="javascript:;" class="slider-control slider-control-left">&lt;</a>
        <a href="javascript:;" class="slider-control slider-control-right">&gt;</a>
    </div>


    <script src="./js/jquery.js"></script>    
    <script src="./js/transition.js"></script>
    <script src="./js/showHide.js"></script>    
    <!-- <script src="./js/slider-1.0.js"></script> -->
    <script src="./js/slider-2.0.js"></script>
    <script src="./js/move.js"></script>
    <script >
    	//因为获取id是最快的
    	var $foucusSlider = $('#focus-slider');

    	$foucusSlider.on('slider-show slider-shown slider-hide slider-hidden',function (e,i, $elem) {
            console.log(i+':'+e.type);
            console.log($elem)
        });
        $foucusSlider.slider({
         css3: true,
         js: false,
         animation: 'slide',
         activeIndex: 0,
            interval: 0,
            loop: true
        })
    </script>   
</body>
</html>

qq_42793160

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
淡入淡出轮播幻灯片

构造函数（声明变量）function Slider($elem,options){ this.$elem = $elem; this.options = options; this.$indicators = this.$elem.find('.slider-indicator'); this.$items = this.$elem...
复制链接

扫一扫