自适应横向宽屏幻灯片代码

工作需要利用 jsilde实现页面幻灯片效果，利用此插件实现起来比较简单，具体步骤如下：

1.head区域引入jquery.jslides.css样式表文件。

2.引入JS文件jquery-1.8.0.min.js和jquery.jslides.js

3.在你的网页中加入注释区的代码，注意图片路径。

4.为了更宽的屏幕显示较好的效果，建议图片宽度大于等于1920像素。

可以参考一下代码：

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	<link rel="stylesheet" type="text/css"href="css/jquery.jslides.css"media="screen" />
	<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
	<!--<script type="text/javascript" src="js/jquery.jslides.js"></script>-->
	<script type="text/javascript" src="js/jquery.jslide.js"></script>
	<title>自适应横向宽屏幻灯片</title>
	</head>
	<body>
	<!--第一种自带效果--> <!--
	<div style="margin-bottom:50px" class="slide_wrap">
	<ul id="slides">
	<li style="background:url('images/01.jpg') no-repeat center top"><a href="http://www.baidu.com" target="_blank">aa1</a></li>
	<li style="background:url('images/02.jpg') no-repeat center top"><a href="http://www.baicu.com" target="_blank">aa2</a></li>
	</ul>
	</div>
	-->
	<!--自写效果--> <div class="slide_wrap">
	<ul id="slides2" class="slide">
	<li style="background:url('images/01.jpg') no-repeat center top"><ahref="http://www.baidu.com"target="_blank">aa1</a></li>
	<li style="background:url('images/02.jpg') no-repeat center top"><ahref="http://www.baidu.com"target="_blank">aa2</a></li>
	<li style="background:url('images/03.jpg') no-repeat center top"><ahref="http://www.baidu.com"target="_blank">aa3</a></li>
	<li style="background:url('images/04.jpg') no-repeat center top"><ahref="http://www.baidu.com"target="_blank">aa4</a></li>
	</ul>
	</div>
	<script type="text/javascript">
	$('#slides2').jslide();
	</script>
	</body>
	</html>

自适应横向宽屏幻灯片代码相关推荐

banner特效php,jQuery自适应通栏宽屏banner幻灯片切换特效
jQuery自适应通栏宽屏banner幻灯片切换特效这是一款代码简洁的jQuery自适应通栏宽屏banner幻灯片切换特效,jQuery自适应全屏BANNER焦点图代码. js代码 $(" ...
宽屏自适应php源码,jQuery+H5自适应通栏宽屏banner幻灯片切换特效
jQuery+H5自适应通栏宽屏banner幻灯片切换特效代码片段: function(){ $(this).find(".prev,.next").fadeOut() }); ...
自适应HTML5宽屏物流运输快递货运类网站源码 pbootcms模板
介绍: PbootCMS内核开发的网站模板,该模板适用于物流运输网站.快递货运网站等企业,当然其他行业也可以做,只需要把文字图片换成其他行业的即可:自适应,同一个后台,数据即时同步,简单适用!附带测试 ...
分享63个JS幻灯片代码，总有一款适合您
分享63个JS幻灯片代码,总有一款适合您 63个JS幻灯片代码下载链接:https://pan.baidu.com/s/1tWjsZD6ZiHGiXYmDOqxqgA?pwd=nwl2 提取码:nw ...
分享99个JS幻灯片代码，总有一款适合您
分享99个JS幻灯片代码,总有一款适合您 99个JS幻灯片代码下载链接:https://pan.baidu.com/s/1n8UQ41cem0GmgsOXCq9kMw?pwd=m5zf 提取码:m5 ...
苹果CMSV10高端安全干净模板宽屏大图轮播支持DIY的自适应模板
苹果CMSV10高端安全干净模板宽屏大图轮播支持DIY的自适应模板首页幻灯片数据为5星推荐全部分类8个(必须8个),图片链接填写格式"http://xxx.com/xxx.jpg) #0D ...
首涂第二十五套精简宽屏大气苹果CMSv10自适应简约高端模板
主题简介这是一款带"主题管理系统"的模板,它是可以完全自主配置主题的一套系统,脱离cms主程序独立针对主题界面管理,体积小巧.功能强大.免安装,不对cms二次开发,当前版本具备了 ...
html自适应屏幕大小渐变背景色,CSS实现背景渐变和自动全屏的代码
CSS 关于背景渐变和自动全屏的问题主编在css开发时发现了一个致命的问题: 在设置了背景颜色渐变后好不容易调成了全屏覆盖但按下了F11的时候崩溃的世界开始了所以这篇文章主要介绍CSS背景渐变色 ...
elementui表格宽度适应内容_解决elementui表格操作列自适应列宽代码示例
本篇文章小编给大家分享一下解决elementui表格操作列自适应列宽代码示例,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 写死宽度时是这样的: 开始 ...

自适应横向宽屏幻灯片代码

自适应横向宽屏幻灯片代码相关推荐

最新文章

热门文章