當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2023/12/29 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了自适应横向宽屏幻灯片代码小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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

總結

以上是生活随笔為你收集整理的自适应横向宽屏幻灯片代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：让金山词霸在 Adobe Reader
下一篇：爆强！瑞星老用户可获取免费正版Vista