新建一个文件夹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幻灯片告白切换代码js幻灯片告白切换代码如下操做。
1、下载到的压缩包，上传到网站根目次下。
2、解压出来，复造index.html里面的次要代码，插进 到网站项目想要放置的位置。
3、对插进 的代码，尺芹根据 本身需求对文字以及图片做恰当携芦的修改和替代，即可投进 到本身网陵隐毕站中利用以及闪现 。
网站常用的一种JS幻灯片代码问题那个写得太复杂了，我发你一个本身写得
!doctype html
html lang="en"
head
title图片切换/title
style
li{
list-style-type:none;
}
#ad{
width:524px;
text-align:center;
}
#ad_screen{
width:524px;
height:190px;
float:left;
}
.ad_page{
float:left;
margin-top:-30px;
margin-left:210px;
}
.ad_page li{
float:left;
background-color:#999;
width:20px;
height:20px;
margin-left:3px;
}
.ad_page li a{
color:#fff;
}
/style
script
function changead(num,refre)
{
if(num == 5)
num = 1;
var sc = document.getElementById("screens");
sc.src="images/ad-0" + num+ ".jpg";
}
/script
/head
body
div class="middle"神埋搜
div id="ad"
div id="ad_screen"
img id="screens" src="images/ad-01.jpg" width="524" height="190"
/div
ul class="ad_page"
lia href="#" id="p1" onclick="changead(1);"1/a/li
游历lia href="#" id="p2" onclick="changead(2);"2/a/li
lia href="#" id="p3" onclick="changead(3);"3/a/li
lia href="#" id="p4" onclick="changead(4);"4/a/li
/ul
/div
/div
/body
/html
style里面是款式，图片途径因为我的图片是持续的液悉1，2，3，4，所以就能够间接如许写办法
