代码拉取完成，页面将自动刷新
gitee上次的文件统一目录下，为什么图片js动态添加的就不显示，css引入或直接写img标签嵌入的就可以，而且资源文件打开莫名其妙的多出了tree/master这么两层是什么鬼
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
liu
成员
为什么图片js动态添加的就不显示
怎么添加的？给个示例代码？
这个时本地跑起来的样子Factory.prototype.shufflingFigure=function(obj){
if(obj.id=="" || obj.id==null || obj.id==undefined || !obj.id){
return;
};
if(obj.Data=="" || obj.Data==null || obj.Data==undefined || !obj.Data){
return;
};
var index=0,n=0;
var type=obj.type || "cross";
// 外层div
var rotation=document.getElementById(obj.id);
var MyWidth=rotation.clientWidth;
var MyHeight=rotation.clientHeight;
rotation.style.overflow="hidden";
rotation.style.position="relative";
//只有一张图片时不轮播
if(obj.Data.length==1){
var IMGS=document.createElement("img");
IMGS.style.width=MyWidth+"px";
IMGS.style.height=MyHeight+"px";
IMGS.src=obj.Data[0].img;
IMGS.onclick="navigateTo('"+obj.Data[0].url+"')";
rotation.appendChild(IMGS);
return;
};
//创建轮播图盒子
var Img_Shuffling=document.createElement("ul");
var ImgHtml="";
if(type=="cross"){//横向轮播图
ImgHtml+="<li style='float:left;cursor:pointer;width:"+MyWidth+"px;height:"+MyHeight+"px;list-style:none;' onclick='navigateTo(\""+obj.Data[obj.Data.length-1].url+"\",\""+obj.Data[obj.Data.length-1].target+"\")'><img src=\""+obj.Data[obj.Data.length-1].img+"\" style='width:"+(obj.Data[obj.Data.length-1].width || "auto")+";height:"+(obj.Data[obj.Data.length-1].height || "auto")+"' alt='暂无图片'/></li>";
for(var i=0;i<obj.Data.length;i++){
ImgHtml+="<li style='float:left;cursor:pointer;width:"+MyWidth+"px;height:"+MyHeight+"px;list-style:none;' onclick='navigateTo(\""+obj.Data[i].url+"\",\""+obj.Data[i].target+"\")'><img src=\""+obj.Data[i].img+"\" style='width:"+(obj.Data[i].width || "auto")+";height:"+(obj.Data[i].height || "auto")+"' alt='暂无图片'/></li>";
};
ImgHtml+="<li style='float:left;cursor:pointer;width:"+MyWidth+"px;height:"+MyHeight+"px;list-style:none;' onclick='navigateTo(\""+obj.Data[0].url+"\",\""+obj.Data[0].target+"\")'><img src=\""+obj.Data[0].img+"\" style='width:"+(obj.Data[0].width || "auto")+";height:"+(obj.Data[0].height || "auto")+"' alt='暂无图片'/></li>";
Img_Shuffling.style.width = MyWidth * (obj.Data.length + 2) + "px";
Img_Shuffling.style.height = MyHeight + "px";
Img_Shuffling.style.left = "-" + MyWidth + "px";
};
if(type=="vertical"){
ImgHtml+="<li style='cursor:pointer;width:"+MyWidth+"px;height:"+MyHeight+"px;list-style:none;' onclick='navigateTo(\""+obj.Data[obj.Data.length-1].url+"\",\""+obj.Data[obj.Data.length-1].target+"\")'><img src=\""+obj.Data[obj.Data.length-1].img+"\" style='width:"+(obj.Data[obj.Data.length-1].width || "auto")+";height:"+(obj.Data[obj.Data.length-1].height || "auto")+"' alt='暂无图片'/></li>";
for(var i=0;i<obj.Data.length;i++){
ImgHtml+="<li style='cursor:pointer;width:"+MyWidth+"px;height:"+MyHeight+"px;list-style:none;' onclick='navigateTo(\""+obj.Data[i].url+"\",\""+obj.Data[i].target+"\")'><img src=\""+obj.Data[i].img+"\" style='width:"+(obj.Data[i].width || "auto")+";height:"+(obj.Data[i].height || "auto")+"' alt='暂无图片'/></li>";
};
ImgHtml+="<li style='cursor:pointer;width:"+MyWidth+"px;height:"+MyHeight+"px;list-style:none;' onclick='navigateTo(\""+obj.Data[0].url+"\",\""+obj.Data[0].target+"\")'><img src=\""+obj.Data[0].img+"\" style='width:"+(obj.Data[0].width || "auto")+";height:"+(obj.Data[0].height || "auto")+"' alt='暂无图片'/></li>";
Img_Shuffling.style.width = MyWidth + "px";
Img_Shuffling.style.height = MyHeight * (obj.Data.length + 2)+ "px";
Img_Shuffling.style.top = "-" + MyHeight + "px";
};
Img_Shuffling.style.position = "absolute";
Img_Shuffling.id = obj.id+"1";
Img_Shuffling.style.padding = 0;
Img_Shuffling.style.margin = 0;
Img_Shuffling.innerHTML=ImgHtml;
//下方带颜色的按钮
var Ol=document.createElement("ol");
Ol.style.position="absolute";
if(obj.point.top){
Ol.style.top=obj.point.top;
};
if(obj.point.bottom){
Ol.style.bottom=obj.point.bottom;
};
if(obj.point.left){
Ol.style.left=obj.point.left;
};
if(obj.point.right){
Ol.style.right=obj.point.right;
};
if(!obj.point.right && !obj.point.left){
Ol.style.left="50%";
};
if(!obj.point.top && !obj.point.bottom){
Ol.style.bottom="16px";
};
Ol.style.transform="translateX(-50%)";
Ol.style.zIndex="2";
Ol.id=obj.id+"2";
var olHtml="";
for(var i=0;i<obj.Data.length;i++){
olHtml+="<li style='float:left;cursor:pointer;margin-right:10px;list-style:none;width:" + Math.round(MyWidth * 0.013) + "px;height:" + Math.round(MyWidth * 0.013) + "px;background-color:"+(obj.point.default || "#ffffff")+";color:"+(obj.point.color || "#000000")+";text-align:center;line-height:" + Math.round(MyWidth * 0.013) + "px;transition:all .5s linear;"+(obj.point.shape=="square"?"":"border-radius: 50%;")+"font-size:"+(obj.point.size || "16px")+"' data='"+i+"'>"+(obj.point.font==true?(i+1):"")+"</li>";
};
Ol.innerHTML=olHtml;
if(obj.point.show==true){
Ol.style.display="block";
}else{
Ol.style.display="none";
};
//左边箭头
var button1 = document.createElement("div");
button1.className = "leftBtnLbt";
button1.style.width = Math.round(MyWidth * 0.016) + "px";
button1.style.height = Math.round(MyHeight * 0.136) + "px";
button1.style.position = "absolute";
button1.style.top = "50%";
button1.style.left = "32px";
button1.style.transform = "translateY(-50%)";
button1.innerHTML = "<";
button1.style.backgroundColor = "rgba(190,190,190,0.5)";
button1.style.lineHeight = Math.round(MyHeight * 0.136) + "px";
button1.style.fontSize = Math.round(MyWidth * 0.016) + "px";
button1.style.color = obj.point.selectedText || "#ffffff";
button1.style.cursor = "pointer";
button1.style.textAlign = "center";
if(obj.arrow==true){
button1.style.display = "block";
}else{
button1.style.display = "none";
};
if(type=="vertical"){
button1.style.display = "none";
};
//右边箭头
var button2 = document.createElement("div");
button2.className = "rightBtnLbt";
button2.style.width = Math.round(MyWidth * 0.016) + "px";
button2.style.height = Math.round(MyHeight * 0.136) + "px";
button2.style.position = "absolute";
button2.style.top = "50%";
button2.style.right = "32px";
button2.style.transform = "translateY(-50%)";
button2.innerHTML = ">";
button2.style.backgroundColor = "rgba(190,190,190,0.5)";
button2.style.lineHeight = Math.round(MyHeight * 0.136) + "px";
button2.style.textAlign = "center";
button2.style.fontSize = Math.round(MyWidth * 0.016) + "px";
button2.style.color = obj.point.selectedText || "#ffffff";
button2.style.cursor = "pointer";
if(obj.arrow==true){
button2.style.display = "block";
}else{
button2.style.display = "none";
};
if(type=="vertical"){
button2.style.display = "none";
};
// 在页面上展示
rotation.appendChild(Img_Shuffling);
rotation.appendChild(Ol);
rotation.appendChild(button1);
rotation.appendChild(button2);
//处理动画
var rotateFather=document.getElementById(obj.id+"1");
var lis=rotateFather.children;
var oli=document.getElementById(obj.id+"2").children;
var leftBtn=document.getElementsByClassName("leftBtnLbt")[0];
var rightBtn=document.getElementsByClassName("rightBtnLbt")[0];
//下方按钮选中样式赋值
oli[index].style.backgroundColor=obj.point.selected || "#00ff00";
oli[index].style.color=obj.point.selectedText || "#ffffff";
//清除下方按钮选中样式
var clearColor = function() {
for (var i=0; i<oli.length;i++) {
oli[index].style.backgroundColor = obj.point.default || "#ffffff";
oli[index].style.color=obj.point.color || "#333333";
};
};
//右边点击
rightBtn.onclick = function() {
clearColor();
index++;
if (index > obj.Data.length - 1) {
index = 0;
};
oli[index].style.backgroundColor=obj.point.selected || "#00ff00";
oli[index].style.color=obj.point.selectedText || "#ffffff";
n++;
if(type=="vertical"){
rotateFather.style.transform = "translateY(" + (n * -MyHeight) + "px)";
}else{
rotateFather.style.transform = "translateX(" + (n * -MyWidth) + "px)";
}
rotateFather.style.transition = "all .5s linear";
setTimeout(function() {
if (n >= obj.Data.length) {
n = 0;
if(type=="vertical"){
rotateFather.style.transform = "translateY(0px)";
}else{
rotateFather.style.transform = "translateX(0px)";
};
rotateFather.style.transition = "all 0s linear";
};
}, 500);
};
//左边点击
leftBtn.onclick = function() {
clearColor();
index--;
if (index < 0) {
index = obj.Data.length - 1;
};
oli[index].style.backgroundColor=obj.point.selected || "#00ff00";
oli[index].style.color=obj.point.selectedText || "#ffffff";
n--;
if(type=="vertical"){
rotateFather.style.transform = "translateY(" + (n * -MyHeight) + "px)";
}else{
rotateFather.style.transform = "translateX(" + (n * -MyWidth) + "px)";
};
rotateFather.style.transition = "all .5s linear";
setTimeout(function(){
if(n<0){
n=obj.Data.length-1;
if(type=="vertical"){
rotateFather.style.transform = "translateY(" + (n * -MyHeight) + "px)";
}else{
rotateFather.style.transform = "translateX(" + (n * -MyWidth) + "px)";
};
rotateFather.style.transition = "all 0s linear";
};
},500)
};
//右边点击定时器 1s一次
var timer = setInterval(function() {
rightBtn.click();
}, (obj.Time || 5000));
//进入轮播停止定时器
rotation.onmouseenter = function() {
clearInterval(timer);
};
//离开轮播开启定时器
rotation.onmouseleave = function() {
timer = setInterval(function() {
rightBtn.click();
}, (obj.Time || 5000));
};
//移动下面的小li显示对于的图片
for (var i = 0; i < oli.length; i++) {
oli[i].onmouseenter=function(){
oli[index].style.backgroundColor = obj.point.default || "#ffffff";
oli[index].style.color = obj.point.color || "#000000";
this.style.backgroundColor=obj.point.selected || "#00ff00";
this.style.color=obj.point.selectedText || "#ffffff";
index=Number(this.getAttribute("data"));
n=index;
if(type=="vertical"){
rotateFather.style.transform = "translateY(" + (n * -MyHeight) + "px)";
}else{
rotateFather.style.transform = "translateX(" + (n * -MyWidth) + "px)";
};
rotateFather.style.transition = "all 0.5s linear";
setTimeout(function() {
if (n >= obj.Data.length) {
n = 0;
if(type=="vertical"){
rotateFather.style.transform = "translateY(0px)";
}else{
rotateFather.style.transform = "translateX(0px)";
};
rotateFather.style.transition = "all 0s linear";
};
}, 500);
};
};
};
封装的轮播图
Query.shufflingFigure({
id:"CarouselMap",
type:"cross",
Data:[{
img:"./Resource/imgs/index/banner-1.jpg",
url:"",
width:"100%"
},{
img:"./Resource/imgs/index/banner-2.jpg",
url:"",
width:"100%"
},{
img:"./Resource/imgs/index/banner-3.jpg",
url:"",
width:"100%"
},{
img:"./Resource/imgs/index/banner-4.jpg",
url:"",
width:"100%"
}],
Time:12000,
point:{
show:false
}
});
这个是通过JS去创建的轮播图
而且本地运行时可以访问到的，但是gitpage上传上去就是访问不到
你的路径写错了，/Index/ 里的 i 是大写 I，你用了小写 i。
http://http_wang-sx.gitee.io/pc/Resource/imgs/index/banner-1.jpg
http://http_wang-sx.gitee.io/pc/Resource/imgs/Index/banner-1.jpg
你对比其它能正常加载的图片的路径就能发现区别，例如：
http://http_wang-sx.gitee.io/pc/Resource/imgs/Index/new.jpeg
里面的 Index 就是大写 I。
登录 后才可以发表评论
是的，部署上去就没有图片了