html自动轮播中间放大,html5+css如何实现中间大两头小的轮播效果
国际惯例,先上效果
好了,话不多说,上去就是一顿撸。
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:
- 1
- 2
- 3
- 4
左
右
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('视频主题')
});
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
html自动轮播中间放大,html5+css如何实现中间大两头小的轮播效果相关推荐
- android 轮播 中间变大,如何实现中间大两头小的轮播效果
国际惯例,先上效果 好了,话不多说,上去就是一顿撸. css: *{margin: 0;padding: 0} .wrap{ } .container{ width: 100%; overflow: ...
- 如何实现中间大两头小的轮播效果
国际惯例,先上效果 好了,话不多说,上去就是一顿撸. css: <style> *{margin: 0;padding: 0}.wrap{}.container{width: 100%;o ...
- html中间大两边小轮播代码,vue使用swiper实现中间大两边小的轮播图效果
项目中使用的vue,刚好有需求要实现轮播图,突出显示当前图片,两边展示其他图片:通过查各种资料,实现了,故在此记录下来 下面我们来看下实现步骤: 第一步:首先在项目index.html中引入swipe ...
- ios中间大,两边小的轮播图
首先上图 , 中间大,两边小的轮播图 ,git地址 : https://github.com/guochaoshun/LunBoTu 主要参考代码 : https://github.com/orzzh ...
- 微信小程序---轮播图
0. 微信小程序轮播图的实现 a. 是利用了swiper组件滑块视图容器 b. swiper的文档 文档https://developers.weixin.qq.com/miniprogram/dev ...
- 微信小程序--轮播图
微信小程序轮播图的实现是利用了swiper组件(滑块视图容器). 主要参数如下: 属性名 类型 默认值 说明 indicator-dots Boolean false 是否显示面板指示点 indica ...
- 五分钟掌握微信小程序轮播图
微信小程序轮播图实现,比Android 轮播图来说,显得轻松多了. 微信小程序提供swiper组件,官网api提供的swiper滑块视图容器. 属性名 类型 默认值 说明 autoplay Boole ...
- 微信小程序轮播图渲染(示例)
第一步:utlis下创建的api.js写上封装 const GET = 'GET'; const POST = 'POST';const baseURL = 'https://www.zzgoodqc ...
- 微信小程序 轮播图代码
微信小程序轮播图的代码如下: 首先,在小程序的 wxml 文件中,添加如下代码: <!-- 轮播图组件 --> <swiper class="swiper" in ...
最新文章
- 为什么NLP相对来说这么困难?
- 中国云计算厂商营收排名:阿里云完虐微软
- 特征工程-统计数据特征
- 催收成本在单体经济中的分析
- 1线程同步:互斥量,死锁
- 百练4103:踩方格
- android NDk编程
- NIOS生成Nios libaray
- 暑期训练日志----2018.8.3
- 挨踢部落故事汇(6):女攻城狮职位晋升记
- nginx 根据目录指定root_CentOS(7.6)基本操作与Nginx配置
- [C++]C++连接MySQL,封装为class(兼容x86和x64)
- Linux笔记--Linux进程通信
- spring cloud微服务分布式云架构简介
- 图像分割评估指标——表面距离计算库
- 2021年电子签名政策汇总 行业研究数据公布
- 【经验总结】word2010没有“标题2、标题3”样式的解决办法
- 基于微信电影播放小程序系统设计与实现 开题报告
- 1650显卡学计算机,1650ti显卡属于什么档次?
- 图解图论介绍及应用(1):哥尼斯堡七桥