js实现幻灯片效果代码(html幻灯片效果代码)
admin 发布:2022-12-19 17:50 105
本篇文章给大家谈谈js实现幻灯片效果代码,以及html幻灯片效果代码对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。
本文目录一览:
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; charset=utf-8" /
titleJavascript图片幻灯效果/title
style type="text/css" media="all"
.d1{width:443px;height:auto;overflow:hidden;border:#666666 2px solid;background-color:#000000;position:relative;}
.loading{width:443px;border:#666666 2px solid;background-color:#000000;color:#FFCC00;font-size:12px;height:179px;text-align:center;padding-top:30px;font-family:Verdana, Arial, Helvetica, sans-serif;font-weight:bold;}
.d2{width:100%;height:209px;overflow:hidden;}
.num_list{position:absolute;width:100%;left:0px;bottom:-1px;background-color:#000000;color:#FFFFFF;font-size:12px;padding:4px 0px;height:20px;overflow:hidden;}
.num_list span{display:inline-block;height:16px;padding-left:6px;}
img{border:0px;}
ul{display:none;}
.button{position:absolute; z-index:1000; right:0px; bottom:2px; font-size:13px; font-weight:bold; font-family:Arial, Helvetica, sans-serif;}
.b1,.b2{background-color:#666666;display:block;float:left;padding:2px 6px;margin-right:3px;color:#FFFFFF;text-decoration:none;cursor:pointer;}
.b2{color:#FFCC33;background-color:#FF6633;}
/style
script language="javascript" type="text/javascript"
//主函数
var s=function(){
var interv=2000; //切换时间
var interv2=10; //切换速速
var opac1=80; //文字背景的透明度
var source="fade_focus" //图片容器的id名称
//获取对象
function getTag(tag,obj){if(obj==null){return document.getElementsByTagName(tag)}else{return obj.getElementsByTagName(tag)}}
function getid(id){return document.getElementById(id)};
var opac=0,j=0,t=63,num,scton=0,timer,timer2,timer3;var id=getid(source);id.removeChild(getTag("div",id)[0]);var li=getTag("li",id);var div=document.createElement("div");var title=document.createElement("div");var span=document.createElement("span");var button=document.createElement("div");button.className="button";for(var i=0;ili.length;i++){var a=document.createElement("a");a.innerHTML=i+1;a.onclick=function(){clearTimeout(timer);clearTimeout(timer2);clearTimeout(timer3);j=parseInt(this.innerHTML)-1;scton=0;t=63;opac=0;fadeon();};a.className="b1";a.onmouseover=function(){this.className="b2"};a.onmouseout=function(){this.className="b1";sc(j)};button.appendChild(a);}
//控制图层透明度
function alpha(obj,n){if(document.all){obj.style.filter="alpha(opacity="+n+")";}else{obj.style.opacity=(n/100);}}
//控制焦点按钮
function sc(n){for(var i=0;ili.length;i++){button.childNodes[i].className="b1"};button.childNodes[n].className="b2";}
title.className="num_list";title.appendChild(span);alpha(title,opac1);id.className="d1";div.className="d2";id.appendChild(div);id.appendChild(title);id.appendChild(button);
//渐显
var fadeon=function(){opac+=5;div.innerHTML=li[j].innerHTML;span.innerHTML=getTag("img",li[j])[0].alt;alpha(div,opac);if(scton==0){sc(j);num=-2;scrolltxt();scton=1};if(opac100){timer=setTimeout(fadeon,interv2)}else{timer2=setTimeout(fadeout,interv);};}
//渐隐
var fadeout=function(){opac-=5;div.innerHTML=li[j].innerHTML;alpha(div,opac);if(scton==0){num=2;scrolltxt();scton=1};if(opac0){timer=setTimeout(fadeout,interv2)}else{if(jli.length-1){j++}else{j=0};fadeon()};}
//滚动文字
var scrolltxt=function(){t+=num;span.style.marginTop=t+"px";if(num0t3){timer3=setTimeout(scrolltxt,interv2)}else if(num0t62){timer3=setTimeout(scrolltxt,interv2)}else{scton=0}};
fadeon();
}
//初始化
window.onload=s;
/script
/head
body
div id="fade_focus"
div class="loading"Loading...br /img src="/jscss/demoimg/200905/logings.gif" width="100" height="100" //div
ul
liimg src="/jscss/demoimg/wall1.jpg" width="443" height="209" alt="展示图片1" //li
liimg src="/jscss/demoimg/wall2.jpg" width="443" height="209" alt="展示图片2" //li
liimg src="/jscss/demoimg/wall3.jpg" width="443" height="209" alt="展示图片3" //li
/ul
/div
/body
/html
Jquery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
这篇文章主要介绍了jQuery实现幻灯片焦点图,可实现非常炫目时尚的幻灯片效果,非常具有实用价值,基本能满足你在网页上使用幻灯片(焦点图)效果,具体如下
幻灯片效果描述:用鼠标滑过右下角数字按钮幻灯片进行左右切换进行切换。
自定义切换参数效果:向下切换、切换时间为8秒、鼠标滑过按钮时切换
运行效果截图如下:
具体代码如下
head
titleJquery幻灯片焦点图插件/title
script
src="js/jquery-1.4a2.min.js"
type="text/javascript"/script
script
src="js/jquery.-1.2.1.min.js"
type="text/javascript"/script
script
type="text/javascript"
$(function(){
$("#KinSlideshow").KinSlideshow({
moveStyle:"down",
intervalTime:8,
mouseEvent:"mouseover",
titleFont:{TitleFont_size:14,TitleFont_color:"#FF0000"}
});
})
/script
style
type="text/css"
.code{
height:auto;
padding:20px;
border:1px
solid
#9EC9FE;
background:#ECF3FD;}
.code
pre{
font-family:"Courier
New";font-size:14px;}
.code
pre
code.note{
color:#999}
.code2{border:1px
solid
#FEB0B0;
background:#FFF1F1;
margin-top:10px;}
.code2
pre{
margin-left:20px;
font-size:12px;}
.info{
font-size:12px;
color:#666666;
font-family:Verdana;
margin:20px
50px
0;}
.info
p{
margin:0;
padding:0;
line-height:22px;
text-indent:40px;}
h2.title{
margin:0;
padding:0;
margin-top:50px;
font-size:18px;
font-family:"微软雅黑",Verdana;}
h2.title
span.titleInfo{
font-size:12px;
color:#333;
margin-left:10px;font-family:Verdana;}
h3.title{
font-size:16px;
font-family:"微软雅黑",Verdana;}
.importInfo{
font-family:Verdana;
font-size:14px;}
/style
/head
body
lih3a
href="demo2.html"自定义切换参数效果/a/h3/li
/ol
div
id="KinSlideshow"
style="visibility:hidden;"
a
target="_blank"img
src="images/11.png"
alt="Jquery幻灯片焦点图插件"
width="600"
height="300"
//a
a
target="_blank"img
src="images/23.png"
alt="Jquery幻灯片焦点图插件"
width="600"
height="300"
//a
a
target="_blank"img
src="images/22.png"
alt="Jquery幻灯片焦点图插件"
width="600"
height="300"
//a
a
target="_blank"img
src="images/5.jpg"
alt="Jquery幻灯片焦点图插件"
width="600"
height="300"
//a
a
target="_blank"img
src="images/4.jpg"
alt="Jquery幻灯片焦点图插件"
width="600"
height="300"
//a
/div
/body
/html
希望本文所述对大家的Jquery特效设计有所帮助。
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实现幻灯片效果代码和html幻灯片效果代码的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。
版权说明:如非注明,本站文章均为 AH站长 原创,转载请注明出处和附带本文链接;
相关推荐
取消回复欢迎 你 发表评论:
- 标签列表
- 最近发表
- 友情链接