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 相关文章推荐
button在IE6/7下的黑边去除方案
Dec 24 HTML / CSS
两种CSS3伪类选择器详细介绍
Dec 24 HTML / CSS
Canvas 文字碰撞检测并抽稀的方法
May 27 HTML / CSS
关于HTML5的安全问题开发人员需要牢记的
Jun 21 HTML / CSS
程序设计HTML5 Canvas API
Apr 08 HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
Apr 24 HTML / CSS
使用phonegap创建联系人的实现方法
Mar 30 HTML / CSS
html5使用canvas压缩图片的示例代码
Sep 11 HTML / CSS
html5 canvas实现给图片添加平铺水印
Aug 20 HTML / CSS
HTML5 canvas实现的静态循环滚动播放弹幕
Jan 05 HTML / CSS
CSS3 实现的图片悬停的切换按钮
Apr 13 HTML / CSS
CSS3实现列表无限滚动/轮播效果
Jun 23 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
解析CI的AJAX分页 另类实现方法
2013/06/27 PHP
php使用curl模拟登录后采集页面的例子
2013/11/04 PHP
php出现web系统多域名登录失败的解决方法
2014/09/30 PHP
php自动载入类用法实例分析
2016/06/24 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
在Javascript中定义对象类别
2006/12/22 Javascript
jquery的选择器的使用技巧之如何选择input框
2013/09/22 Javascript
jquery操作select详解(取值,设置选中)
2014/02/07 Javascript
jquery中each遍历对象和数组示例
2014/08/05 Javascript
javascript获取当前鼠标坐标的方法
2015/01/10 Javascript
JavaScript脚本判断蜘蛛来源的方法
2015/09/22 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
2016/11/09 Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
2016/12/20 Javascript
jQuery设计思想
2017/03/07 Javascript
详解vue过滤器在v2.0版本用法
2017/06/01 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
2019/02/08 Javascript
Vue Echarts实现可视化世界地图代码实例
2019/05/07 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
2019/06/04 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
2020/03/26 Javascript
vue+canvas实现移动端手写签名
2020/05/21 Javascript
Python3.x和Python2.x的区别介绍
2013/02/12 Python
介绍Python的@property装饰器的用法
2015/04/28 Python
win10环境下python3.5安装步骤图文教程
2017/02/03 Python
Python内置函数 next的具体使用方法
2017/11/24 Python
对python多线程中互斥锁Threading.Lock的简单应用详解
2019/01/11 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
python 数据生成excel导出(xlwt,wlsxwrite)代码实例
2019/08/23 Python
解决Python import docx出错DLL load failed的问题
2020/02/13 Python
pycharm中import呈现灰色原因的解决方法
2020/03/04 Python
Pycharm及python安装详细步骤及PyCharm配置整理(推荐)
2020/07/31 Python
python安装和pycharm环境搭建设置方法
2020/05/27 Python
python中turtle库的简单使用教程
2020/11/11 Python
Agoda西班牙:全球特价酒店预订
2017/06/03 全球购物
Shell如何接收变量输入
2016/08/06 面试题
工程项目经理岗位职责
2015/02/02 职场文书
项目负责人岗位职责
2015/02/15 职场文书