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图片动起来;

  最近的一个项目中要做 width: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)

})

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

  

  

      

时间: 2024-10-31 05:01:49

jquery自适应宽度轮播图的相关文章

jQuery淡入淡出轮播图实现

大家好我是QD小白,这是人生第一次写博客,准备写的内容是Jquery淡入淡出轮播图实现,在此之前学习JS写的轮播图效果都感觉不怎么好,学习了jQuery里的淡入淡出效果后又写了一次轮播图效果明显感觉好了许多.现在我就来分享下自己写轮播图的思路和方法. HTML部分: <div id="img-box" style="width:700px; height:350px;"> <img style="opacity: 1;" wid

Jquery淡入淡出轮播图

Jquery淡入淡出轮播图 因为代码不多所以我就写一个html文件里了 html代码 <div class="banner"> <ul> <li><a href="javascript:;"><img src="./1 (1).png" /></a></li> <li><a href="javascript:;"><

jquery简单无缝轮播图实现

此简单轮播图布局原理是: 一个div包含图片列表,和控制按钮.其宽度等于图片的宽度,溢出隐藏. 图片要左浮动. jquery原理: 开一个定时器,隔一段时间执行图片列表向左移动一个图片的宽度,同时在移动时设置一个回调函数. 把向左移动的图片,也是图片列表的第一张图片,添加到图片列表ul的末尾. 这样实现了,图片自动播放的效果. 怎么带动图片控制的小按钮变亮? 因为每一次图片轮播,都会改变图片值得索引,那就给函数加一个变量 i ,每一次执行定时器都会i++: var spanindex=i%4;

基于Jquery实现的轮播图

前阵子我用js写了一个轮播图,现在的话换成jQuery来实现,先看看效果图 首先是html结构,如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jquery版图片轮播</title> <link rel="stylesheet" href="css/index.css" /> &l

jQuery实现简易轮播图的效果

(图片素材取自于小米官网) 刚开始接触jQuery的学习,个人觉得如果为了实现多数的动态效果,jQuery的确很简易方便. 下面简易的轮播图效果,还请前辈多多指教~ (努力学习react vue angular中,加油~~~) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> &

用jQuery写的轮播图

效果图: 与前一篇写的轮播图实现的效果一致,这个是用jQuery写的,相对简单一点的吧. 这个是js代码,我先粘上去. <script src="../jquery-3.3.1.min.js"></script> <script> var index = 1; var newLeft = 0; var interval; var buttSpan = $(".butt").children(); function nextPage

用 jQuery 手写轮播图

先上个效果截图: 主要包含以下功能点: * 1.页面加载完,自动循环翻页* 2.翻页按钮,翻页* 3.定点翻页* 4.翻页时同步圆点状态* 5.鼠标进入,停止自动翻页* 6.快速点击翻页的bug(加 isPaging 标志) 主要包含以下功能点: * 1.页面加载完,自动循环翻页* 2.翻页按钮,翻页* 3.定点翻页* 4.翻页时同步圆点状态* 5.鼠标进入,停止自动翻页* 6.快速点击翻页的bug(加 isPaging 标志) 上代码: <!DOCTYPE html> <html>

写jquery插件【轮播图】历程

轮播图插件的任务已经接近尾声,在书写轮播图期间确实有一些小的感触的.感兴趣的可以访问我的轮播图的线上地址:轮播图 首先,轮播图插件其实并不是我第一次写,之前也写过,不过那时候是按照别人的思路写下来的,算起来大概有一年了,这次又一次开始轮播图是因为拜读了<单页面Web应用 JavaScript从前端到后端>的这本书的1-4章,我开始跃跃欲试的想把它用到自己的代码中,书本中前四章的思想是将js模块化,我就跟着作者的代码思路以及代码习惯先尝试着做了个轮播图,发现作者的模块化思想非常好,时间长了,养成

jQuery封装的轮播图组件(按需加载)

效果图 slider.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>slider</title> <link rel="stylesheet" href="../css/base.css"> <link rel="styles