html轮播图小屏不居中显示,如何实现不同尺寸通屏轮播图的居中显示？

冷不防 2022-10-09 04:58 159阅读 0赞

网页制作过程中少不了轮播图的使用，为了使banner图在不同分辨率的屏幕上都能通屏显示，我们会把banner图做成2000像素的宽度。

一般将banner写成如下结构：

*  ![banner1.jpg][]
 *  ![banner2.jpg][banner1.jpg]
 *  ![banner3.jpg][banner1.jpg]

为了让banner图左右居中显示，我们可以给

那么，为了解决这种情况的发生，我们采用另一种更为合适的方法。这需要将banner写成如下结构：

利用背景图的方式将图片嵌入，通过设置背景图片居中就可以简单解决，同时需要注意的是必须给包含该背景属性的

加宽高属性，否则背景图片将无法正常显示。给上述

.banner\{ height:490px;\}

.banner li\{ height:490px; width:100%; position:absolute; top:223px;\}

.banner .ctrl\{ position:absolute; top:690px; left:50%;\}

.banner .ctrl p\{ width:8px; height:8px; border-radius:50%; border:1px solid black; float:left; margin-right:7px;\}

.banner .ctrl .cur\{ width:10px; height:10px; border:none; background-color:\#00ad3e;\}

以上样式属性的高度值、定位中的top值、控制按钮的样式等可根据实际情况自行修改。另外，我们要引入一个在线的开放的js函数库开做切换效果，引入语句如下：

要真正实现轮播效果，还需要以下语句：

$(".banner li").hide().first().show();

$(".banner .ctrl p").first().addClass("cur");

var n=0; //存储轮播图的索引值

function change()\{ //定义循环播放的函数

n++;

if(n>3) n=0; //当图片显示到最后一张时，从头开始

$(".banner li").fadeOut(1000).eq(n).fadeIn(1000);//当前要显示的图片渐显，其他图片渐隐

$(".banner .ctrl p").removeClass("cur").eq(n).addClass("cur"); //当前控制块高亮，其他控制块复原

\}

var timer=setInterval(change,5000); //设置图片切换速度为每5秒切换一次

$(".banner .ctrl p").mouseenter( //定义鼠标移入控制块进行的操作

function()\{

n=$(this).index();

clearInterval(timer); //清除定时

$(this).addClass("cur").siblings().removeClass("cur"); //当前控制块高亮，其他控制块复原

$(".banner li").fadeOut(1000).eq(n).fadeIn(1000);

\}

).mouseleave( //定义鼠标移出控制块进行的操作

function()\{

timer=setInterval(change,5000); //开启定时

\}

);

[banner1.jpg]:

发表评论取消回复

表情：

评论列表（有 0 条评论，159人围观）

还没有评论，来说两句吧...

相关阅读

相关 WPF实现轮播图（图片、视屏）

1、WPF技术实现图片轮播2、WPF技术实现视屏轮播3、WPF技术实现图片视屏组合轮播

浅浅的花香味﹌/ 2024年04月20日 06:00/ 0 赞/ 53 阅读

相关 html轮播图

简介：本博客以最通俗移动的详细代码，告诉用户如何构建轮播图。第一步：搭建框架 <body>  <di

ゝ一世哀愁。/ 2024年04月01日 14:35/ 0 赞/ 119 阅读

相关 html vue轮播图,webpack+Vue实现轮播图

前言本来如果只是想做个轮播图的话不太需要这么麻烦的构建webpack项目，但是我的目的不是只做个轮播图这么简单，主要是想用webpack搭建一个vue项目，然后在里面实现了

迈不过友情╰/ 2022年10月19日 01:39/ 0 赞/ 261 阅读

相关 html轮播图怎么居中,html5+css如何实现中间大两头小的轮播效果

国际惯例，先上效果 ![21f9e081cd4b94f5363b7b82a3236042.png][] 好了，话不多说，上去就是一顿撸。 css: \\{margin:

向右看齐/ 2022年10月11日 13:39/ 0 赞/ 124 阅读

相关轮播图实现html,html、css、js实现轮播图

2017-03-13 今天把轮播图的知识1过了一下，写了一个比较简单的轮播图，给大家参考一下。查看具体的效果点击这个链接： http://gjhnstxu.me/%E8

落日映苍穹つ/ 2022年10月10日 09:46/ 0 赞/ 342 阅读

相关 html轮播图小屏不居中显示,如何实现不同尺寸通屏轮播图的居中显示？

网页制作过程中少不了轮播图的使用，为了使banner图在不同分辨率的屏幕上都能通屏显示，我们会把banner图做成2000像素的宽度。一般将banner写成如下结构：

冷不防/ 2022年10月09日 04:58/ 0 赞/ 160 阅读

相关 html按钮轮播图,四种方式实现轮播图

不论是app，还是网站，基本上都会出现轮播图，今天和大家分享几种不同工具实现轮播图的几种方式。轮播图的基本样式和功能就不需要解释了，相信能根据题目选择看文章的话都知道啥是轮

喜欢ヅ旅行/ 2022年10月07日 07:57/ 0 赞/ 241 阅读

相关 html script轮播图,javascript简单轮播图

\\轮播图实现原理：通过多张图片平铺，用overflow:hidden只显示一张图片、其他的隐藏，无缝滚动用定时器改变元素的left值让图片呈现左右滚动的效果。\\![bV

ゞ浴缸里的玫瑰/ 2022年10月06日 13:57/ 0 赞/ 304 阅读

相关 html简单图片轮播居中,html简单图片轮播的实现

这里的图片轮播方法是我从网上参考的方法，只是自己做了一些改进先来贴一发代码 ![s1.jpg][] ![s2.jpg][] ![s3.jpg][] 在这个html的

蔚落/ 2022年10月06日 10:52/ 0 赞/ 428 阅读

相关全屏轮播宽度100%动态获取图片高度并居中显示

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQx

太过爱你忘了你带给我的痛/ 2021年07月24日 20:47/ 0 赞/ 268 阅读