JavaScript JQuery幻燈片效果

Question

我正在嘗試使背景幻燈片放映效果。 我設法做的就是制作此幻燈片，但沒有像滑動或其他圖像出現效果那樣的精美效果。 有人可以提供一些建議來創建滑動效果或任何其他更漂亮的效果嗎？

在這里，我設法做到了：

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

Answer 1

我通過使用animate函數並通過為該元素設置css屬性和動畫時間（以毫秒為單位）來滑動元素，如下所示：

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

然后滑動得非常好。 因此，您可以修改代碼以使用動畫功能來使幻燈片動畫化。

JavaScript JQuery幻燈片效果

問題描述

1 個解決方案

解決方案1
0 2014-02-20 06:53:54

JavaScript JQuery幻燈片效果

問題描述

1 個解決方案

解決方案1 0 2014-02-20 06:53:54

解決方案1
0 2014-02-20 06:53:54