轮播图

留存参考

jq部分

;(function($){
    $.fn.Xslider = function(options){var settings ={
            affect: 'scrolly', //效果  有scrollx|scrolly|fade|none
            speed: 1200, //动画速度
            space: 2000, //时间间隔
            auto: true, //自动滚动
            trigger: 'mouseover', //触发事件 注意用mouseover代替hover
            trigger2: 'mouseout', //触发事件 注意用mouseover代替hove
            conbox: '.conbox', //内容容器id或class
            ctag: 'a', //内容标签 默认为<a>
            switcher: '.switcher', //切换触发器id或class
            stag: 'a', //切换器标签 默认为a
            current:'cur', //当前切换器样式名称
            rand:false //是否随机指定默认幻灯图片
        };
        settings = $.extend({}, settings, options);
        var index = 1;
        var last_index = 0;
        //alert();
        var $conbox = $(this).find(settings.conbox),$contents = $conbox.find(settings.ctag);
        var $switcher = $(this).find(settings.switcher),$stag = $switcher.find(settings.stag);
        if(settings.rand) {index = Math.floor(Math.random()*$contents.length);slide();}
        if(settings.affect == 'fade'){$.each($contents,function(k, v){(k === 0) ? $(this).css({'position':'absolute','z-index':9}):$(this).css({'position':'absolute','z-index':1,'opacity':0});
            });
        }
        function slide(){if (index >= $contents.length) index = 0;
            $stag.removeClass(settings.current).eq(index).addClass(settings.current);
            switch(settings.affect){
                case 'scrollx':
                    $conbox.width($contents.length*$contents.width());
                    $conbox.stop().animate({left:-$contents.width()*index},settings.speed);
                    break;
                case 'scrolly':
                    $contents.css({display:'block'});
                    $conbox.stop().animate({top:-$contents.height()*index},settings.speed);
                    break;
                case 'fade':
                    $contents.eq(last_index).stop().animate({'opacity': 0}, settings.speed/2).css('z-index',1)
                             .end()
                             .eq(index).css('z-index',9).stop().animate({'opacity': 1}, settings.speed/2)
                    break;
                case 'none':
                    $contents.hide().eq(index).show();
                    break;
            }
            last_index = index;
            index++;
        };
        if(settings.auto) var Timer = setInterval(slide, settings.space);
        $stag.bind(settings.trigger,function(){
            _pause()
            index = $(this).index();
            slide();
            //_continue()
        });
        $stag.bind(settings.trigger2,function(){
            _continue()
        });
        $conbox.hover(_pause,_continue);
        
        function _pause(){
            clearInterval(Timer);
        }
        function _continue(){
            if(settings.auto) Timer = setInterval(slide, settings.space);
        }    
    }
})(jQuery);

调用jq

<script type="text/javascript">
$(document).ready(function(){
    // 焦点图片淡隐淡现
    $("#slider3").Xslider({
        affect:'fade',
        ctag: 'div'
    });
});
</script>

html部分

<div class="slider" id="slider3">
            <div class="conbox">
                <div style="position: absolute; z-index: 9; opacity: 1;"><a title="" href="#"><img src="images/b.jpg"></a></div>
                <div style="position: absolute; z-index: 1; opacity: 0;"><a title="" href="#"><img width="620" height="340" src="images/e.jpg" alt=""></a></div>
                <div style="position: absolute; z-index: 1; opacity: 0;"><a title="" href="#"><img width="620" height="340" src="images/2.jpg" alt=""></a></div>
                <div style="position: absolute; z-index: 1; opacity: 0;"><a title="" href="#"><img width="620" height="340" src="images/d.jpg" alt=""></a></div>
                <div style="position: absolute; z-index: 1; opacity: 0;"><a title="" href="#"><img width="620" height="340" src="images/8.jpg" alt=""></a></div>
            </div>
            <div class="switcher">
                <a class="cur" href="#">1</a>
                <a href="#" class="">2</a>
                <a href="#" class="">3</a>
                <a href="#" class="">4</a>
                <a href="#" class="">5</a>
            </div>
        </div>

 css部分

<style type="text/css">
#demopage{width:960px;margin:0 auto;}
/* slider */
.slider{width:960px;height:340px;position:relative;overflow:hidden;}
.conbox{position:absolute;/*必要元素*/}
.switcher{position:absolute;bottom:10px;right:10px;float:right;z-index:99;}
.switcher a{background:#fff;border:1px solid #D00000;cursor:pointer;float:left;font-family:arial;height:18px;line-height:18px;width:18px;margin:4px;text-align:center;color:#D00000;}
.switcher a.cur,.switcher a:hover{background:#FF0000;border:1px solid #D00000;height:24px;line-height:24px;width:24px;margin:0 2px;color:#fff;font-weight:800;}
/* slider1 水平 */
#slider1 .conbox{width:9999em;}
#slider1 .conbox div{width:620px;height:340px;overflow:hidden;float:left;}
/* slider2 水平 */
#slider2 .conbox div{width:620px;height:340px;overflow:hidden;}
/* slider3 淡隐淡现 */
#slider2 .conbox div{width:620px;height:340px;}
</style>

 

转载于:https://www.cnblogs.com/laugh/p/4535542.html