Question

我正在尝试为我的主页制作幻灯片。我需要的幻灯片显示与此http://www.flashmint.com/template-demo-4188.html完全相同。

这是我的JavaScript -

$(document).ready(function() {
  $('#banner').oneByOne({
    className: 'oneByOne1',
    easeType: 'random',
    slideShow: true
  });
});

这是JS FIDDLE

我的问题是jquery缓动效果不适用于此幻灯片放映。任何人都可以帮我解决这个问题吗？

谢谢。

Answer 1

使用此JavaScript https://github.com/madan-ram/facebook-app/blob/master/js/jslider.js，然后嵌入您的HTML代码

<script type="text/javascript">
$(document).ready(function()//$(target).(some function execution or tasks)
{
$(".slider").jslider( //$(target).(some function execution or tasks)
{
btnPrev:".next",
btnNext:".prv",
});
});
</script>

然后在身体

<!--start 

slider--------------------------------------------------------------------------------------------->
<div id="slide_container">
<img src="./image/prev.png" class="prv"/>
<img src="./image/next.png" class="next"/>
<div class="slider">
<ul>
<li><a href="http://www.linux.com" ><img src="./image/linux-hardware.jpg" /></a></li>
<li><a href="http://www.wordpress.com" ><img src="./image/wordpress.jpg" /></a></li>
<li><a href="http://www.ubuntu.com" ><img src="./image/ubuntu.jpg" /></a></li>
<li><a href="http://www.firefox.com" ><img src="./image/firefox-thunderbird.jpg" /></a></li>
<li><a href="https://developers.google.com/" ><img src="./image/google.jpg" /></a></li>
<li><a href="http://www.gnu.org"><img src="./image/GnuTuxSoftRevolution-v1.jpg" style="width:580;height:400;"/></a></li>
</ul>
</div>
</div>
<!--end slider------------------------------------------------------------------------------------------------->

查看我的代码完整代码https://github.com/madan-ram/facebook-app/blob/master/index.php。

Answer 2

您可以看到此链接http://3.s3.envato.com/files/41177958/index.html并查看源代码。之后尝试检查你的html与该链接的源代码有什么不同。也许你忘了包含一些对这个库很重要的javascript或css。

JS和CSS，我的意思是

<script src="js/jquery.1.8.2.min.js"></script>
<script src="js/jquery.onebyone.min.js"></script>              
<script src="js/jquery.touchwipe.min.js"></script> 
<script type="text/javascript" charset="utf-8"> 
 $(document).ready(function() { 

    $('#banner').oneByOne({
        className: 'oneByOne1',              
        easeType: 'random',
        slideShow: true
    });  


 });


</script> 
<link href="css/jquery.onebyone.css" rel="stylesheet" type="text/css">
<link href="css/example1.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/animate.css">

我如何使用jquery制作这样的幻灯片？

2 个答案: