jQuery斜角全屏幻灯片特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery斜角全屏幻灯片特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery斜角全屏滑动幻灯片</title>
<script src="js/jquery-1.4.2.min.js" language="javascript" type="text/javascript"></script>
<link href="scrollStyled.css" rel="stylesheet" type="text/css" />
<script src="js/scroll.js" type="text/javascript"></script>
<script>
</script>
</head>

<body>
    <div id="logo">
    </div> <div id="triangle">
    </div>
    <div id="contentWrapper">
        <div class="contentItem" id="content1">
            <div id="contentPicture1"></div></div>
        <div class="contentItem" id="content2">
            <div id="contentPicture2"></div></div>
        <div class="contentItem" id="content3">
            <div id="contentPicture3"></div></div>
        <div class="contentItem" id="content4">
            <div id="contentPicture4"></div></div>
    </div>
    <div id="nav">
        <ul>
            <li><a href="#" class="selected" onClick="scrollContent(0)"></a>
            </li>
            <li><a href="#" onClick="scrollContent(1)"></a></li>
            <li><a href="#" onClick="scrollContent(2)"></a></li>
            <li><a href="#" onClick="scrollContent(3)"></a></li>
        </ul>
    </div>
    <div id="rightButton">
    <a href="#" onClick="scrollContentNext()"></a>
    </div>
</body>
</html>

JS代码(scroll.js):

var theWidth;
	var theHeight;
	var currentContent = 0;
	$(window).resize(function (){
	sizeContent();
}
);
	$(window).ready(function (){
	sizeContent();
}
);
	function sizeContent(){
	theWidth = $(window).width();
	theHeight = $(window).height();
	sizeContentItems();
	setLeftOnContentItems();
	sizeContentWrapper(theWidth,theHeight);
	moveContent(currentContent,theWidth);
	changeSelected(currentContent);
}
function sizeContentItems(){
	$(".contentItem").css('width',theWidth);
	$(".contentItem").css('height',theHeight);
}
function setLeftOnContentItems(){
	var contentCount = 0;
	$(".contentItem").each(function (i){
	contentCount += i;
	$(this).css('left',i * theWidth);
}
);
}
function sizeContentWrapper(width,height){
	$("#contentWrapper").css('width',width - 80);
	$("#contentWrapper").css('height',height);
}
function moveContent(i,width){
	$("#contentWrapper").scrollLeft(i * width);
}
function changeSelected(i){
	$(".selected").removeClass("selected");
	$("li:eq(" + i + ") a").addClass("selected");
}
function scrollContentNext(){
	scrollContent(currentContent + 1);
}
function scrollContent(i){
	i = checkMax(i);
	scrollLogo(i);
	scrollTriangle(i);
	changeSelected(i) currentContent = i;
	$("#contentWrapper").animate({
	scrollLeft:i * theWidth}
,1000);
}
function scrollLogo(i){
	var left = (i * -200) + 20;
	$("#logo").animate({
	left:left}
,1000);
}
function scrollTriangle(i){
	var left = (i * -300);
	$("#triangle").animate({
	left:left}
,1000);
}
function checkMax(i){
	var maxItems = $("li").length;
	if (i >= maxItems){
	return 0;
}
return i;
}

CSS代码(scrollStyled.css):

body{margin:0px;padding:0px;}
#logo{position:absolute;top:10px;left:10px;top:10px;height:200;width:160px;background-image:url('images/logo.png');z-index:2;}
#triangle{z-index:1;position:absolute;top:0px;left:0px;top:0px;height:400px;width:750px;background-image:url('images/triangle.png');}
#nav{position:absolute;bottom:10px;width:300px;height:20px;left:40%;}
#nav ul{position:absolute;bottom:10px;width:300px;height:20px;clear:both;display:block;list-style-type:none;list-style-position:outside;list-style-image:none;}
#nav ul li{float:left;}
#nav ul li a{position:relative;top:0px;margin-right:5px;background-color:Black;background-repeat:no-repeat;width:30px;height:30px;display:block;}
#nav ul li a:hover{background-color:#e1e1e1;}
#nav ul li .selected{background-color:#e5e5e5;}
#rightButton{position:absolute;width:80px;right:0px;height:100%;z-index:3;}
#rightButton a{position:absolute;top:40%;width:80px;height:80px;background-image:url('images/button.png');display:block;}
#contentWrapper{position:absolute;overflow:hidden;}
.contentItem{position:absolute;background-color:#fff;}
#contentPicture1{position:relative;top:30%;left:40%;width:250px;height:550px;background-color:#fff;background-image:url('http://www.htmldrive.net/edit_media/2010/201010/20101011/mobileapp_website/img/phones/iphone.png');}
#contentPicture2{position:relative;top:30%;left:40%;width:250px;height:550px;background-color:#fff;background-image:url('http://www.htmldrive.net/edit_media/2010/201010/20101011/mobileapp_website/img/phones/iphone.png');}
#contentPicture3{position:relative;top:30%;left:40%;width:250px;height:550px;background-color:#fff;background-image:url('http://www.htmldrive.net/edit_media/2010/201010/20101011/mobileapp_website/img/phones/nokia.png');}
#contentPicture4{position:relative;top:30%;left:40%;width:250px;height:550px;background-color:#fff;background-image:url('http://www.htmldrive.net/edit_media/2010/201010/20101011/mobileapp_website/img/phones/nexus_one.png');}

附件:下载该文件资源,减少时间成本(增值服务)