焦点图切换代码 jQuery实现时间轴幻灯片

张志杰 2019-11-19 97 阅读

特效描述:利用jQuery实现 时间轴 幻灯片,利用jQuery实现时间轴幻灯片

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/demo.css">

<link rel="stylesheet" href="css/timeliner.css">

<link rel="stylesheet" href="css/timeliner_styling.css">

2. 引入JS

<script src='js/jquery-1.6.2.min.js'></script>

<script src='js/jquery.timeliner.min.js'></script>

3. HTML代码

<div id="content">
<h1>jQuery时间轴幻灯片</h1>
<noscript>
<div id="noscript">This slideshow needs JavaScript to be switched on in your browser.</div>
</noscript>
<ul id="example1" class="timeliner">
<li title="Slide one" style="background:url(images/slide1.jpg)"></li>
<li title="Slide two" lang="5">
This is HTML text. It could also be flash, embedded video
etc.<br>
More examples and technical info below.
</li>
<li title="Slide three with a long title<br>and a line-break" lang="5">
This example will repeat automatically. It can also stop at
the last slide if you want it to.
</li>
</ul>
<br>
</div>
<div style="text-align:center;clear:both">
</div>

演示地址下载地址

最新游戏