css3与jquery实现轮播图的两种方法

最新推荐文章于 2024-08-12 09:24:46 发布
最新推荐文章于 2024-08-12 09:24:46 发布
阅读量92 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/yuyingTechBlog/p/6676759.html
版权

   最近整理了轮播图，开了博客一直也不知道写点什么，就想先整点简单的吧~

   css3：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3轮播图</title>
    <style type="text/css">
    *{
        padding: 0;
        margin:0;
    }
    .wrapper{
        perspective:600px;
        /*overflow: hidden;*/
    }
    .content{
        transform-style:preserve-3d;
        width: 100px;
        height: 100px;
        position: relative;
        margin: 100px auto;
        transform-origin:center;
        animation:move 14s linear forwards infinite;
    }
    @keyframes move{
        0%,8%{
            transform:rotateY(0deg);
        }
        11%,19%{
            transform:rotateY(40deg);
        }
        22%,30%{
            transform:rotateY(80deg);
        }
        33%,41%{
            transform:rotateY(120deg);
        }
        44%,52%{
            transform:rotateY(160deg);
        }
        55%,63%{
            transform:rotateY(200deg);
        }
        66%,74%{
            transform:rotateY(240deg);
        }
        77%,85%{
            transform:rotateY(280deg);
        }
        88%,100%{
            transform:rotateY(320deg);
        }
    }
    .item{
        position: absolute;
        width: 150px;
        height: 100px;
    }
    .item img{
        width: 100%;
        height: 100%;
    }
    .item:nth-child(1){
        transform:rotateY(0deg) translateZ(195.8px);
    }
    .item:nth-child(2){
        transform:rotateY(40deg) translateZ(195px);
    }
    .item:nth-child(3){
        transform:rotateY(80deg) translateZ(195px);
    }
    .item:nth-child(4){
        transform:rotateY(120deg) translateZ(195px);
    }
    .item:nth-child(5){
        transform:rotateY(160deg) translateZ(195px);
    }
    .item:nth-child(6){
        transform:rotateY(200deg) translateZ(195px);
    }
     .item:nth-child(7){
        transform:rotateY(240deg) translateZ(195px);
    }
    .item:nth-child(8){
        transform:rotateY(280deg) translateZ(195px);
    }
    .item:nth-child(9){
        transform:rotateY(320deg) translateZ(195px);
    }

    </style>
</head>
<body>
    <div class="wrapper">
        <div class="content">
            <div class="item"><img src="1.jpg" alt=""></div>
            <div class="item"><img src="2.jpg" alt=""></div>
            <div class="item"><img src="3.jpg" alt=""></div>
            <div class="item"><img src="4.jpg" alt=""></div>
            <div class="item"><img src="5.jpg" alt=""></div>
            <div class="item"><img src="6.jpg" alt=""></div>
            <div class="item"><img src="7.jpg" alt=""></div>
            <div class="item"><img src="8.jpg" alt=""></div>
            <div class="item"><img src="9.jpg" alt=""></div>
        </div>
    </div>
    <script type="text/javascript" src = "jquery.js"></script>
    <script type="text/javascript">
   $('.content').on('mouseenter',function() {
         $('.content').css({'animation-play-state':'paused'})
   })
    $('.content').on('mouseleave',function() {
         $('.content').css({'animation-play-state':'running'})
   })


    </script>
</body>
</html>

jquery实现：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
  *{
    padding: 0;
    margin: 0;
  }
  .wrapper{
    position: relative;
    width: 600px;
    height: 250px;
    /*margin-left: -300px;
    left: 50%;
    top: 20%;*/
    border:1px solid black;
    overflow: hidden;
  }
  .item{
    position: absolute;
    width: 200px;
    height: 150px;
    float: left;
    /*top: 50%;*/
  }
  .item img{
    width: 100%;
    height: 100%;
  }
  </style>
<body>
 <div class="wrapper">
        <div class="content">
            <div class="item"><img src="1.jpg" alt=""></div>
            <div class="item"><img src="2.jpg" alt=""></div>
            <div class="item"><img src="3.jpg" alt=""></div>
            <div class="item"><img src="4.jpg" alt=""></div>
            <div class="item"><img src="5.jpg" alt=""></div>
            <div class="item"><img src="6.jpg" alt=""></div>
            <div class="item"><img src="7.jpg" alt=""></div>
            <div class="item"><img src="8.jpg" alt=""></div>
            <div class="item"><img src="9.jpg" alt=""></div>
        </div>
    </div>


 <script type="text/javascript" src = "jquery.js"></script>
 <script type="text/javascript">
 var $Div = $(".wrapper .item");
 var index = 0;
 var timer = null;

 function init() {
   $Div.css({"left":"600px","top":"30%","height":"0px","z-index":"1"});

   $Div.eq(0).css({"left":"0","width":"200px","top":"50%","height":"150px","margin-top":"-75px","opacity":"0.5"});
   $Div.eq(1).css({"left":"100px","width":"400px","top":"0","height":"250px","margin-top":"0","opacity":"1","z-index":"100"});
   $Div.eq(2).css({"left":"400px","width":"200px","top":"50%","height":"150px","margin-top":"-75px","opacity":"0.5"});
}
 function leftMove() {
   $Div.css({"z-index":"1"});

   $Div.eq(index % 9).animate({"left":"-200px","width":"200px","top":"50%","height":"150px","margin-top":"-75px","opacity":"0.5"});
  //  console.log(1)
   $Div.eq((index + 1) % 9).animate({"left":"0","width":"200px","top":"50%","height":"150px","margin-top":"-75px","opacity":"0.5"});
  //  console.log(2)
   $Div.eq((index + 2) % 9).animate({"left":"100px","width":"400px","top":"0","height":"250px","margin-top":"0","opacity":"1","z-index":"100"});
  //  console.log(3)
   $Div.eq((index + 3) % 9).css("left","600px");
  //  console.log(4)
   $Div.eq((index + 3) % 9).animate({"left":"400px","width":"200px","top":"50%","height":"150px","margin-top":"-75px","opacity":"0.5"},function() {
          index++
   });
 }
timer = setInterval(leftMove,600);
init();

 </script>
</body>
</html>

有不正确的地方欢迎看到的人帮我指出，我是一个新人，请大家多多指教~~

转载于:https://www.cnblogs.com/yuyingTechBlog/p/6676759.html

dieqian3163
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3+jQuery实现3D轮播图
lgdshr123的博客
11-14 3493
1、HTML和css代码部分 script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript">script> style> *{margin:0; padding:0; list-style:none;} .wrap{width: 600px;height: 300px
jQuery+CSS3实现图片的无缝轮播
u012983064的博客
04-20 2127
今天萌生了一个写博客的想法，主要是想对一段时间所学的东西进行总结，加深印象，也方便自己日后查看。。。。    在实现前要弄明白的知识点：    一、Css的一些属性       1. position属性：           static：           relative：           absolute：           fixed：       2
jQuery+css3 两种动画切图效果的图片轮播
ICode联盟
12-17 127
下载地址 dd:
图片轮播前端实现的三种方式（jquery插件）
08-29
实现图片轮播的三种方式，能够对图片的轮播进行切换，三种方式都是通过使用jquery插件，比较简单方便，有参考的事例
css3轮播不用jpuery_Jquery+css实现图片无缝滚动轮播
weixin_39840616的博客
12-23 96
Today，在XX学院的教学视频中，偶尔看到了Jquery+css实现图片无缝滚动轮播视频教程，虽然以前已写过类似的，但是我感觉他学的比较精简。为了方便以后做项目时直接拷贝，特地写出来，顺便和大家分享一下最终实现界面如下：页面加载时，自动轮播，轮播鼠标悬停在整个banner容器的时候，两边会显示向左，向右按钮，鼠标悬停在中下方索引圆圈的上面，自动跳转到相应的图片。banner容器里面包含了图片列表...
jquery+css3实现3D图片立体切换效果.zip
09-25
"jquery+css3实现3D图片立体切换效果.zip"是一个实例，它展示了如何利用jQuery库和CSS3的强大功能，创建出引人入胜的3D图片切换特效。这个压缩包包含了一个完整的实现方案，包括HTML结构、CSS样式以及JavaScript逻辑...
jquery+css实现简单的图片轮播效果
10-19
在网页设计中，图片轮播是一种常见的展示方式，用于在有限的空间内展示多张图片。本文将详细讲解如何使用jQuery和CSS实现一个简单的图片轮播效果。首先，我们需要理解基本的HTML结构、CSS样式和jQuery脚本的工作原理...
jquery+css实现动感的图片切换效果
11-24
在本文中，我们将探讨如何使用jQuery和CSS来创建一种动感的图片切换效果。这个效果能够为网站增添互动性和视觉吸引力，提升用户体验。首先，我们需要理解基本思路和涉及到的关键技术。 **1. 引入必要的库** 为了...
jQuery+CSS3图片自动翻转轮播切换特效.zip
09-22
《jQuery+CSS3图片自动翻转轮播切换特效解析与应用》 在现代网页设计中，动态、交互式的用户体验已经成为不可或缺的一部分。"jQuery+CSS3图片自动翻转轮播切换特效"是一个很好的例子，它结合了jQuery的强大功能和...
jQuery css3带爆炸动画图片切换代码
11-13
在这个特定的项目中，“jQuery css3带爆炸动画图片切换代码”是一个利用这两种技术实现的动态图片切换效果，它带给用户一种新颖且引人注目的视觉体验。 jQuery是一个流行的JavaScript库，它的主要优点是简化了DOM...
轮播图-(jQuery方法)
愤怒的菜鸟
10-28 994
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;notebook&amp;lt;/title&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt; &amp;lt;st
css3实现无缝滚动的轮播图
rufeike的博客
10-22 4238
css3实现无缝滚动的轮播图 效果图 css3动画知识应用 指定动画名称：animation-name: moveTest; 定义动画 @keyframes moveTest { 0% { transform: translate(100px); } 50% { ...
CSS3实现过渡效果 (transition)
热门推荐
actorWen的博客
12-14 4万+
CSS3中新增的transform属性，可以实现元素在变换过程中的过渡效果，实现了基本的 动画。
HTML+CSS+JQ实现图片轮播效果
潜心修炼
08-05 2万+
焦点图广泛运用于主页的醒目位置放置广告，简单好用，加上效果也很好看。 实现的效果： 5张图片每两秒轮播一次，右下角的数字随图片而变换，鼠标放在数字上图片停止，移走鼠标继续播放。 实现步骤： 1.HTML部分 加入一个div，用来放置图片资源和数字编号。 采用ul-li布局，代码如下：
(.*?)正则表达式 效率问题
weixin_40809627的博客
05-14 943
应用 MapReduce 正则匹配出自己要的字段 问题：正则配置后效率太慢影响其相应mr执行 旧正则表达式 修改后的正则表达式 效率提升很多。程序执行时间降低了很高 ...
Arco Design for Vue 3 - 快速上手指南与实战技巧
qq_42072014的博客
08-11 463
如果你在使用 TypeScript 时遇到了类型定义问题，确保你安装了正确的类型包，并且版本与 Arco Design 的版本相匹配。Arco Design for Vue 3 是一个非常强大的 UI 框架，它不仅提供了丰富的组件和功能，还有完善的文档和支持。通过本文，你已经掌握了如何快速上手 Arco Design，并学会了一些实用的技巧来提升你的开发效率。希望这些经验能帮助你在 Vue 3 的开发过程中更进一步！
05_ Electron 自定义菜单、主进程与渲染进程通信
所学所思
08-09 607
单独写在一个 js 文件中，然后再在主进程中引入labe: "文件",submenu: [label: "新建文件",},label: "编辑",submenu: [label: "复制",},submenu: [// main.js// 1、引入初始化remote 模块width:800,})// __dirname 表示获取我们当前目录， path.join 会将两个参数合并成 d://electrondemo/index.html// 打开调试模式。
Electron学习与总结
最新发布
song854601134的博客
08-12 120
组成，‌其中Chromium负责渲染和显示Web页面，‌而Node.js则提供了主进程的功能，‌包括管理应用程序的生命周期、‌创建和控制浏览器窗口以及与操作系统交互。，‌Electron使得开发者能够保持JavaScript代码库的一致性，‌从而轻松地创建跨平台的应用程序，‌而无需具备本地开发经验。Electron的核心是由。
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
水w的博客
08-07 314
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
使用jQuery实现动态轮播图效果
5. 平滑过渡：通过CSS3的transition属性和jQuery的动画方法实现平滑的图片切换效果。 通过这些功能，jQuery可以轻松地实现轮播图的各种交互效果，使得页面更加生动和专业。在实际项目中，开发者可能还会添加触屏...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值