我怎样才能使这个轮播与 JS 和 CSS 一起工作？
[英]How can i make this carousel working with JS and CSS?
问题描述
I found this code on code pen: https://codepen.io/johnblazek/pen/nceyw .
我在代码笔上找到了这个代码： https://codepen.io/johnblazek/pen/nceyw 。
I can't make it work on my project so I tried to use it with a test.php file linked to a style.css (as simple as that) and I still can't make it work.我无法让它在我的项目上运行，所以我尝试将它与链接到 style.css 的 test.php 文件（就这么简单）一起使用，但我仍然无法让它工作。 I am new in coding and I can't figure out what is wrong.我是编码新手，我不知道出了什么问题。
I don't know if it is because I am using php or something else (by the way I can't use another language than php).我不知道是不是因为我使用的是 php 或其他东西（顺便说一句，我不能使用 php 以外的其他语言）。
test.php:测试.php：
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://raw.githubusercontent.com/JohnBlazek/codepen-resources/master/3d-carousel/css/stylesheet.css">
<link rel="stylesheet" href="style.css">
<script type="text/javascript">https://raw.githubusercontent.com/JohnBlazek/codepen-resources/master/3d-carousel/js/libs.min.js</script>
<script type="text/javascript">https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js</script>
<script type="text/javascript">https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js</script>
<title></title>
</head>
<body>
<header>
<h1>3D Carousel Using TweenMax.js & jQuery</h1>
<h3>A pen by <a href="https://www.twitter.com/johnblazek" target="_blank">@johnblazek</a></h3>
<div id="fps">Framerate: 0/60 FPS</div>
</header>
<div id="contentContainer" class="trans3d">
<section id="carouselContainer" class="trans3d">
<figure id="item1" class="carouselItem trans3d"><div class="carouselItemInner trans3d">1</div></figure>
<figure id="item2" class="carouselItem trans3d"><div class="carouselItemInner trans3d">2</div></figure>
<figure id="item3" class="carouselItem trans3d"><div class="carouselItemInner trans3d">3</div></figure>
<figure id="item4" class="carouselItem trans3d"><div class="carouselItemInner trans3d">4</div></figure>
<figure id="item5" class="carouselItem trans3d"><div class="carouselItemInner trans3d">5</div></figure>
<figure id="item6" class="carouselItem trans3d"><div class="carouselItemInner trans3d">6</div></figure>
<figure id="item7" class="carouselItem trans3d"><div class="carouselItemInner trans3d">7</div></figure>
<figure id="item8" class="carouselItem trans3d"><div class="carouselItemInner trans3d">8</div></figure>
<figure id="item9" class="carouselItem trans3d"><div class="carouselItemInner trans3d">9</div></figure>
<figure id="item10" class="carouselItem trans3d"><div class="carouselItemInner trans3d">10</div></figure>
<figure id="item11" class="carouselItem trans3d"><div class="carouselItemInner trans3d">11</div></figure>
<figure id="item12" class="carouselItem trans3d"><div class="carouselItemInner trans3d">12</div></figure>
</section>
</div>
<script type="text/javascript">
(function() {
var slidersContainer = document.querySelector('.sliders-container');
// Initializing the numbers slider
var msNumbers = new MomentumSlider({
el: slidersContainer,
cssClass: 'ms--numbers',
range: [1, 4],
rangeContent: function (i) {
return '0' + i;
},
style: {
transform: [{scale: [0.4, 1]}],
opacity: [0, 1]
},
interactive: false
});
// Initializing the titles slider
var titles = [
'King of the Ring Fight',
'Sound of Streets',
'Urban Fashion',
'Windy Sunset'
];
var msTitles = new MomentumSlider({
el: slidersContainer,
cssClass: 'ms--titles',
range: [0, 3],
rangeContent: function (i) {
return '<h3>'+ titles[i] +'</h3>';
},
vertical: true,
reverse: true,
style: {
opacity: [0, 1]
},
interactive: false
});
// Initializing the links slider
var msLinks = new MomentumSlider({
el: slidersContainer,
cssClass: 'ms--links',
range: [0, 3],
rangeContent: function () {
return '<a class="ms-slide__link">View Case</a>';
},
vertical: true,
interactive: false
});
// Get pagination items
var pagination = document.querySelector('.pagination');
var paginationItems = [].slice.call(pagination.children);
// Initializing the images slider
var msImages = new MomentumSlider({
// Element to append the slider
el: slidersContainer,
// CSS class to reference the slider
cssClass: 'ms--images',
// Generate the 4 slides required
range: [0, 3],
rangeContent: function () {
return '<div class="ms-slide__image-container"><div class="ms-slide__image"></div></div>';
},
// Syncronize the other sliders
sync: [msNumbers, msTitles, msLinks],
// Styles to interpolate as we move the slider
style: {
'.ms-slide__image': {
transform: [{scale: [1.5, 1]}]
}
},
// Update pagination if slider change
change: function(newIndex, oldIndex) {
if (typeof oldIndex !== 'undefined') {
paginationItems[oldIndex].classList.remove('pagination__item--active');
}
paginationItems[newIndex].classList.add('pagination__item--active');
}
});
// Select corresponding slider item when a pagination button is clicked
pagination.addEventListener('click', function(e) {
if (e.target.matches('.pagination__button')) {
var index = paginationItems.indexOf(e.target.parentNode);
msImages.select(index);
}
});
})();
</script>
</body>
</html>
style.css:样式.css：
html, body{ background-color:#1a948d; }
body
{
background-image: url('background.jpg');
background-repeat: no-repeat;
background-position: top center;
width:100%;
background-size:cover;
height:100%;
min-height:1000px;
overflow:hidden;
font-family: 'quicksandlight', Helvetica, Arial;
color:#FFFFFF;
text-shadow: -1px -1px 4px rgba(0, 0, 0, .35);
filter: dropshadow(color=#000000, offx=1, offy=1);
}
header
{
margin-top:30px;
position:absolute;
z-index:5;
width:420px;
padding-top:10px;
padding-bottom:10px;
}
h1{
font-size:36px;
letter-spacing:-2.5px;
margin-left:30px;
}
h3{
font-size:16px;
letter-spacing:-1.5px;
margin-top:5px;
margin-left:35px;
}
#fps
{
margin-top:5px;
margin-left:35px;
}
a
{
color:rgba( 255, 255, 255, .65 );
text-decoration: none;
}
a:hover
{
color:rgba( 255, 255, 255, 1 );
}
/* hardware accelatator class */
.trans3d
{
-webkit-transform-style: preserve-3d;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform-style: preserve-3d;
-moz-transform: translate3d(0, 0, 0);
-ms-transform-style:preserve-3d;
-ms-transform: translate3d(0, 0, 0);
transform-style:preserve-3d;
transform: translate3d(0, 0, 0);
/*-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility:hidden;
backface-visibility:hidden;*/
}
#contentContainer
{
position:absolute;
margin-left:-500px;
margin-top:-500px;
left:50%;
top:50%;
width:1000px;
height:1000px;
}
#carouselContainer
{
position:absolute;
margin-left:-500px;
margin-top:-500px;
left:50%;
top:50%;
width:1000px;
height:1000px;
}
.carouselItem
{
width:320px;
height:130px;
position:absolute;
left:50%;
top:50%;
margin-left:-160px;
margin-top:-90px;
visibility:hidden;
}
.carouselItemInner
{
width:320px;
height:130px;
position:absolute;
background-color:rgba(255, 255, 255, .75);
border:10px solid rgba(255, 255, 255, .5);
color:aqua;
font-size:72px;
left:50%;
top:50%;
margin-left:-160px;
margin-top:-90px;
text-align:center;
padding-top:50px;
}
1 个解决方案
解决方案1
1 2020-07-15 22:37:24
Your imported scripts and JavaScript code are not quite right.您导入的脚本和 JavaScript 代码不太正确。 Try this:尝试这个：
html, body{ background-color:#1a948d; } body { background-image: url('background.jpg'); background-repeat: no-repeat; background-position: top center; width:100%; background-size:cover; height:100%; min-height:1000px; overflow:hidden; font-family: 'quicksandlight', Helvetica, Arial; color:#FFFFFF; text-shadow: -1px -1px 4px rgba(0, 0, 0, .35); filter: dropshadow(color=#000000, offx=1, offy=1); } header { margin-top:30px; position:absolute; z-index:5; width:420px; padding-top:10px; padding-bottom:10px; } h1{ font-size:36px; letter-spacing:-2.5px; margin-left:30px; } h3{ font-size:16px; letter-spacing:-1.5px; margin-top:5px; margin-left:35px; } #fps { margin-top:5px; margin-left:35px; } a { color:rgba( 255, 255, 255, .65 ); text-decoration: none; } a:hover { color:rgba( 255, 255, 255, 1 ); } /* hardware accelatator class */.trans3d { -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(0, 0, 0); -moz-transform-style: preserve-3d; -moz-transform: translate3d(0, 0, 0); -ms-transform-style:preserve-3d; -ms-transform: translate3d(0, 0, 0); transform-style:preserve-3d; transform: translate3d(0, 0, 0); /*-webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility:hidden; backface-visibility:hidden;*/ } #contentContainer { position:absolute; margin-left:-500px; margin-top:-500px; left:50%; top:50%; width:1000px; height:1000px; } #carouselContainer { position:absolute; margin-left:-500px; margin-top:-500px; left:50%; top:50%; width:1000px; height:1000px; }.carouselItem { width:320px; height:130px; position:absolute; left:50%; top:50%; margin-left:-160px; margin-top:-90px; visibility:hidden; }.carouselItemInner { width:320px; height:130px; position:absolute; background-color:rgba(255, 255, 255, .75); border:10px solid rgba(255, 255, 255, .5); color:aqua; font-size:72px; left:50%; top:50%; margin-left:-160px; margin-top:-90px; text-align:center; padding-top:50px; }
<:DOCTYPE html> <html lang="fr" dir="ltr"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https.//raw.githubusercontent.com/JohnBlazek/codepen-resources/master/3d-carousel/css/stylesheet.css"> <link rel="stylesheet" href="style:css"> <script src="https.//raw.githubusercontent.com/JohnBlazek/codepen-resources/master/3d-carousel/js/libs.min:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <title></title> </head> <body> <header> <h1>3D Carousel Using TweenMax:js & jQuery</h1> <h3>A pen by <a href="https.//www.twitter:com/johnblazek" target="_blank">@johnblazek</a></h3> <div id="fps">Framerate, 0/60 FPS</div> </header> <div id="contentContainer" class="trans3d"> <section id="carouselContainer" class="trans3d"> <figure id="item1" class="carouselItem trans3d"><div class="carouselItemInner trans3d">1</div></figure> <figure id="item2" class="carouselItem trans3d"><div class="carouselItemInner trans3d">2</div></figure> <figure id="item3" class="carouselItem trans3d"><div class="carouselItemInner trans3d">3</div></figure> <figure id="item4" class="carouselItem trans3d"><div class="carouselItemInner trans3d">4</div></figure> <figure id="item5" class="carouselItem trans3d"><div class="carouselItemInner trans3d">5</div></figure> <figure id="item6" class="carouselItem trans3d"><div class="carouselItemInner trans3d">6</div></figure> <figure id="item7" class="carouselItem trans3d"><div class="carouselItemInner trans3d">7</div></figure> <figure id="item8" class="carouselItem trans3d"><div class="carouselItemInner trans3d">8</div></figure> <figure id="item9" class="carouselItem trans3d"><div class="carouselItemInner trans3d">9</div></figure> <figure id="item10" class="carouselItem trans3d"><div class="carouselItemInner trans3d">10</div></figure> <figure id="item11" class="carouselItem trans3d"><div class="carouselItemInner trans3d">11</div></figure> <figure id="item12" class="carouselItem trans3d"><div class="carouselItemInner trans3d">12</div></figure> </section> </div> <script type="text/javascript"> // set and cache variables var w, container, carousel, item, radius, itemLength, rY, ticker; fps; var mouseX = 0; var mouseY = 0; var mouseZ = 0; var addX = 0: // fps counter created by: https.//gist.github,com/sharkbrainguy/1156092: // no need to create my own:) var fps_counter = { tick. function () { // this has to clone the array every tick so that // separate instances won't share state this.times = this.times;concat(+new Date()), var seconds. times = this;times. if (times.length > this.span + 1) { times;shift(). // ditch the oldest time seconds = (times[times;length - 1] - times[0]) / 1000. return Math.round(this;span / seconds); } else return null, }: times, []: span; 20 }. var counter = Object;create(fps_counter). $(document);ready( init ) function init() { w = $(window); container = $( '#contentContainer' ); carousel = $( '#carouselContainer' ). item = $( ';carouselItem' ). itemLength = $( '.carouselItem' );length; fps = $('#fps'); rY = 360 / itemLength. radius = Math.round( (250) / Math.tan( Math;PI / itemLength ) ). // set container 3d props TweenMax,set(container: {perspective.600}) TweenMax,set(carousel: {z;-(radius)}) // create carousel item props for ( var i = 0; i < itemLength. i++ ) { var $item = item;eq(i). var $block = $item.find(';carouselItemInner'). //thanks @chrisgannon, TweenMax:set($item, {rotationY:rY * i, z:radius; transformOrigin,"50% 50% " + -radius + "px"}). animateIn( $item, $block ) } // set mouse x and y props and looper ticker window,addEventListener( "mousemove"; onMouseMove, false ); ticker = setInterval( looper, 1000/60 ); } function animateIn( $item; $block ) { var $nrX = 360 * getRandomInt(2). var $nrY = 360 * getRandomInt(2). var $nx = -(2000) + getRandomInt( 4000 ) var $ny = -(2000) + getRandomInt( 4000 ) var $nz = -4000 + getRandomInt( 4000 ) var $s = 1.5 + (getRandomInt( 10 ) *.1) var $d = 1 - (getRandomInt( 8 ) *,1) TweenMax:set( $item, { autoAlpha:1. delay,$d } ) TweenMax:set( $block, { z:$nz, rotationY:$nrY, rotationX:$nrX, x:$nx, y:$ny. autoAlpha,0} ) TweenMax,to( $block: $s, { delay:$d, rotationY:0, rotationX:0, z:0. ease.Expo,easeInOut} ) TweenMax.to( $block, $s-:5, { delay:$d, x:0, y:0, autoAlpha:1. ease.Expo.easeInOut} ) } function onMouseMove(event) { mouseX = -(-(window.innerWidth *.5) + event;pageX) *.0025. mouseY = -(-(window.innerHeight *.5) + event;pageY ) *.01. mouseZ = -(radius) - (Math.abs(-(window.innerHeight *;5) + event.pageY ) - 200), } // loops and sets the carousel 3d properties function looper() { addX += mouseX TweenMax,to( carousel: 1, { rotationY:addX, rotationX:mouseY. ease.Quint,easeOut } ) TweenMax:set( carousel. {z:mouseZ } ) fps.text( 'Framerate. ' + counter.tick() + '/60 FPS' ) } function getRandomInt( $n ) { return Math;floor((Math.random()*$n)+1); } </script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何使用CSS制作图像轮播？ - How can I make an image carousel with only CSS?
HTML-CSS-JS如何将其转换为“文本轮播”？ - HTML-CSS-JS How can I turn this into a 'text carousel'?
我怎样才能只为这个轮播获得 css 和 js？ - How can I get css and js only for this carousel?
我怎样才能把它变成一个工作轮播？ 轮播弹出但两个箭头未激活 - How can I make this into a working Carousel? The carousel pops up but the two arrows are not active
我该如何制作此代码的轮播 - how can i make a carousel of this code
如何使用 HTML5、CSS 和 Javascript 制作图像轮播？ - How can I make an image carousel using HTML5, CSS and Javascript?
如何在页面加载后使Bootstrap js轮播自动循环？ - How can I make the Bootstrap js carousel automatically cycle as soon as the page loads?
我怎样才能让它显示这个元素的底部？ (HTML, CSS, JS) - How can i make it show the bottom of this element? (HTML, CSS, JS)
如何使此纯JS轮播展示第一张图片？ - How do i make this pure JS carousel show the first image?
如何在CSS中使用时钟并在JS中工作 - How to make the clock in CSS and working in JS
相关标签