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

全栈程序员-站长 • 2022年7月14日上午8:46 • 未分类 • 阅读 15

大家好，又见面了，我是你们的朋友全栈君。

工作需要利用 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>