我正在尝试使背景幻灯片放映效果。我设法做的就是制作此幻灯片，但没有像滑动或其他图像出现效果那样的精美效果。有人可以提供一些建议来帮助创建滑动效果或其他更漂亮的效果吗？
在这里，我设法做到了：
HTML代码
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script type="text/javascript" src="function.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body >
<div class='bannerbg'>
<div class='slider'></div>
</div>
</body>
</html>
CSS代码
body{
margin: 0px;
margin-left: 0px;
}
.bannerbg{
background-size: cover;
position: relative;
height: 500px;
}
.bannerbg img{
width: 100%;
}
.slider{
width: 940px;
height: 360px;
background-color: #FFDF00;
position: relative;
margin: 0 auto;
top: -370px;
}
JavaScript代码
$(document).ready(init)
images=new Array
(
"img/1.jpg",
"img/2.jpg",
"img/3.jpg",
"img/4.jpg"
);
function init(){
$('.bannerbg').prepend("<img id='principala' src='"+images[1]+"' />")
}
function left() // functia data schimba cu locul indexul din array la stinga cu 1 unitate
{
images.push(images.shift());
}
function change(){
p=document.querySelector("#principala");
p.src=images[1];
}
setInterval("left(); change()",1000);
最佳答案
我通过使用animate函数并通过以毫秒为单位为该元素设置css属性和动画时间来滑动元素，如下所示：
jQuery( "#slid_img1" ).animate({marginLeft: 0}, 250);
然后滑动得非常好。
因此，您可以修改代码以使用动画功能来使幻灯片动画化。
关于javascript - JavaScript JQuery幻灯片效果，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21900288/