H5C3结合JQuery实现的炫酷分裂式轮播图

最新推荐文章于 2024-06-26 20:04:17 发布
最新推荐文章于 2024-06-26 20:04:17 发布
阅读量288 收藏 1
点赞数
文章标签： javascript 前端 ViewUI
原文链接：http://www.cnblogs.com/langlangzhiwo/p/6955998.html
版权 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .container {
            width: 560px;
            height: 380px;
            margin: 100px auto;
            border: 1px solid #000;
            position: relative;
            display: flex;
        }
        .container a {
            text-decoration: none;
            position: absolute;
            width: 60px;
            height: 60px;
            line-height: 60px;
            font-weight:bold;">grey;
            color: white;
            text-align: center;
            font-size: 60px;
            top: 160px;
        }
        .before {
            left: -30px;
        }
        .after {
            right: -30px;
        }
        .items {
            list-style: none;
            padding: 0;
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            transition: all 1s;
        }
        .item {
            width: 100%;
            height: 100%;
            position: absolute;
        }
        .item:nth-child(1){
            background: url(img/02.jpg);
            transform: rotateX(0deg) translateZ(190px);
        }
        .item:nth-child(2){
            background: url(img/03_kis.jpg);
            transform: rotateX(180deg) translateZ(190px);
        }
        .item:nth-child(3){
            background: url(img/04.jpg);
            transform: rotateX(90deg) translateZ(190px);
        }
        .item:nth-child(4){
            background: url(img/04_kiss.jpg);
            transform: rotateX(-90deg) translateZ(190px);
        }
        .items:nth-child(2) .item {
            background-position: -140px 0px;
        }
        .items:nth-child(3) .item {
            background-position: -280px 0px;
        }
        .items:nth-child(4) .item {
            background-position: -420px 0px;
        }
    </style>
    <script src="js/jquery-3.0.0.min.js"></script>
    <script>
        var num =0;
        $(function(){
            $(".before").click(function(){
                num++;

                $(".items").each(function(index,element){
                    setTimeout(function(){
                        $(element).css({
                            transform: "rotateX("+num*90+"deg)"
                        })
                    },index*100)
                })

                })
            $(".after").click(function(){
                num--;

                $(".items").each(function(index,element){
                    setTimeout(function(){
                        $(element).css({
                            transform: "rotateX("+num*90+"deg)"
                        })
                    },index*100)
                })
            })
            })


    </script>
</head>
<body>
    <div class="container">
        <ul class="items">
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
        </ul>
        <ul class="items">
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
        </ul>
        <ul class="items">
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
        </ul>
        <ul class="items">
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
        </ul>
        <a href="javascript:void(0)" class="before">&lt;</a>
        <a href="javascript:void(0)" class="after">&gt;</a>
    </div>
</body>
</html>

转载于:https://www.cnblogs.com/langlangzhiwo/p/6955998.html

自我修炼的小石头
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
H5+C3+ajax+fullPage+jquery商城首页.zip
05-01
【标题】"H5+C3+ajax+fullPage+jquery商城首页.zip"是一个结合了多种技术的电商网站前端开发资源包。它包含了HTML5、C3图表库、Ajax、fullPage.js以及jQuery，用于创建一个动态且交互性强的商城首页。 【HTML5】是...
H5+C3实现超炫酷图品切换效果
weixin_58459702的博客
07-25 761
H5+C3实现超炫酷图品切换效果
图片动画效果html5,8个实用炫酷的HTML5图片动画应用
weixin_39610422的博客
06-03 517
原标题：8个实用炫酷的HTML5图片动画应用近期我们发布了不少关于HTML5和jQuery的图片动画应用，很多都比较实用，也有一些效果非常炫酷，比如一些HTML5 3D图片动画特效。本文精选了8个实用而且炫酷的HTML5图片动画应用，希望你会喜欢。1、CSS3/jQuery实现移动端滑动图片层叠效果这是一款基于jQuery和CSS3的图片层叠插件，这和我们之前介绍的CSS3图片层叠展开特效有点不同...
HTML+CSS动画打造酷炫轮播图！（含源码）
最新发布
我们好像在哪见过
06-26 204
🌟如何让内容呈现更加吸引人成为设计师和开发者的挑战。大气实用的HTML5/CSS动画轮播图提供了一种解决方案，它结合了视觉美感和动态效果，使得信息展示不仅大气而且具有高度的实用性。本文将探讨如何利用HTML5和CSS的动画特性，设计出既美观又功能丰富的轮播图，提升用户体验。
WEB前端开发：轮播图的实现（H5+C3+JavaScript）(JQuery)
热门推荐
嘻嘻的博客
11-11 6万+
一、轮播图的概念 轮播图就是一种网站在介绍自己的主打产品或重要信息的传播方式。说的简单点就是将承载着重要信息的几张图片，在网页的某一部位进行轮流的呈现，从而做到让浏览者很快的了解到网站想要表达的主要信息。例如：淘宝，京东，等大型的购物平台。以及各种新闻网站的头版头条都是用这种方式呈现的重要信息。 二、轮播图的设计思想 轮播图的实现方式：例如：有5张轮播的图片，每张图片的宽度为...
html5内容分列,Html5+CSS3基础知识汇总-CSS3篇
weixin_42506994的博客
06-05 296
CSS选择器：使用CSS对html页面中的元素实现一对一，一对多或者多对一的控制：1.属性选择器在CSS3中追加了三个选择器:[att*=val];[att^=val];[att$=val]–>att表示为属性，val表示为属性的属性值。[att*=val]:如果元素用att表示的属性的值中包含val指定的字符，那么该元素使用这个样式。[att$=val]:如果元素用att表示的属性的属性值...
H5页面中的视频轮播（类似于banner轮播图效果）
calm微笑
05-12 2万+
先说下我的需求，如下图： 手机模型中间部分是视频播放，当一条视频播放完毕后，整屏会自动上滑切换到下一个视频。提起轮播，我们看到的最多的就是banner轮播图，而提起轮播图，我会马上想起用Swiper。 一开始为了快速开发，就想着用swiper来实现切换视频的轮播效果，但是尝试后发现两个严重的问题：
jquery 3D h5图片轮播效果
01-25
当我们谈论"jQuery 3D h5图片轮播效果"时，我们指的是利用jQuery库和HTML5技术实现的一种具有三维视觉效果的图片轮播组件。 首先，这种3D轮播效果通常会借助CSS3的3D转换功能，这允许我们在不使用插件的情况下，在...
H5+CSS3+移动端，文章页面+轮播图+响应式
07-12
本项目利用H5和CSS3技术，结合移动端特性，创建了一个包含文章页面、轮播图以及响应式设计的网页应用。 首先，HTML5是超文本标记语言的第五个版本，它引入了许多新的元素和API，旨在提高网页的语义性和可访问性。...
H5、jquery实现无缝滚动加载下一页+瀑布流布局
05-19
商品图片不固定高度，...使用masonry实现瀑布流布局展示，搭配imagesloaded保证图片加载完成后再进行瀑布流展示； 使用dropload实现H5界面无缝滚动加载下一页； H5运行在以上终端（微信、安卓、IOS内嵌H5）都可以生效
H5 jQuery响应式导航菜单代码.zip
07-11
js代码 [removed][removed] [removed] $(document).click(function(){ ... $('.nav-list').removeClass('... 这是一款同时兼容电脑端跟手机端的jQuery Sass响应式导航菜单代码，随屏幕宽度变化而自适应显示。
h5炫酷登录页面
07-04
炫酷的h5登录页面，不要积分就可免费下载，若有版权冲突请联系我
css+jquery实现简单轮播图效果html代码
04-16
css+jquery实现最简单轮播图效果html代码
JQ H5轮播图
04-27
NULL 博文链接：https://onestopweb.iteye.com/blog/2378847
图片轮播前端实现的三种方式（jquery插件）
08-29
实现图片轮播的三种方式，能够对图片的轮播进行切换，三种方式都是通过使用jquery插件，比较简单方便，有参考的事例
h5c3动画例子
01-02
使用html5+css3完成的网页设计作品
15个超强的jQuery/HTML5图片轮播插件
tthappyer的博客
09-18 3277
最近我们为大家分享过不少基于jQuery的图片轮播插件，当然也有很多使用了HTML5和CSS3的相关技术，让整个图片播放器显得更加美观，动画效果显得更加炫酷。这次我们特意为大家筛选了一些最新的jQuery/HTML5图片轮播插件，每一个的功能都比较强大，当然可能不是每一个都适合你，但你也可以从中学到不少用jQuery和HTML5编写图片轮播插件的知识。下面我们一起来看看这15个强大的图片播放器吧。...
H5页面（五）效果轮播图之-------swiper.js插件
斗师——Ace
08-02 5330
添加小程序，兑换各种视频教程/数据资源。 swiper是一款轻量级移动设备滑块的js框架！ swiper 3.x主流偏向移动设备！ 注意：npm install --save swiper;需要以下方式引入： 第一步：import Swiper from "swiper" 第二步：import 'swiper/dist/css/swiper.css' //因为npm打包的sw...
h5轮播图代码
胡杰的专栏
10-16 1万+
下面是一个完整的h5轮播图html代码，复制后把图片改成自己的即可运行 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;h5轮播图demo&lt;/title&gt; &lt;script type="text/j
vue2 h5卡片式轮播图
05-20
可以使用vue-awesome-swiper插件实现卡片式轮播图。 首先安装插件： ``` npm install vue-awesome-swiper --save ``` 然后在需要使用轮播图的组件中引入插件并注册： ```javascript import VueAwesomeSwiper from 'vue-awesome-swiper'; import 'swiper/dist/css/swiper.css'; export default { components: { VueAwesomeSwiper, }, }; ``` 在模板中使用插件： ```html <template> <div class="swiper-container"> <vue-awesome-swiper :options="swiperOptions"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 4</div> <div class="swiper-slide">Slide 5</div> </div> </vue-awesome-swiper> </div> </template> ``` 其中，`swiper-container`为轮播图容器的样式，`swiper-wrapper`为轮播图内容的样式，`swiper-slide`为每个轮播项的样式。 可以通过swiperOptions配置选项来实现卡片式轮播图： ```javascript export default { data() { return { swiperOptions: { slidesPerView: 2, // 同时显示的数量 spaceBetween: 10, // 项之间的间距 centeredSlides: true, // 当前项居中显示 loop: true, // 循环播放 pagination: { el: '.swiper-pagination', // 分页器 clickable: true, // 是否支持点击分页器切换 }, }, }; }, }; ``` 这样就可以实现一个简单的卡片式轮播图了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值