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

向右看齐 2022-10-11 13:39 124阅读 0赞

国际惯例，先上效果

![21f9e081cd4b94f5363b7b82a3236042.png][]

好了，话不多说，上去就是一顿撸。

css:

\*\{margin: 0;padding: 0\}

.wrap\{

.container\{

width: 100%;

overflow: hidden;

/\* height: 400px; \*/

background: red;

position: relative;

.box\{width: 125%;

height: auto;

display: flex;

align-items: center;

position: relative;

left: 0;

.box li\{

width: 20%;

float: left;

list-style: none;

\-webkit-transition: width 0.5s, height 0.5s, margin 0.5s;

position: relative;

.box video \{

width: 100%;

height: 100%;

.box li div \{

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

.box li div img \{

width: 100%;

height: 100%;

/\* .box li:nth-child(2)\{

height: 360px;

margin: 0 1%;

\} \*/

.goLeft, .goRight \{

position: absolute;

width: 28px;

height: 52px;

top: 50%;

transform: translate(0,-50%);

cursor: pointer;

border: none;

outline: none;

line-height: 52px;

.goLeft \{

left: 20%;

.goRight \{

right: 20%;

.box li>p \{

margin: 0;

color: \#fff;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

text-align: center;

.box li>p>span \{

display: inline-block;

width: 100px;

height: 100px;

background: url(play.png);

.ddd\{

width: 100%;

height: 360px;

display: flex;

align-items: center;

position: relative;

.dd-2\{

width: 20%;

background: yellow;

.aa\{

width: 100%;

html:

*  ![Image 1][]1
 *  ![Image 1][]2
 *  ![Image 1][]3
 *  ![Image 1][]4

左

右

aaa

vvvv

js:

$(function()\{

$('.box>li:nth(1)').css(\{ width: '36%', margin: '0 2%' \})

$('.box>li:nth(1)').append('视频主题')

\})

$(window).resize(function () \{ //当浏览器大小变化时

$('.box').css('height', 'auto')

\})

function moveLeft()\{

var height = $('.box>li:nth(1)').height()

$('.box').css('height', height)

$('.box>li').css(\{ width: '20%', margin: '0 0%' \})

$('.box>li:nth(2)').css(\{ width: '36%', margin: '0 2%' \})

$('.box').animate(\{

left: '-25%'

\}, 400, function () \{

// 把第一个子元素移到最后，并且设置left=0

$(".box").append($('.box>li:nth(0)')\[0\]);

$(".dd-2").append($('.aa')\[0\]);

$(".aa").append('ccc');

$('.box').css('left', 0);

$(".btn").attr("disabled", false);

$('.box>li:nth(1)').append('视频主题')

\});

function moveRight()\{

$('.box>li').css(\{ width: '20%', margin: '0 0%' \})

$('.box>li:nth(0)').css(\{ width: '36%', margin: '0 2%' \})

var height = $('.box>li:nth(1)').height()

$('.box').css('height', height)

$(".box").prepend($('.box>li:nth(3)')\[0\]);

$('.box').css('left', '-20%');

$('.box').animate(\{

left: 0

\}, 400, function () \{

$(".btn").attr("disabled", false);

$('.box>li:nth(1)').append('视频主题')

\});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

[21f9e081cd4b94f5363b7b82a3236042.png]: /images/20221005/2cfda94cb0ef4ee082182f043440b0cc.png
[Image 1]:

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

发表评论取消回复

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

相关阅读

相关 HTML/CSS轮播图

相关 html图片轮播思路,css3如何实现轮播图？css3实现轮播图片的方法

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

相关 HTML实现jquery实现轮播图,jquery+css实现简单的图片轮播效果

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

相关 html的轮播点怎么设置,html轮播效果的实现

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

相关 html轮播图京东效果,JavaScript仿京东轮播图效果

相关 html中轮播图片js代码怎么写,js+html+css实现轮播图

相关自动轮播图html css js代码,js轮播(自动轮播图html代码)