html5+css如何实现中间大两头小的轮播效果


Posted in HTML / CSS onDecember 06, 2018

国际惯例,先上效果

html5+css如何实现中间大两头小的轮播效果

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

css:

<style>

   *{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%;
    }
</style>

html:

<div class="wrap">

    <div class="container">
        <ul class="box">
            <li class="video1">
                <video></video>
                <div><img src="3.jpg" alt="">1</div>
            </li>
            <li class="video2">
                <video></video>
                <div><img src="3.jpg" alt="">2</div>
            </li>
            <li class="video3">
                <video></video>
                <div><img src="3.jpg" alt="">3</div>
            </li>
            <li class="video4">
                <video></video>
                <div><img src="3.jpg" alt="">4</div>
            </li>
        </ul>
        <button onclick="moveRight()" class="goLeft btn">左</button> 
        <button onclick="moveLeft()" class="goRight btn">右</button>
    </div>
    <div class="ddd">
        <div class="dd-2"><div class="aa">aaa</div><div class="bb">vvvv</div></div>
    </div>
</div>

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 / CSS 相关文章推荐
HTML+CSS3 模仿Windows7 桌面效果
Jun 17 HTML / CSS
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
Mar 31 HTML / CSS
CSS图片翻转动画技术详解(IE也实现了)
Apr 03 HTML / CSS
CSS3 @font-face属性使用指南
Dec 12 HTML / CSS
使用CSS3来制作消息提醒框
Jul 12 HTML / CSS
实例讲解HTML5的meta标签的一些应用
Dec 08 HTML / CSS
简单整理HTML5的基本特性和语法
Feb 18 HTML / CSS
详解canvas绘图时遇到的跨域问题
Mar 22 HTML / CSS
Canvas环形饼图与手势控制的实现代码
Nov 08 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
Apr 26 HTML / CSS
用position:sticky完美解决小程序吸顶问题的实现方法
Apr 24 HTML / CSS
CSS中实现动画效果-附案例
Feb 28 HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
Dec 06 #HTML / CSS
canvas压缩图片以及卡片制作的方法示例
Dec 04 #HTML / CSS
canvas探照灯效果的示例代码
Nov 30 #HTML / CSS
localStorage的过期时间设置的方法详解
Nov 26 #HTML / CSS
canvas拼图功能实现代码示例
Nov 21 #HTML / CSS
详解Canvas 跨域脱坑实践
Nov 07 #HTML / CSS
浅谈移动端网页图片预加载方案
Nov 05 #HTML / CSS
You might like
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
php通过session防url攻击方法
2014/12/10 PHP
utf-8编码引起js输出中文乱码的解决办法
2010/06/23 Javascript
javascript 伪数组实现方法
2010/10/11 Javascript
jquery键盘事件使用介绍
2011/11/01 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
2012/01/13 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
2015/02/03 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
2015/12/18 Javascript
jQuery基于muipicker实现仿ios时间选择
2016/02/22 Javascript
原生js代码实现图片放大境效果
2016/10/30 Javascript
JS克隆,属性,数组,对象,函数实例分析
2016/11/26 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
2019/09/01 Javascript
javascript执行上下文、变量对象实例分析
2020/04/25 Javascript
小程序选项卡以及swiper套用(跨页面)
2020/06/19 Javascript
JavaScript实现多文件下载方法解析
2020/08/07 Javascript
node.js如何根据URL返回指定的图片详解
2020/10/21 Javascript
[03:14]2014DOTA2西雅图国际邀请赛 EG战队巡礼
2014/07/07 DOTA
Python实现复杂对象转JSON的方法示例
2017/06/22 Python
Python栈算法的实现与简单应用示例
2017/11/01 Python
python中的常量和变量代码详解
2018/07/25 Python
Python3匿名函数用法示例
2018/07/25 Python
Tesserocr库的正确安装方式
2018/10/19 Python
Python面向对象进阶学习
2019/05/21 Python
pycharm配置git(图文教程)
2019/08/16 Python
python脚本监控logstash进程并邮件告警实例
2020/04/28 Python
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
Luxplus丹麦:香水和个人护理折扣
2018/04/23 全球购物
ALDO美国官网:加拿大女鞋品牌
2018/12/28 全球购物
2014年教师节讲话稿5篇
2014/09/10 职场文书
党的群众路线教育实践活动查摆剖析材料
2014/10/10 职场文书
公司租房协议书
2014/10/14 职场文书
辞职信怎么写
2015/02/27 职场文书
教你怎么用Python实现多路径迷宫
2021/04/29 Python
Dubbo+zookeeper搭配分布式服务的过程详解
2022/04/03 Java/Android
Windows 64位 安装 mysql 8.0.28 图文教程
2022/04/19 MySQL
Beekeeper Studio开源数据库管理工具比Navicat更炫酷
2022/06/21 数据库