仿韩国魔兽世界官网图片轮播效果_滚动轮播_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

仿韩国魔兽世界官网图片轮播效果

来源：未知作者：大小：大小： 1000KB 点击次数：发布时间：2017-06-22 17:27:15 去下载去预览

特效介绍

仿韩国魔兽世界官网图片轮播效果，图片上面带标题和描述，右上角是控制点，鼠标移动到控制点上会显示缩略图，缩略图也带有图片标题。

使用方法

1、在head引入下面的代码：

01<link rel="stylesheet" type="text/css" href="css/index.css" />
02<script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>
03<script type="text/javascript" src="js/slideshow.js"></script>
04<script type="text/javascript">
05    $(function() {
06    Slideshow.initialize('#slideshow', [
07    {
08        image: "images/1.jpg",
09        desc: "我爱模板网-提供免费网页模板",
10        title: "网站模板",
11        url: "http://www.5imoban.net",
12        id: "473947"
13    },
14    {
15        image: "images/2.jpg",
16        desc: "我爱模板网-提供免费网页模板",
17        title: "网站模板",
18        url: "http://www.5imoban.net",
19        id: "431948"
20    },
21    {
22        image: "images/3.jpg",
23        desc: "我爱模板网-提供免费网页模板",
24        title: "网站模板",
25        url: "http://www.5imoban.net",
26        id: "494593"
27    },
28    {
29        image: "images/4.jpg",
30        desc: "我爱模板网-提供免费网页模板",
31        title: "网站模板",
32        url: "http://www.5imoban.net",
33        id: "473946"
34    }
35    ]);
36     
37    });
38</script>

注：这里的image是缩略图路径，desc是图片描述，title是图片标题，url是图片对应的地址。
2、在您的banner区域引入下面的html代码：

01<div id="slideshow">
02    <div class="container">
03        <div class="slide" id="slide-0" style="background-image: url(images/1.jpg); display: block;"></div>
04        <div class="slide" id="slide-1" style="background-image: url(images/2.jpg); display: none;"></div>
05        <div class="slide" id="slide-2" style="background-image: url(images/3.jpg); display: none;"></div>
06        <div class="slide" id="slide-3" style="background-image: url(images/4.jpg); display: none;"></div>
07    </div>
08    <div class="paging">
09        <a href="javascript:;" id="paging-0" onclick="Slideshow.jump(0, this);" onmouseover="Slideshow.preview(0);" class="current">
10        </a>
11        <a href="javascript:;" id="paging-1" onclick="Slideshow.jump(1, this);" onmouseover="Slideshow.preview(1);" class="">
12        </a>
13        <a href="javascript:;" id="paging-2" onclick="Slideshow.jump(2, this);" onmouseover="Slideshow.preview(2);" class="">
14        </a>
15        <a href="javascript:;" id="paging-3" onclick="Slideshow.jump(3, this);" onmouseover="Slideshow.preview(3);" class="last-slide">
16        </a>
17    </div>
18    <div class="caption"><h3><a href="http://www.5imoban.net" class="link">我爱模板网！</a></h3>提供免费网页模板，建站特效下载</div>
19    <div class="preview"></div>
20    <div class="mask"></div>
21</div>

注：class="container"的div里面的图片为大图路径，请于上面的js图片路径一一对应。