您的位置:首页 > Web前端 > JQuery

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

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐