幻灯片js（幻灯片结尾的致谢图片）

本文目录一览：

• 1、Discuz X3.1 首页幻灯片js文件是哪个？或者如何修改写标题的灰条的不透明度
• 2、js幻灯片广告切换代码
• 3、js自动播放幻灯片函数
• 4、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、对插入的代码，根据自己需求对文字以及图片做适当的修改和替换，即可投入到自己网站中使用以及呈现。

js自动播放幻灯片函数

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; " /

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;}

/style

script src="https://www.wanyucheng.com/news/66/28116.html"/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="https://www.wanyucheng.com/news/66/images/1.jpg" /

img src="https://www.wanyucheng.com/news/66/images/2.jpg" /

img src="https://www.wanyucheng.com/news/66/images/3.jpg" /

img src="https://www.wanyucheng.com/news/66/images/4.jpg" /

img src="https://www.wanyucheng.com/news/66/images/5.jpg" /

img src="https://www.wanyucheng.com/news/66/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="https://www.wanyucheng.com/news/66/images/1.jpg" /

img src="https://www.wanyucheng.com/news/66/images/2.jpg" /

img src="https://www.wanyucheng.com/news/66/images/3.jpg" /

img src="https://www.wanyucheng.com/news/66/images/4.jpg" /

img src="https://www.wanyucheng.com/news/66/images/5.jpg" /

img src="https://www.wanyucheng.com/news/66/images/6.jpg" /

/div

ul class="num"

li1/li

li2/li

li3/li

li4/li

li5/li

li6/li

/ul

/div

/body

/html

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和幻灯片结尾的致谢图片的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。