zoukankan      html  css  js  c++  java
  • 海报轮换插件

    结构部分
    
    
                <div class="banner">
                    <ul>
                        <li></li>
                    </ul>
                </div>       
      $('.banner').bannerbox();
    
    
    
    ;(function($){
        $(document).ready(function(){
            $.fn.bannerbox = function(options){
                var defaults = {time:5000,color:'#d65f7d'};
                var changes = $.extend(defaults,options);
             var thiswidth = this.width(),indexs = 0;
                  this.children().eq(0).attr('id','ulid');
                  $('#ulid').children().addClass('imgid');
             var imgnumber = $('#ulid .imgid').length,
                  allwidth  = thiswidth*imgnumber;
                 this.children().eq(0).width(allwidth);
                  $('.imgid').width(thiswidth);
                  setInterval(autos,changes.time);
                 function autos(){
                     if(indexs==(imgnumber-1)){
                         indexs=-1;
                     }
                     $("#ulid").animate({left:'-'+thiswidth*(indexs+1)+'px'});
                     $("#banner-ico i").eq(indexs+1).css({'background-color':changes.color}).siblings().css({'background-color':"#e3e3e3"});
                         indexs++;
                 }
                 var    icohtml="<div id='banner-ico' style='position:absolute;bottom:20px;text-align:center;100%'></div>";
                 var ihtml = '';
                 this.append(icohtml);
                 for(var i=0;i<imgnumber;i++){
                     if(i==0){
                         ihtml += '<i style="height:4px;20px;background-color:'+changes.color+';cursor:pointer;display:inline-block;margin:0px 2px"></i>'
                     }else{
                         ihtml += "<i style='height:4px;20px;background-color:#e3e3e3;cursor:pointer;display:inline-block;margin:0px 2px'></i>"
                     }
                 }
                 $('#banner-ico').html(ihtml);
                 $("#banner-ico i").on('click',function(){
                     indexs = $(this).index()-1;
                     $(this).css({'background-color':changes.color}).siblings().css({'background-color':"#e3e3e3"});
                     $("#ulid").animate({left:'-'+thiswidth*(indexs+1)+'px'});
                 })
            }
        })
    })(jQuery)
  • 相关阅读:
    golang与vscode的安装与配置
    numpy学习之前的必要数学知识:线性代数
    分布式系统设计系列 -- 基本原理及高可用策略
    微服务的4个设计原则和19个解决方案
    JAVA8 十大新特性详解
    ConcurrentHashMap总结
    Java NIO理解与使用
    深入了解 Java-Netty高性能高并发理解
    java内存泄漏的定位与分析
    Netty高性能编程备忘录(下)
  • 原文地址:https://www.cnblogs.com/liangxiblog/p/5973548.html
Copyright © 2011-2022 走看看