如何使用jquery-ui选项卡制作简单的幻灯片?

时间:2013-08-07 02:09:21

标签: jquery jquery-ui slideshow

我一直在努力学习如何使用jquery-ui标签制作简单的幻灯片。到目前为止,我的Google搜索技能已经失败了,我仍然是JavaScript的新手。我已经知道如何使用示例教程制作jquery-ui选项卡。我只是想学习如何制作一个简单的幻灯片。如果这里的任何人可以为我帮忙,请帮助。

我希望幻灯片显示在页面加载时自动播放,并在鼠标悬停在其上时停止。此外,如果可以添加滑动效果,请同时添加一个。非常感谢你。

以下是JSfiddle中已经设置的一些代码:
http://jsfiddle.net/TcNJ2/

<!DOCTYPE html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" >

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script>

 <script>
$(function() {
$( "#tab" ).tabs();
});
</script>

</head>

<body>

<div id="tab">

<ul id="btn">
    <li><a href="#1">1</a></li>
    <li><a href="#2">2</a></li>
    <li><a href="#3">3</a></li>
    <li><a href="#4">4</a></li>
    <li><a href="#5">5</a></li>
</ul>

<br class="clear">

<div id="slides">
    <div id="1">Slide 1</div>
    <div id="2">Slide 2</div>
    <div id="3">Slide 3</div>
    <div id="4">Slide 4</div>
    <div id="5">Slide 5</div>
</div>

</div>

</body>

CSS位于jsfiddle链接

1 个答案:

答案 0 :(得分:0)

我认为你要找的是Carousel。

This page包含几个基于jQuery的轮播项目,特别是this可能符合您的需求。

探险家与其他项目一样!!!