<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery轮播图-jq22.com</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<script>
//这里是自定义方法，用于随机生成颜色和随机数
// 常用工具
// 产生随机数函数
function randomNumber(min, max) {
return Math.round(Math.random() * (max - min) + min);
}
// 随机颜色函数
function randomColor() {
var red = randomNumber(0, 255);
var green = randomNumber(0, 255);
var blue = randomNumber(0, 255);
var rColor = "rgb(" + red + "," + green + "," + blue + ")";
return rColor;
}
//以下是核心代码
// 如果要循环的话必须要有三页以上
// 显示页数
var $pageCount = 5;
// 显示框
var $swiper = $("<div id='swiper'></div>");
$swiper.css({
width: "300px",
height: "300px",
border: "5px solid black",
margin: "auto",
position: "relative",
overflow: "hidden"
});
$("body").append($swiper);
// 添加总页码和当前页码属性
$swiper.attr("pageCount", $pageCount).attr("currentPage", 0);
// var hrefs = ["#", "#", "#", "#", "#"];
// $swiper.click(function () {
// var currentHref = parseInt($swiper.attr("currentPage"));
// location.href = hrefs[currentHref];
// });
var hrefs = ["#", "#", "#", "#", "#"];//连接地址
//创建页面
for (var i = 0; i < $swiper.attr("pageCount"); i++) {
var $page = $("<div class='page'></div>");
// 页面页码
$page.attr("pageNo", i);
$swiper.append($page);
$page.css({
width: "100%",
height: "100%",
position: "absolute",
top: "0px",
// left: i * $page.width(),
background: randomColor(),
fontSize: "80px",
textAlign: "center",
lineHeight: "300px",
transition: "all 1s"
});
$page.text(i);
$page.click(function() {
var currentHref = parseInt($(this).attr("pageNo"));
// location.href = hrefs[currentHref];
window.open(hrefs[currentHref], "_blank", "width=300,height=300,top=100,left=100");
});
}
// 添加点击按钮(下一页)
var $nextBtn = $("<div id='nextBtn'></div>");
$nextBtn.css({
width: "20px",
height: "100px",
border: "1px solid blue",
position: "absolute",
top: "100px",
right: "0px",
zIndex: "200"
});
// 给函数名加（）表示调用此函数，并且将函数的返回值作为参数传递给click
// 而此时是将nextpage这个函数的引用传递给click，因此不用加（）（典型的回调函数）
$nextBtn.click(function() {
stop();
nextPage();
nextDot();
run();
});
$swiper.append($nextBtn);
// (上一页)
var $previousBtn = $("<div id='previousBtn'></div>");
$previousBtn.css({
width: "20px",
height: "100px",
border: "1px solid blue",
position: "absolute",
top: "100px",
left: "0px",
zIndex: "200"
});
$previousBtn.click(function() {
stop();
previousPage();
previousDot();
run();
});
$swiper.append($previousBtn);
setCurrentPage(0);
// 下一页的函数
function nextPage() {
var current = parseInt($swiper.attr("currentPage")) + 1;
// current %= 5;
setCurrentPage(current);
}
// 下一页的函数
function previousPage() {
var current = parseInt($swiper.attr("currentPage")) - 1;
// if (current < 0) {
// current += 5;
// }
setCurrentPage(current);
}
var changePageFlag = false;
// 根据页面得知当前位置
function setCurrentPage(pageNo) {
// 设置换页标志，当动画播放完成时为false，可以进行换页
// if (changePageFlag) {
// return;
// }
// // 换完一次之后设置为true，不能换页
// changePageFlag = true;
// // 当1秒之后动画播放结束之后可以换页(延时器)
// setTimeout(function () {
// changePageFlag = false;
// }, 1000);
if (pageNo >= $swiper.attr("pageCount")) {
pageNo = 0;
} else if (pageNo < 0) {
pageNo = $swiper.attr("pageCount") - 1;
}
$(".page").each(function(n, obj) {
// $($(".page")[pageNo]).css("zIndex", "100");
if (pageNo == n) {
//将当前页的层级调到最高（当前页就是现在为n的页数时，就表示当前页即为现在取到的obj）
$(obj).css("zIndex", "100");
} else {
$(obj).css("zIndex", "0");
}
// $(obj).attr("pageNo")页面页码 pageNo当前显示页码
// 计算页面偏移
var $offsetPage = $(obj).attr("pageNo") - pageNo;
if ($offsetPage > Math.floor($swiper.attr("pageCount") / 2)) {
$offsetPage -= $pageCount;
} else if ($offsetPage < -Math.floor($swiper.attr("pageCount") / 2)) {
$offsetPage += parseInt($swiper.attr("pageCount"));
}
$(obj).css("left", $offsetPage * $page.width());
// 更新容器的当前页码
$swiper.attr("currentPage", pageNo);
});
console.log($swiper.attr("currentPage"));
}
// 页显示器
var $pageCount = 5;
var $pagination = $("<div id='pagination'></div>");
$pagination.attr("pageCount", $pageCount).attr("currentPage", 0);
$pagination.css({
margin: "auto",
marginTop: "200px",
width: "300px",
height: "80px",
border: "1px solid black",
textAlign: "center",
lineHeight: "80px",
position: "absolute",
bottom: "0px",
zIndex: "101"
});
$swiper.append($pagination);
// 页显示器的点
for (var i = 0; i < parseInt($pagination.attr("pageCount")); i++) {
var $dot = $("<span class='dot'></dot>");
$dot.attr("pageNo", i);
$pagination.append($dot);
$dot.css({
width: "10px",
height: "10px",
border: "1px solid gray",
borderRadius: "10px",
display: "inline-block",
cursor: "pointer",
background: "white",
margin: "0px 20px"
});
// 设置点击函数
$dot.click(function() {
console.log(this);
stop();
setCurrentDot($(this).attr("pageNo"));
setCurrentPage($(this).attr("pageNo"));
run();
});
}
// 换点函数
function nextDot() {
var current = parseInt($pagination.attr("currentPage")) + 1;
// current %= 5;
setCurrentDot(current);
}
function previousDot() {
var current = parseInt($pagination.attr("currentPage")) - 1;
// current %= 5;
setCurrentDot(current);
}
// 当前点的函数，改变当前点的颜色
function setCurrentDot(pageNo) {
if (pageNo >= $pagination.attr("pageCount")) {
pageNo = 0;
} else if (pageNo < 0) {
pageNo = $pagination.attr("pageCount") - 1;
}
$(".dot").css("background", "white");
// dot是dom的节点对象
// var dot = $("dot")[pageNo];
// 要使用jQuery中的函数必须用$()括起来，改为jQuery对象
// $(dot).css("background", "white");
$($(".dot")[pageNo]).css("background", "red");
$pagination.attr("currentPage", pageNo);
}
setCurrentDot(0);
var timer = null;
function run() {
timer = setInterval(function() {
nextPage();
nextDot();
}, 2000);
}
function stop() {
clearInterval(timer);
timer = null;
}
run();</script>
</body>
</html>
