zoukankan      html  css  js  c++  java
  • jq轮播图插件




    /*
     * 使用说明 
     *   
     *   1:需要提供一个标签  
     *   2:lis:图片的个数
     *   3:轮播图的大小 width ,height
     *   4:图片的地址imgs[0].carouselImg[0] 这是本人的地址,

    $('#mainCarousel').jdCarousel({lis:7,800,height:340,
             imgSrc:[
                    imgs[0].carouselImg[0],
                    imgs[0].carouselImg[1],
                    imgs[0].carouselImg[2],
                    imgs[0].carouselImg[3],
                    imgs[0].carouselImg[4],
                    imgs[0].carouselImg[5],
                    imgs[0].carouselImg[6]
                    ]
     });
     */












    (function($){
    $.fn.extend({
    jdCarousel:function(options){
    //ul
    var obj = $(this);
    $(this).append('<ul></ul>')
    for(var i=0 ; i<options.lis ; i++){
    $(this).children('ul').append('<li><a href="#"><img/></a><>');

    }
    //设置样式
    $(this).css({'overflow':'hidden','position':'relative'});
    $(this).children('ul').css({'width':options.width,'height':options.height,'overflow':'hidden',padding:0,'position':'relative'});
    $(this).find('li').css({'width':options.width,'height':options.height,'overflow':'hidden',padding:0,'position':'absolute'});
    $(this).find('li img').css({'width':options.width,'height':options.height,'overflow':'hidden'})
    //获得图片

    $(this).find('li').each(function(index,ele){

    $(this).find('img').attr('src',options.imgSrc[index]);
    //设置第一张图片显示

    if(index!=0){
    $(this).hide();
    }

    });

    //底部点点
    $(this).append('<div class="carouselDot"></div>');
    for(var i=0 ; i<options.lis ; i++){

    $(this).children('.carouselDot').append('<span></span>');


    }


    $(this).children('.carouselDot').css({'position':'absolute','z-index':10,'bottom':20,
         'left':(options.width - (options.lis*24 -8))/2 ,'background-color':'hsla(0,0%,100%,.3)',
        'padding':'1px 8px',height:20,'width':options.lis*24 +5,'border-radius':'12px'});
        
    $(this).children('.carouselDot').find('span').css({
    'margin':0,'display':'inline-block','height':'12px','width':'12px','margin-right':12,'background':'white',
    'border-radius':'50%'});
    $(this).children('.carouselDot').find('span').eq(options.lis - 1).css('margin-right',0);

    $(this).children('.carouselDot').children('span').eq(0).css('background','red');

    //上下张
    $(this).append('<span class="jdLeftPrev jdPNClick">&lt;</span>');
    $(this).append('<span class="jdRightNext jdPNClick">&gt;</span>');
    $(this).children('.jdPNClick').css({
    'display':'block','width':35,'height':50,'background':'rgba(0,0,0,0.5)','z-index':100,'position':'absolute',
    'text-align':'center','line-height':'50px','top':(options.height - 25)/2,'color':'white','font-size':30
    });
    $(this).children('.jdRightNext').css('right',0);
    $(this).children('.jdLeftPrev').css('left',0);

    //轮播图运动
    var last = 0;
    var index = 0;

    function doMove(){

    obj.find('li').eq(last).hide();
    obj.children('.carouselDot').children('span').eq(last).css('background','white');
    obj.find('li').eq(index).show();
    obj.children('.carouselDot').children('span').eq(index).css('background','red');

    last = index;
    index++;
    if(index == options.lis){
    index = 0;
    }

    }
    var timer = null ;
    timer = setInterval(doMove,1000);


    //点点
    // 鼠标移入事件
    obj.children('.carouselDot').hover(function(){
    obj.children('.carouselDot').css('cursor','pointer');
    clearInterval(timer);

    },function(){
    timer = setInterval(doMove,1000);
    });
    obj.children('.carouselDot').on('mouseover','span',function(event){
    // index+=1
    // index = index>=options.lis?0:index;
                    $(this).siblings().css('background','white');
                    index = $(this).index();
    doMove();
    });

    //prev next 事件

    $(this).hover(function(){
    $(this).children('.jdPNClick').css('background-color','rgba(0,0,0,0.5)');
    },function(){
    $(this).children('.jdPNClick').css('background-color','rgba(0,0,0,0.2)');
    });
    $(this).children('.jdPNClick').hover(function(){
    clearInterval(timer);
    },function(){
    timer = setInterval(doMove,1000);
    });

    $(this).children('.jdLeftPrev').click(jdLeftPrev);
    function jdLeftPrev(){
    clearInterval(timer);

    last = index;
    index -= 1;
    index = index<0? options.lis-1:index;
    obj.children('.carouselDot').children('span').eq(index).siblings().css('background','white');
    obj.find('li').eq(last).hide();
    obj.children('.carouselDot').children('span').eq(last).css('background','white');
    obj.find('li').eq(index).show();
    obj.children('.carouselDot').children('span').eq(index).css('background','red');
    }

    $(this).children('.jdRightNext').click(jdRightNext);
    function jdRightNext(){


    last = index;
    index += 1;
    index = index==options.lis? 0:index;
    obj.find('li').eq(last).hide();
    obj.children('.carouselDot').children('span').eq(index).siblings().css('background','white');
    obj.children('.carouselDot').children('span').eq(last).css('background','white');
    obj.find('li').eq(index).show();
    obj.children('.carouselDot').children('span').eq(index).css('background','red');
    }



    }
    })
    })(jQuery)
  • 相关阅读:
    7-41 PAT排名汇总 (25分)--排序
    7-40 奥运排行榜 (25分)--sort()排序,结构体,前驱
    7-39 魔法优惠券 (25分)--sort()
    7-38 寻找大富翁 (25分)--sort()
    7-37 模拟EXCEL排序 (25分)--优先队列
    python网络编程--socketserver 和 ftp功能简单说明
    python网络编程--FTP上传文件示例
    python网络编程--粘包解决方案 和 subprocess模块
    python网络编程--socket,网络协议,TCP
    python -- 模块和包
  • 原文地址:https://www.cnblogs.com/gaosen/p/6662229.html
Copyright © 2011-2022 走看看