首页 > 特效插件 > 滚动轮播 >  jquery全屏滚动图片代码正文

jquery全屏滚动图片代码

特效介绍
jquery全屏滚动图片代码
jquery全屏滚动图片代码

JQ全屏滚动图片代码,兼容IE7+浏览器,不支持手机上手指滑动滚动。
使用方法
1、在head引入下面的css和js文件:
<link href="css/style.css" type="text/css" rel="stylesheet">
<script src="http://www.5imoban.net/tpl/js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="js/jquery.easing.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
2、在body引入下面的代码:
<div class="ps_box">
	<div class="pics_switch">
	
		<div class="pb">
			<div class="pic_box"><a class="pic_banner_001" target="_blank" href="http://www.5imoban.net" title="网页模板"></a></div>
			<div class="pic_box"><a class="pic_banner_002" target="_blank" href="http://www.5imoban.net" title="网页模板"></a></div>
			<div class="pic_box"><a class="pic_banner_003" target="_blank" href="http://www.5imoban.net" title="网页模板"></a></div>
			<div class="pic_box"><a class="pic_banner_004" target="_blank" href="http://www.5imoban.net" title="网页模板"></a></div>
		</div>
		
		<div class="viewArrows prev">上一张</div>
		<div class="viewArrows next">下一张</div>
		
		<div class="pics_switch_clients">
			<ul>
				<li><span class="current">1</span></li>
				<li><span>2</span></li>
				<li><span>3</span></li>
				<li><span>4</span></li>
			</ul>
		</div>
	</div>
</div>
3、如果想支持手机,可以在head加入下面的meta内容:
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
更详细的兼容手机的meat标签详解,可以查看:手机端的HTML meta标签详解