<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
#page1 {width: 70%;height: 437px;margin: 0 auto;margin-bottom: 130px;}
</style>
<body>
<div id="page1" class="page Slide"></div>
</body>
</html>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="new_file.js"></script>
<script type="text/javascript">
// 创建一个对象,DigsurGallery；
DigsurGallery = {};
// 为对象 DigsurGallery，创造一个属性 Rolling;
DigsurGallery.Rolling = function() {
// 定义变量 speed，作用为速度;
this.speed = 1;
// 定义变量 timer ，作用为定时器名字;
this.timer = null;
}
// initConfig 是对象下的一个方法，需要传入三个参数,盒子的id,数组的名字，是否需要滚动，是否需要点击按钮;
DigsurGallery.Rolling.prototype.initConfig = function(Container, picArray, HasSlider, HasButton) {
// 声明一个变量接收 Container;
var ContainerName = $("#" + Container);
// 声明变量 oBox，创建一个div，id名称为"DigsurFallery-Rolling-box";
var oBox = $("<div id='DigsurFallery-Rolling-box'></div>");
// 将 oBox 拼接到oName中;
ContainerName.append(oBox);
// 为 DigsurFallery-Rolling-box 设置样式;
$("#DigsurFallery-Rolling-box").css({
"position": "relative",
"width": "100%",
"overflow": "hidden",
"top": "20%",
"border-radius": "5px",
"-moz-user-select": "none",
"-webkit-user-select": "none",
"-ms-user-select": "none",
"user-select": "none",
})
// 声明变量 oBox，创建一个div，id名称为"DigsurFallery-Rolling-content";
var oContent = $("<div id='DigsurFallery-Rolling-content'></div>");
// 将 oContent 拼接到 oBox中;
oBox.append(oContent);
// 为 DigsurFallery-Rolling-content 设置样式;
$("#DigsurFallery-Rolling-content").css({
"position": "absolute",
"left": 0,
"overflow": "hidden",
"height": "100%",
})
// 循环创建 img标签，将picArray中的值传入每一个img的src中，拼接到 oContent中;
for(var i = 0; i < picArray.length; i++) {
var oimg = $("<img />")
$(oimg).attr('src', picArray[i]);
oContent.append(oimg);
}
// 为 img加样式 ;
$("#DigsurFallery-Rolling-box img").css({
"float": "left",
"height": "90%",
"box-shadow": "0px 0px 11px #211f1f",
"-webkit-box-shadow": "0px 0px 11px #211f1f",
"-moz-box-shadow": "0px 0px 11px #211f1f",
"border-radius": "5px",
"margin-top":"5px",
})
// 为 DigsurFallery-Rolling-box 设置高度，高度为'window'宽度的35%;
$("#DigsurFallery-Rolling-box").css("height", $(window).width() * 0.35);
// 声明 BoxoffsetWidth，接收 DigsurFallery-Rolling-box的可视宽度；
var BoxoffsetWidth = $("#DigsurFallery-Rolling-box")[0].offsetWidth;
// 为DigsurFallery-Rolling-box下的img标签设置 margin-right，值为： DigsurFallery-Rolling-box的可视宽度的3%;
$("#DigsurFallery-Rolling-box img").css("margin-right", BoxoffsetWidth / 100 * 3);
// 声明变量，获取 DigsurFallery-Rolling-content下img的margin-right的 值;
var ImgMarginRight = parseFloat($("#DigsurFallery-Rolling-content img").css('marginRight'));
// 设置 DigsurFallery-Rolling-conten 下的img的宽度 为 DigsurFallery-Rolling-box的可视宽度;
$("#DigsurFallery-Rolling-content img").css("width", BoxoffsetWidth);
// 设置 DigsurFallery-Rolling-content 的宽度，值为 picArray的个数 乘 （DigsurFallery-Rolling-box的可视宽度+ DigsurFallery-Rolling-content下img的margin-right的 值）;
$("#DigsurFallery-Rolling-content").css("width", picArray.length * (BoxoffsetWidth + ImgMarginRight));
// 设置 speed的速度为1;
this.speed = 1;
console.log($("#DigsurFallery-Rolling-content").offset().left);
console.log(this.speed);
console.log((picArray.length - 1) * (oimg[0].offsetWidth + ImgMarginRight) * -1);
// 判断 HasSlider 的值;
if(HasSlider == true) {
// 声明 _this = this,作用为指向 DigsurGallery.Rolling ;
var _this = this;
// 创造函数 move ;
function move() {
// 创建定时器timer;
_this.timer = setInterval(function() {
console.log($("#DigsurFallery-Rolling-content").css('left'));
console.log($("#DigsurFallery-Rolling-content").offset().left);
console.log(_this.speed);
console.log((picArray.length - 1) * (oimg[0].offsetWidth + ImgMarginRight) * -1);
// 设置 DigsurFallery-Rolling-content 的left 为DigsurFallery-Rolling-content的做偏移量 - speed的值；
$("#DigsurFallery-Rolling-content").css("left", $("#DigsurFallery-Rolling-content").offset().left - _this.speed);
// 做判断，如果 DigsurFallery-Rolling-content 的左偏移量 小于picArray的个数-1乘以图片的可视宽度加上marginright的值 在乘以-1的值;
if($("#DigsurFallery-Rolling-content").offset().left < (picArray.length - 1) * (oimg[0].offsetWidth + ImgMarginRight) * -1) {
// DigsurFallery-Rolling-content 的left为0;
$("#DigsurFallery-Rolling-content").css("left", 0);
}
}, 1000)
}
// 启动定时器;
move();
// 鼠标放上或者离开 容器 'DigsurFallery-Rolling-box'时清除或打开定时器;
$("#DigsurFallery-Rolling-box").mouseenter(function() { clearInterval(_this.timer); }).mouseleave(function() { move(); });
}
// 判断 HasButton的值;
if(HasButton == true) {
// 声明 oRetreat 创建 id为 'retreat' 的div;
var oRetreat = $("<div id='retreat'></div>");
// 将 oRectreat 拼接到oBox中;
oBox.append(oRetreat);
// 声明 RetreatSpan,创建 span标签，内容为 < ,后退;
var RetreatSpan = $("<span> < </span>")
// 将RetreatSpan拼接到oRetreat中;
oRetreat.append(RetreatSpan);
// 声明oAdvance,创建 id为'advance'的div;
var oAdvance = $("<div id='advance'></div>");
// 将oAdvance拼接到oBox中;
oBox.append(oAdvance);
// 声明AdvanceSpan,创建 span标签，内容为 > ,前进;
var AdvanceSpan = $("<span> > </span>")
// 将AdvanceSpan拼接到oAdvance中;
oAdvance.append(AdvanceSpan);
// retreat 的点击函数;
$("#retreat").click(function() {
// 声明index，获取 DigsurFallery-Rolling-content 的做偏移量 除以 图片的可视宽度的负值;
var index = parseInt($("#DigsurFallery-Rolling-content").offset().left / -oimg[0].offsetWidth);
// index 的值减1;
index--;
// 判断 如果index的值小于0的;
if(index < 0) {
// index 的值 等于 picArrat 的长度减去1;
index = picArray.length - 1;
}
// 声明 temp 等于 图片的可视宽度加上图片的marginright的值 乘 index的 负值 ;
var temp = (oimg[0].offsetWidth + ImgMarginRight) * index * -1;
// 设置 DigsurFallery-Rolling-content 的left值为 temp的值
$("#DigsurFallery-Rolling-content").css("left", temp);
});
// advance 的点击函数
$("#advance").click(function() {
// 声明index，获取 DigsurFallery-Rolling-content 的做偏移量 除以 图片的可视宽度的负值;
var index = parseInt($("#DigsurFallery-Rolling-content").offset().left / -oimg[0].offsetWidth);
// index 的值加1
index++;
// 判断 如果index的值大于 picArray的长度;
if(index >= picArray.length) {
// index 的值为 0;
index = 0;
}
// 声明 temp 等于 图片的可视宽度加上图片的marginright的值 乘 index的 负值
var temp = (oimg[0].offsetWidth + ImgMarginRight) * index * -1;
// 设置 DigsurFallery-Rolling-content 的left值为 temp的值
$("#DigsurFallery-Rolling-content").css("left", temp);
});
}
// 设置点击按钮的大小，需要传入三个值，分别为 最小值 min，和最大值max 和 中间值mid
$.fn.fontFlex = function(min, max, mid) {
// $this 指向调用的this
var $this = this;
// 窗口大小改变时函数
$(window).resize(function() {
// 为 retreat 设置样式
$("#retreat").css({
"width": "7%",
"height": $("#retreat").width() * 2.3,
"position": "absolute",
"left": 0,
"top": "30%",
"background-color": "rgba(0, 0, 0, 0.3)",
"text-align": "center",
"color": "rgba(255,255,255,0.5)",
"cursor": "pointer",
}).hover(function() { $("#retreat").css("color", "rgba(255,255,255,1)") }, function() { $("#retreat").css("color", "rgba(255,255,255,0.5)") });
// 为 retreat 下的span标签设置 line-height
$("#retreat span").css("line-height", $("#retreat").height() + "px");
// 为 advance 设置样式
$("#advance").css({
"width": "7%",
"height": $("#advance").width() * 2.3,
"position": "absolute",
"right": 0,
"top": "30%",
"background-color": "rgba(0, 0, 0, 0.3)",
"text-align": "center",
"color": "rgba(255,255,255,0.5)",
"cursor": "pointer",
}).hover(function() { $("#advance").css("color", "rgba(255,255,255,1)") }, function() { $("#advance").css("color", "rgba(255,255,255,0.5)") });
// 为 advance 下的span标签设置 line-height
$("#advance span").css("line-height", $("#advance").height() + "px");
// 声明size，用window的宽度 除以 mid
var size = window.innerWidth / mid;
// 判断 如果 size的值 小于 min的值
if(size < min) {
// size 的值 等于 min的值
size = min;
}
// 判断 如果size的值大于 max的值
if(size > max) {
// size的值等于 max的值
size = max;
}
// 为调用的的标签设置 'font-size'
$this.css("font-size", size + "px");
// 触发函数的时候执行 resize事件
}).trigger('resize');
};
$("#retreat span").fontFlex(23, 60, 20);
$("#advance span").fontFlex(23, 60, 20);
}
var Rotate = new DigsurGallery.Rolling();
var arr = ["Image/1.jpg", "Image/2.jpg", "Image/3.jpg", "Image/4.jpg", "Image/5.jpg", "Image/6.jpg", "Image/7.jpg"];
Rotate.initConfig('page1', arr, true, true);
</script>
轮播倒着走去了啊，点击前进也没有用了，谢谢，在线等
