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 相关文章推荐
css3图片边框border-image的用法
Jun 30 HTML / CSS
CSS3 选择器 基本选择器介绍
Jan 21 HTML / CSS
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
Apr 16 HTML / CSS
一款纯css3实现的非常实用的鼠标悬停特效演示
Nov 05 HTML / CSS
利用纯CSS3实现tab选项卡切换示例代码
Sep 21 HTML / CSS
详解基于 Canvas 手撸一个六边形能力图
Sep 02 HTML / CSS
HTML5 对各个标签的定义与规定:body的介绍
Jun 21 HTML / CSS
HTML5之SVG 2D入门4—笔画与填充
Jan 30 HTML / CSS
实例讲解HTML5的meta标签的一些应用
Dec 08 HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
Dec 15 HTML / CSS
html5通过postMessage进行跨域通信的方法
Dec 04 HTML / CSS
详解Canvas 跨域脱坑实践
Nov 07 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
一个没有MYSQL数据库支持的简易留言本的编写
2006/10/09 PHP
ThinkPHP中数据操作案例分析
2015/09/27 PHP
php版微信自动登录并获取昵称的方法
2016/09/23 PHP
thinkphp3.2框架中where条件查询用法总结
2019/08/13 PHP
JS 如何获取radio选中后的值及不选择取radio的值
2013/10/28 Javascript
JS过滤url参数特殊字符的实现方法
2013/12/24 Javascript
js数组依据下标删除元素
2015/04/14 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
2015/09/26 Javascript
js面向对象的写法
2016/02/19 Javascript
微信小程序 picker 组件详解及简单实例
2017/01/10 Javascript
web打印小结
2017/01/11 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
2017/05/18 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
2017/10/25 Javascript
教你如何用node连接redis的示例代码
2018/07/12 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
2018/08/13 Javascript
原生JS实现获取及修改CSS样式的方法
2018/09/04 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
2018/09/27 Javascript
Python Socket编程入门教程
2014/07/11 Python
python实现在windows下操作word的方法
2015/04/28 Python
python链接Oracle数据库的方法
2015/06/28 Python
Python利用Django如何写restful api接口详解
2018/06/08 Python
Python图像处理之简单画板实现方法示例
2018/08/30 Python
Python中的类与类型示例详解
2019/07/10 Python
python使用sessions模拟登录淘宝的方式
2019/08/16 Python
对Python中一维向量和一维向量转置相乘的方法详解
2019/08/26 Python
Python实现自动访问网页的例子
2020/02/21 Python
英国知名的护肤彩妆与时尚配饰大型综合零售电商:Unineed
2016/11/21 全球购物
介绍下WebSphere的安全性
2013/01/31 面试题
一套SQL笔试题
2016/08/14 面试题
How TDD works
2012/09/30 面试题
污水厂厂长岗位职责
2014/01/04 职场文书
国际商务专业职业生涯规划书范文
2014/01/17 职场文书
小学教师师德承诺书
2014/05/23 职场文书
优秀班集体事迹材料
2014/12/25 职场文书
2015年采购工作总结
2015/04/10 职场文书
mybatis 获取无数据的字段不显示的问题
2021/07/15 Java/Android