医疗网站常用的左右滑动Banner效果

医疗网站常用的左右滑动Banner效果_jquery插件，使用简单。

使用方法：

1.在网页中引入一下代码：

		<link href="css/slide.css" rel="stylesheet" type="text/css" />

		<script type="text/javascript" src="js/jquery.js"></script>

		<script type="text/javascript" src="js/jdSlide.js"></script>

2.在使用banner效果的地方插入一下代码：

复制代码代码如下:

		<script type="text/javascript">

		$("#slide").jdSlide({

		width:1002,

		height:325,

		pics:[

		{src:"images/banner01.jpg",href:"/swt/",alt:"图片一",type:"img"},

		{src:"images/banner02.jpg",href:"/swt/",alt:"图片二",type:"img"},

		{src:"images/banner03.jpg",href:"/swt/",alt:"图片三",type:"img"}

		]

		})

		</script>

其中width为banner图片宽度，height为banner图片高度。

pics参数中定义每张图片的相关属性，src：图片路劲，href：图片链接，alt：图片说明，type：类型。

效果截图：

下载地址：医疗网站常用的左右滑动Banner效果_jquery插件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<title>医疗网站常用的左右滑动Banner效果 | 医疗模板库www.120muban.com</title>
<link href="/demo/20140914/001/css/slide.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/demo/20140914/001/js/jquery.js"></script>
<script type="text/javascript" src="/demo/20140914/001/js/jdSlide.js"></script>
<style type="text/css">
	.top-banner{ margin:0 auto;width:1002px; height:325px;overflow:hidden; background:#FFF;}
</style>
</head>
<body>
<div class=top-banner>
<div id="slide"></div>	
	<script type="text/javascript">
		$("#slide").jdSlide({
			width:1002,
			height:325,
			pics:[
				{src:"/demo/20140914/001/images/banner01.jpg",href:"/swt/",alt:"图片一",type:"img"},
				{src:"/demo/20140914/001/images/banner02.jpg",href:"/swt/",alt:"图片二",type:"img"},
				{src:"/demo/20140914/001/images/banner03.jpg",href:"/swt/",alt:"图片三",type:"img"}
			]
		})
	</script>
</div>
</body>
</html>

随机推荐

很棒的网站底部导航条效果
很棒的网站底部导航条效果，访客输入咨询信息点击发送按钮时可以向商务通传递访客输入的信息。打包下载：很棒的网站底部导航条效果效果截图：
jQuery日期选择器插件jquery.date_input.js
官网： http://jonathanleighton.com/projects/date-input/ 下载： http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js http://github.com/jonleighton/date_input/raw/master/jquery.date_input.js http://github.com/jonleighton/date_inpu
医疗网站常用的左右滑动Banner效果_jquery插件
医疗网站常用的左右滑动Banner效果_jquery插件，使用简单。在线演示使用方法： 1.在网页中引入一下代码：复制代码代码如下: link href=css/slide.css rel=stylesheet type=text/css / script type=text/javascript src=js/jquery.js/script script type=
jQuery集合多种过渡效果幻灯片插件jQuery Nivo Slider v2.5.1
好吧一直有人抱怨js版本的焦点图过渡效果太单调，今天介绍的这款jQuery插件Nivo Slider，除了一般该有的参数设置外，最大的亮点就是其集成了16种(v2.5.1)过渡效果，再加上对CSS的调整，效果相信已经可以和很多Flash版本的焦点图相媲美了插件同时还支持缩略
利用jQuery实现的简单轮播效果
利用jQuery实现的简单轮播效果,代码简单容易理解。效果截图：

医疗网站常用的左右滑动Banner效果_jquery插件

相关文章

随机推荐