superSlide全屏滚动插件下载

superSlide全屏滚动插件

        superSlide全屏滚动插件下载，可以设置背景色，建议使用背景比较简单的图片作为banner，然后吸取背景色，设置到banner里面去，这样就能实现全屏效果。banner图片并不是真的插入进html，而是作为背景显示的，所以才能全屏。带左右箭头，和图片对应的点。图片个数可以设置li的数量，小点自动计算个数。

1、引入相关的css和js：

<link href="css/page.css" type="text/css" rel="stylesheet" />
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/superslide.2.1.js"></script>

2、在您的项目中插入下面的html代码

	<div class="banner">
		<div class="bd">
			<ul>
				<li _src="url(images/1.png)" style="background:#cfcfcf center 0 no-repeat;" ><a href="#"></a></li>
				<li _src="url(images/2.png)" style="background:#012348 center 0 no-repeat;" ><a href="#"></a></li>
				<li _src="url(images/3.png)" style="background:#cfcfcf center 0 no-repeat;" ><a href="#"></a></li>
				<li _src="url(images/4.png)" style="background:#fff center 0 no-repeat;" ><a href="#"></a></li>
				<li _src="url(images/5.png)" style="background:#f9e642 center 0 no-repeat;" ><a href="#"></a></li>
			</ul>
		</div>
		<div class="hd"><ul></ul></div>
		<span class="prev"></span><span class="next"></span>
	</div>

3、在刚才的html下面加入下面的js代码：

	<script>
	$(function(){
		jQuery(".banner").hover(
			function(){
				jQuery(this).find(".prev,.next").stop(true, true).fadeTo("show", 0.5)
			},
			function() {
				jQuery(this).find(".prev,.next").fadeOut()
			}
		);
		jQuery(".banner").slide({
			titCell: ".hd ul",
			mainCell: ".bd ul",
			effect: "fold",
			autoPlay: true,
			autoPage: true,
			trigger: "click",
			mouseOverStop:false,
			startFun: function(i) {
				var curLi = jQuery(".banner .bd li").eq(i);
				if ( !! curLi.attr("_src")) {
					curLi.css("background-image", curLi.attr("_src")).removeAttr("_src")
				}
			}
		});
	})
	</script>

注意：html里面的 li 的_src的值，就是banner图片地址，而style设置的背景色，就是banner图片的底色。有多少个图片滚动，就加入多少个li。


部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！