功能说明：在一个页面中能够轮播多个网页（三个网页进行轮播），类似轮播多个图片一样，代码如下：
1.aspx代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CarouselNew.aspx.cs" Inherits="DModel.Web.CarouselNew" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="Css/CarouselNew.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="CarouselNew.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="Carousel">
<div class="clickdiv">
<div class="leftbut">
</div>
</div>
<div class="center">
<div id="IframeDiv">
</div>
<ul class="dianul">
</ul>
</div>
<!-- <p class="copyright">
test</p>-->
<div class="clickdiv">
<div class="rightbut">
</div>
</div>
</div>
</form>
</body>
</html>
2、CarouselNew.js代码：
var Timing = null;
var relode = null;
var Sum = 1;
var Num = 0;
var loadNum = 0;
var title = "综合管理系统";
var titleI = 1;
var flag = true;
$(function () {
$(document).attr("title", title);
relode = setInterval(reLode, 3600000);
Init();
setClick();
scroll();
resize();
BtnClick();
$(window).load(function () {
setIframe();
});
});
//标题变化
function changeTitle() {
var newT = "";
if (titleI == 20 && flag == true) {
flag = false;
}
if (titleI == 0 && flag == false) {
flag = true;
}
if (flag) {
newT = title.substring(titleI, title.length);
titleI++;
}
else {
newT = title.substring(titleI, title.length);
titleI--;
}
$(document).attr("title", newT);
}
//初始化
function Init() {
$(".center").offset().top = 0;
$(".Carousel").css("width", window.screen.width - 4);
// $(".copyright").css("left", ($(".Carousel").width() - $(".copyright").width()) / 2);
$(".dianul").css("left", (window.screen.width - 23) / 2);
setClick();
$("#IframeDiv").append("<iframe id=\"iframe0\" name=\"iframe0\" width=\"100%\" height=\"0px\" frameborder=\"0\" src=\"Common/LinkRate.aspx?height=" + $(document).height() + "\"></iframe>");
$(".dianul").append("<li id=\"li0\" value=\"0\" style=\"background-position: -8px -125px;\"></li>");
$("#iframe0").css("height", $(".center").height() - $(".dianul").height());
}
function reLode() {
location.reload();
}
// 设置左右点击按钮的样式
function setClick() {
$(".leftbut").css("top", $(window).scrollTop() + ($(window).height() - $(".leftbut").height()) / 2);
$(".rightbut").css("top", $(window).scrollTop() + ($(window).height() - $(".leftbut").height()) / 2);
$(".center").css("height", $(document).height() - 4);
}
// 根据滚动条移动触发事件
function scroll() {
$(window).scroll(function () {
setClick();
});
}
// 设置iframe
function setIframe() {
Sum = 3;
$("#IframeDiv").append("<iframe id=\"iframe1\" width=\"100%\" height=\"0px\" frameborder=\"0\" src=\"Common/Install.aspx?height=" + $(document).height() + "\"></iframe>");
$("#IframeDiv").append("<iframe id=\"iframe2\" width=\"100%\" height=\"0px\" frameborder=\"0\" src=\"Common/Fault.aspx?height=" + $(document).height() + "\"></iframe>");
for (var i = 1; i < Sum; i++) {
$(".dianul").append("<li id=\"li" + i + "\" value=\"" + i + "\" ></li>");
$("#iframe" + i).load(function () {
loadNum++;
if (loadNum == (Sum - 1)) {
Timing = setInterval(nextDiv, 7000);
scrollTitle = setInterval(changeTitle, 1000);
}
});
}
$(".dianul").css("left", (window.screen.width - (23 * Sum)) / 2);
$(".dianul li").click(function () {
Num = Number($(this).val());
display();
});
}
// 窗口改变事件
function resize() {
$(window).resize(function () {
setClick();
if (loadNum == (Sum - 1)) {
iframe = $("iframe");
for (var i = 0; i < iframe.length; i++) {
iframe[i].contentWindow.ChangeHeight($(document).height());
}
}
$("#iframe" + Num).css("height", $(".center").height() - $(".dianul").height());
});
}
// 左右按钮点击事件
function BtnClick() {
$(".center").mouseenter(function () {
if (Timing != null && loadNum == (Sum - 1)) {
window.clearInterval(Timing);
Timing = null;
}
});
$(".center").mouseleave(function () {
if (Timing == null && loadNum == (Sum - 1)) {
Timing = setInterval(nextDiv, 7000);
}
});
$(".leftbut").click(function () {
if (loadNum != Sum - 1) {
alert("后续页面还没有加载完成请稍后再试");
return;
}
if (Num == 0) {
Num = Sum - 1
}
else {
Num--;
}
display();
});
$(".rightbut").click(function () {
if (loadNum != Sum - 1) {
alert("后续页面还没有加载完成请稍后再试");
return;
}
nextDiv()
});
}
function nextDiv() {
if (Num == Sum - 1) {
Num = 0
}
else {
Num++;
}
display();
}
function display() {
$("iframe").css("height", "0px");
$("#iframe" + Num).css("height", $(".center").height() - $(".dianul").height());
$(".dianul li").attr("style", "background-position: -23px -125px;");
$("#li" + Num).attr("style", "background-position: -8px -125px;");
}
3、CarouselNew.css代码
body
{
margin: 0 0 0 0;
padding: 0 0 0 0;
}
.Carousel
{
min-height: 600px;
position: relative;
}
.Carousel .clickdiv
{
width: 4%;
display: inline-block;
vertical-align: top;
}
.Carousel .clickdiv .leftbut
{
position: absolute;
width: 45px;
height: 45px;
left: 10px;
background: url(/Img/icons.png) no-repeat 0 0;//说明左右两个方向箭头，自己去网上类似图片
cursor: pointer;
}
.Carousel .clickdiv .rightbut
{
position: absolute;
width: 45px;
height: 45px;
right: 10px;
background: url(/Img/icons.png) no-repeat 0 -46px;//说明左右两个方向箭头，自己去网上类似图片
cursor: pointer;
}
.Carousel .center
{
width: 91%;
height: 100%;
display: inline-block;
}
.Carousel .dianul
{
list-style: none;
position: absolute;
bottom: 18px;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
.Carousel .dianul li
{
float: left;
width: 15px;
height: 15px;
margin-right: 8px;
background: url(/Img/icons.png) no-repeat -23px -125px;//说明左右两个方向箭头，自己去网上类似图片
cursor: pointer;
}
.Carousel .dianul li.cur
{
background-position: -8px -125px;
}
.Carousel .dianul li.nocur
{
background-position: -23px -125px;
}
.Carousel .copyright
{
font-size: 16px;
position: absolute;
bottom: 0px;
font-weight: bolder;
margin: 0 0 0 0;
padding: 0 0 0 0;
}