仿韩国魔兽世界官网图片轮播效果
- 作者：网页模板
- 大小：0.68MB
- 点击次数：
- 发布时间：2014-07-23 10:15
特效介绍
仿韩国魔兽世界官网图片轮播效果，图片上面带标题和描述，右上角是控制点，鼠标移动到控制点上会显示缩略图，缩略图也带有图片标题。使用方法
1、在head引入下面的代码：<link rel="stylesheet" type="text/css" href="css/index.css" />
<script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/slideshow.js"></script>
<script type="text/javascript">
$(function() {
Slideshow.initialize('#slideshow', [
{
image: "images/1.jpg",
desc: "我爱模板网-提供免费网页模板",
title: "网站模板",
url: "http://www.5imoban.net",
id: "473947"
},
{
image: "images/2.jpg",
desc: "我爱模板网-提供免费网页模板",
title: "网站模板",
url: "http://www.5imoban.net",
id: "431948"
},
{
image: "images/3.jpg",
desc: "我爱模板网-提供免费网页模板",
title: "网站模板",
url: "http://www.5imoban.net",
id: "494593"
},
{
image: "images/4.jpg",
desc: "我爱模板网-提供免费网页模板",
title: "网站模板",
url: "http://www.5imoban.net",
id: "473946"
}
]);
});
</script>
注：这里的image是缩略图路径，desc是图片描述，title是图片标题，url是图片对应的地址。2、在您的banner区域引入下面的html代码：
<div id="slideshow"> <div class="container"> <div class="slide" id="slide-0" style="background-image: url(images/1.jpg); display: block;"></div> <div class="slide" id="slide-1" style="background-image: url(images/2.jpg); display: none;"></div> <div class="slide" id="slide-2" style="background-image: url(images/3.jpg); display: none;"></div> <div class="slide" id="slide-3" style="background-image: url(images/4.jpg); display: none;"></div> </div> <div class="paging"> <a href="javascript:;" id="paging-0" onclick="Slideshow.jump(0, this);" onmouseover="Slideshow.preview(0);" class="current"> </a> <a href="javascript:;" id="paging-1" onclick="Slideshow.jump(1, this);" onmouseover="Slideshow.preview(1);" class=""> </a> <a href="javascript:;" id="paging-2" onclick="Slideshow.jump(2, this);" onmouseover="Slideshow.preview(2);" class=""> </a> <a href="javascript:;" id="paging-3" onclick="Slideshow.jump(3, this);" onmouseover="Slideshow.preview(3);" class="last-slide"> </a> </div> <div class="caption"><h3><a href="http://www.5imoban.net" class="link">我爱模板网！</a></h3>提供免费网页模板，建站特效下载</div> <div class="preview"></div> <div class="mask"></div> </div>注：class="container"的div里面的图片为大图路径，请于上面的js图片路径一一对应。
- 本文标签：
- 韩国魔兽世界官网图片轮播,jquery图片轮播
