大概思路:
1. 先固定好需要轮播图片的排版,长宽和位置
利用position:realative和position:absloute实现图片横向排版,利用overflow:hidden,属性来隐藏掉其他图片
2. 然后设置并绑定左按钮/右按钮以及事件(通过动态设置left的值)
如果是一张一张进行切换就用控制他的left值来进行计算,当到最后一张让left值变为0,重新开始
淡入淡出轮播图就是控制他的图片层叠关系。
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>轮播图 demo</title>
<style>
img {
width: 650px;
height: 320px;
}
</style>
</head>
<body>
<div id="myPicbox">
<a href="#"><img src="img/1.jpg" alt=""></a>
<a href="#"><img src="img/2.jpg" alt=""></a>
<a href="#"><img src="img/3.jpg" alt=""></a>
<a href="#"><img src="img/4.jpg" alt=""></a>
</div>
<script src="jquery.js"></script>
<script src="main.js"></script>
<script type="text/javascript">
var myPicbox = new dPicbox("myPicbox");
myPicbox.init(650, 320);
</script>
</body>
</html>
JS:
function dPicbox(boxid) {
this.boxEle = $("#" + boxid);
this.innerEle;
this.width;
this.height;
this.AllPicNum;
this.leftArrow;
this.rightArrow;
this.nowPic = 1;
this.Timer;
this.init = function(width, height) {
this.width = width;
this.height = height;
//overflow只是显示当前图片,隐藏其他图片
//position:realative和position:absloute实现图片横向排版
this.boxEle.css({ width: width + "px", height: height + "px", position: "relative", overflow: "hidden" });
this.AllPicNum = this.boxEle.children().length; //这里获取a元素的长度
//这里创建新的div:inner来包裹里面的a元素,为什么要包裹,因为下面要设置点击事件
this.boxEle.wrapInner("<div id='inner'></div>");
this.innerEle = $("#inner");
this.innerEle.css({ width: "9999px", position: "absolute", left: "-" + width + "px", top: "0", height: height + "px" });
//这里获取第一个元素和最后一个的元素 1234 ---》 41234
var firstEle = this.innerEle.find("a").first().clone();
var lastEle = this.innerEle.find("a").last().clone()
this.innerEle.prepend(lastEle);
this.innerEle.append(firstEle);
//设置所有图片都是向左浮动
this.innerEle.find("a").css({ float: "left" });
//在inner里面 添加两个按钮:左按钮和右按钮
this.boxEle.append("<div id='ctl'><span id='leftArrow'><</span><span id='rightArrow'>></span></div>");
this.leftArrow = $("#leftArrow");
this.rightArrow = $("#rightArrow");
$("#ctl span").css({ width: "40px", height: "60px", background: "rgb(0,0,0)", position: "absolute", top: "50%", marginTop: "-30px", fontSize: "40px", color: "#ffffff", lineHeight: "60px", textAlign: "center", opacity: "0.4", cursor: "pointer" });
this.leftArrow.css({ left: "5px" });
this.rightArrow.css({ right: "5px" });
//在这里添加左按钮绑定事件和右按钮绑定事件
this.bind();
this.autoPlay();
};
//左按钮绑定事件和右按钮绑定事件
this.bind = function() {
//鼠标移入时,左按钮透明度
$("#ctl span").on("mouseenter", function() {
$(this).css({ opacity: "0.8" });
});
//鼠标离开时,右按钮透明度
$("#ctl span").on("mouseleave", function() {
$(this).css({ opacity: "0.4" });
});
var that = this;
//鼠标点击事件
this.leftArrow.on("click", function() { that.prePic(); }); //向左移动,上一张图片
this.rightArrow.on("click", function() { that.nextPic(); }); //向右移动,下一张图片
//鼠标移入时,暂停轮播
this.boxEle.on("mouseenter", function() {
clearInterval(that.Timer);
});
//鼠标离开时,自动轮播
this.boxEle.on("mouseleave", function() {
that.autoPlay();
});
};
this.autoPlay = function() {
that = this;
this.Timer = setInterval(function() {
that.nextPic();
}, 500);
};
//下一张图片
this.nextPic = function() {
//当前图片位置在最后一张的时候
if (this.nowPic == this.AllPicNum) {
//瞬间跳回到第一个位置的图片
this.innerEle.css({ left: "0" });
this.nowPic = 1;
} else {
this.nowPic++;
}
this.gotoPic();
};
//上一张图片
this.prePic = function() {
//当前图片位置在第一张的时候
if (this.nowPic == 1) {
//瞬间跳回到最后一个位置的图片
this.innerEle.css({ left: "-" + (this.AllPicNum + 1) * this.width + "px" });
this.nowPic = this.AllPicNum;
} else {
this.nowPic--;
}
this.gotoPic();
};
this.gotoPic = function() {
var nowLeft = "-" + (this.nowPic * this.width) + "px";
this.innerEle.animate({ left: nowLeft });
};
}