zoukankan      html  css  js  c++  java
  • jquery自适应宽度轮播图

             以前做轮播图,都是宽度,高度有一个固定的大小; juqery代码如下:  

    $(function(){
    	var n=0
    	function nup(){
    		if(n<2){n=n+1}else{n=0}
    		$(".banner_width img").hide()
    		$(".banner_width img").eq(n).fadeIn(500)
    		
    	}
    	var timer=setInterval(nup,5000)
    
    
    })
    

       这样可以让几张banner图片动起来;

      最近的一个项目中要做 100%; height:auto; 的自适应轮播图;

      发现问题:

      当用上面的方法做时会发现有一个bug;

      在浏览到当前页面的底部时,会发现右边的滚动条向上弹;

      

      分析问题:

      后来发现是因为;

      在第一张图片隐藏(hide),第二张图片还没有显示(fadeIn)的这个,时间段;

      高度height:auto;它的值会变为0;

      解决问题:

      知道原因了,于是有这样的一个解决办法;

      在页面加载完后,我先获取height:auto;的具体值,然后在把这个值附给height:auto;代码如下:

    $(function(){
    	var n=0
    	function nup(){
    		if(n<2){n=n+1}else{n=0}
    		$(".banner_width").css("height",$('.banner_width').height()
    +'px') //获取确定的高度,赋给div的height:auto;;
    		$(".banner_width img").hide()
    		$(".banner_width img").eq(n).fadeIn(500)
    		
    	}
    	var timer=setInterval(nup,5000)
    
    
    })
    

       这样就不会在有滚动条向上弹的现象了;

      

      

           

     

  • 相关阅读:
    oracle客户端plsql安装配置
    vue基础-vue-cli(vue脚手架
    ES5、6、7浅析
    webservice的使用
    使用intellj idea的hibernate生成注解实体类
    spring源码分析
    Total Eclipse(并查集)
    《大道至简》读后感
    2020年8月3日Java学习日记
    2020年8月2日Java学习日记
  • 原文地址:https://www.cnblogs.com/z-sheng/p/4272079.html
Copyright © 2011-2022 走看看