css3与jquery实现轮播图的两种方法
2020-07-14 05:29
429 查看
最近整理了轮播图,开了博客一直也不知道写点什么,就想先整点简单的吧~
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
相关文章推荐
- 黑马程序员_学习日记73_725ASP.NET(禁用Cookie、ASP.NET中的重要对象、JavaScript实现AJAX、两种Json格式的序列化方法、JQuery中实现ajax的五种方法)
- 两种方法基于jQuery实现IE浏览器兼容placeholder效果
- jquery如何改变html标签的样式(两种实现方法)
- 基于jQuery实现图片推拉门动画效果的两种方法
- 两种方法基于jQuery实现IE浏览器兼容placeholder效果
- jQuery实现选项卡功能(两种方法)
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
- 使vue实现jQuery调用的两种方法
- 基于jquery实现导航菜单高亮显示(两种方法)
- jquery实现全选、不选、反选的两种方法
- 如何使用JQuery和HTML5 Canvas两种方法实现弹幕效果:
- 分别用CSS3和js两种方法实现图片切换
- 网站图片轮播的使用方法,使用Jquery实现
- 用JQuery实现全选与取消的两种简单方法
- jQuery之浮动窗口实现代码(两种方法)
- jQuery&HTML&CSS3实现垂直手风琴折叠菜单方法讲解
- 两种方法使用jquery实现左右移动效果(包含each遍历方式)
- jquery实现两种轮播效果
- 暂停和播放CSS3动画的两种实现方法
- 基于jquery实现导航菜单高亮显示(两种方法)