JavaScript JQuery幻灯片效果

Question

I am trying to make a background slide show effect. 我正在尝试使背景幻灯片放映效果。 What i have managed to do is to make this slideshow but without any beautifully effect like sliding or other image appearing effect. 我设法做的就是制作此幻灯片，但没有像滑动或其他图像出现效果那样的精美效果。 Can someone help with some advice in creating the effect of sliding or any other more beautiful effects. 有人可以提供一些建议来创建滑动效果或任何其他更漂亮的效果吗？

Here what I managed to do: 在这里，我设法做到了：

HTML CODE 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 CODE 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 CODE 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

I slide the elements by using the animate function and by setting the css property and animation time in miliseconds for that element, like that: 我通过使用animate函数并通过为该元素设置css属性和动画时间（以毫秒为单位）来滑动元素，如下所示：

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

It slides very nicely then. 然后滑动得非常好。 So, you could adapt your code to use the animate function to make the slide animate. 因此，您可以修改代码以使用动画功能来使幻灯片动画化。

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