本文目录一览：
- 1、Discuz X3.1 首页幻灯片JS文件是哪个？或者如何修改写标题的灰条的不透明度
- 2、js幻灯片广告切换代码
- 3、如何使用Angularjs制作幻灯片
- 4、关于前端html、js 的问题！为什么我写的幻灯片js没反应不能切换？
- 5、JS写幻灯片特效
- 6、js自动播放幻灯片函数
Discuz X3.1 首页幻灯片JS文件是哪个？或者如何修改写标题的灰条的不透明度
控制幻灯片js文件是static/js/ common_extra.js 标题灰条透明度是 .slideshow span.title{background:rgba(0,0,0,0.3);}把里面的0.3该成1就是不透明,0.3前面的0,0,0 表示黑顷悔色雀友正(rgb表示告饥的)
js幻灯片广告切换代码
js幻灯片广告切换代码如下操作。
1、下载到的压缩包，上传到网站根目录下。
2、解压出来，复制index.html里面的主要代码，插入到网站项目想要放置的位置。
3、对插入的代码，尺芹根据自己需求对文字以及图片做适当携芦的修改和替换，即可投入到自己网陵隐毕站中使用以及呈现。
如何使用Angularjs制作幻灯片
使用方法：利用 npm方式安装
//首先安装angularjsslider NPM
第一步（引入）：
//引入angularjsslider
第二步（参数配碰谨置）：
第备吵稿三步（插入标签）：
//代码中写的是引入的幻灯片的标签。
以上是制作幻灯片的方法仿孝。
关于前端html、js 的问题！为什么我写的幻灯片js没反应不能切换？
banner_nav_left.addEventListener('click',a);
function a(){
conter_width.style.left = -oimgw+'px'
} 对于点击事件修改为这样子，但是楼楼隐裤要旅吵知道一件事情，那就是这个方法不如img标签DOM操作的Element.setAttribute('src','图片地址')好用，拆携侍并且有些时候CSS不能够很完美的兼容-幻灯片js
JS写幻灯片特效
新建一个文件夹dome,
在文件下新建一个文件夹img 放入5张名称为1,2,3,4,5 格式为“.jpg”的图片文件。
在新建一个dome.html 文件 内容如下：
html
head
meta charset="UTF-8"/
埋埋title/title
style type="text/css"
*{margin: 0;padding: 0;}
#a1{
width: 600px;
height: 500px;
border: 10px silver solid;
animation:backgroundImg 5s infinite ;
-webkit-animation:backgroundImg 5s infinite;
}
@keyframes backgroundImg{
0%{background-color: #0000FF;}
25%{background-color: #0099FF;}
50%{background-color: #00FFFF;}
75%{background-color: #99FFFF;}
100%{background-color: #FFFFFF;}
}
@-webkit-keyframes backgroundImg{
0%{background-color: #0000FF;}
25%{background-color: #0099FF;}
50%{background-color: #00FFFF;}
75%{background-color: #99FFFF;}
100%{background-color: #FFFF00;}
}
#backImg{
width: 500px;
height: 490px;
/*border: 5px red solid;*/
margin-left:45px ;
z-index: 100;
background-size:100% 100%;
}
a:hover{
background-color:#0000FF;
border: 5px springgreen solid;
width: 20px;
}
a{
display: block;
z-index: ;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
color: beige;
font-weight: 300;
border-radius:50% ;
font-size: 2em;
background-color:#0099FF;
position: absolute;
top: 255px;
box-shadow: none;
}
#right{
left:580px;
}
span{
display: block;
width: 50px;
height: 10px;
background-color: #99FFFF;
float: right;
margin-left: 20px;
position: relative;
bottom: 50px;
right: 100px;
}
#show{
width: 200px;
height: 100px;
border: 1px red solid;
position: absolute;
bottom: 230px;
right: 150px;
background-size:100% 100% ;
}
/style
/head
body
div id="a1"
a id="left"轿液粗lt;/a
a id="right"gt;/a闭镇
div id="backImg"/div
div id="foot"/div
/div
script type="text/javascript"
var div=document.getElementById("a1");
var backImg=document.getElementById("backImg");
var a_left=document.getElementById("left");
var a_right=document.getElementById("right");
var i=0;
function backImage(){
i++;
backImg.style.backgroundImage="url(img/" +i+".jpg)";
setTimeout(backImage,7000);
if(i=5){
i=0;
}
}
backImage();
a_left.onclick=function(){
i--;
if(i=0||i5){
i=5;
}
backImg.style.backgroundImage="url(img/" +i+".jpg)";
}
a_right.onclick=function(){
i++;
if(i=0||i5){
i=1;
}
backImg.style.backgroundImage="url(img/" +i+".jpg)";
}
for (var j = 0; j 3; j++) {
var span=document.createElement("span");
span.id="span_"+j;
div.appendChild(span);
span.onmouseover=function(){
show(event);
}
}
function show(e) {
backImg.style.opacity="0.5";
var span = e.target;
var div = document.createElement("div");
div.id = "show";
span.parentNode.appendChild(div);
console.log(span.id);
if(span.id=="span_2"){
i-=1;
console.log(i);
if(i=0||i5){
i=5;
}
div.style.backgroundImage="url(img/" +i+".jpg)";
}else if(span.id=="span_1"){
div.style.backgroundImage="url(img/" +i+".jpg)";
}else if(span.id=="span_0"){
i+=1;
if(i=0||i5){
i=1;
}
div.style.backgroundImage="url(img/" +i+".jpg)";
}
span.onmouseout = function() {
backImg.style.opacity="initial";
this.parentNode.removeChild(div);
}
span.onclick=function(){
backImg.style.backgroundImage="url(img/" +i+".jpg)";
}
}
/script
/body
/html
js自动播放幻灯片函数
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""键乎
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
圆亮桥title无标题文档/title
style
*{ padding:0; margin:0;}
.hy-hdp { display:block; overflow:hidden;}
.hy-hdp .pic{ width:400px; height:320px; position:relative;}
img{ position:absolute; left:0; top:0;width:400px; height:320px;}
li{ list-style:none; width:20px; height:20px; color:#FFFFFF; background:red; line-height:20px; float:left;}-幻灯片js
/style
script src="橘猛"/script
script
$(document).ready(function(){
/* var $aImg=$("#abc .pic img");
var $aLi=$("#abc .num li");
hy.Init();
hy.m($aImg,$aLi,0);
$aImg.each(function(i,ele){
$(this).click(function(){
$aLi.css("background","red");
$aLi.eq(i).css({
"background" : "green"
});
});
});
$aLi.each(function(index,ele){
$(this).click(function(){
hy.m($aImg,$aLi,index);
});
});*/
$("#abc").hy(2);
$("#bbb").hy(0);
});
(function($,undefined){
$.fn.hy = function(o){
var $obj = $(this);
return new HY($obj,o);
}
var HY = function($obj,o){
var pp = {};
pp.T = null;
pp.ii = 0;
pp.img = $obj.find(".pic img")
pp.li = $obj.find(".num li");
pp.index = o;
m(pp);
pp.li.each(function(index,ele){
$(this).click(function(){
clearTimeout(pp.T);
pp.index = index;
m(pp);
});
});
}
function m(o){
o.li.css("background","red");
o.li.eq(o.index).css("background","green");
o.img.each(function(index,ele){
if(index==o.index){
$(this).css({
"zIndex":2,
"opacity" : 0
});
}else if(index==o.ii){
$(this).css("zIndex",1);
}else{
$(this).css("zIndex",0);
}
});
o.img.eq(o.index).animate(
{
"opacity" : 1
},
1000
);
o.ii = o.index;
o.index = o.index+1;
o.index = o.index=o.li.length?0:o.index;
o.T = setTimeout(function(){
m(o);
},2000);
}
})(jQuery)
/script
/head
body
!--div id="abc" class="hy-hdp" style="float:left; margin:0 10px;"
div class="pic"
img src="images/1.jpg" /
img src="images/2.jpg" /
img src="images/3.jpg" /
img src="images/4.jpg" /
img src="images/5.jpg" /
img src="images/6.jpg" /
/div
ul class="num"
li1/li
li2/li
li3/li
li4/li
li5/li
li6/li
/ul
/div--
div id="bbb" class="hy-hdp style="float:left; margin:0 10px;"
div class="pic"
img src="images/1.jpg" /
img src="images/2.jpg" /
img src="images/3.jpg" /
img src="images/4.jpg" /
img src="images/5.jpg" /
img src="images/6.jpg" /
/div
ul class="num"
li1/li
li2/li
li3/li
li4/li
li5/li
li6/li
/ul
/div
/body
/html
