Question

我正在尝试制作背景幻灯片效果。我设法做的是制作这个幻灯片，但没有任何像滑动或其他图像出现效果的精美效果。有人可以提供一些建议，以创造滑动效果或任何其他更美丽的效果。

这是我设法做的：

HTML CODE

<!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);

Answer 1

我使用 animate 函数滑动元素，并为该元素设置css属性和动画时间（以毫秒为单位），如下所示：

jQuery( "#slid_img1" ).animate({marginLeft: 0}, 250);

然后非常好地滑动。因此，您可以调整代码以使用动画功能使幻灯片具有动画效果。

JavaScript JQuery幻灯片效果

1 个答案: