JS写幻灯片特效

JavaScript023

JS写幻灯片特效,第1张

新建一个文件夹dome,

在文件下新建一个文件夹img 放入5张名称为1,2,3,4,5 格式为“.jpg”的图片文件。

在新建一个dome.html 文件 内容如下：

<html>

<head>

<meta charset="UTF-8"/>

<title></title>

<style type="text/css">

*{margin: 0padding: 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||i>5){

i=5

}

backImg.style.backgroundImage="url(img/" +i+".jpg)"

}

a_right.onclick=function(){

i++

if(i<=0||i>5){

i=1

}

backImg.style.backgroundImage="url(img/" +i+".jpg)"

}

for (var j = 0j <3j++) {

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||i>5){

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||i>5){

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幻灯片广告切换代码如下操作。

1、下载到的压缩包，上传到网站根目录下。

2、解压出来，复制index.html里面的主要代码，插入到网站项目想要放置的位置。

3、对插入的代码，根据自己需求对文字以及图片做适当的修改和替换，即可投入到自己网站中使用以及呈现。