来自 计算机网络 2019-09-04 19:46 的文章
当前位置: 六合联盟网 > 计算机网络 > 正文

js淡入淡出焦点图幻灯片效果代码分享,js焦点文

正文实例陈诉了js主题文字滚动作效果应。分享给大家供大家参照他事他说加以考察。具体如下:
功效描述: 明日引入的这几个又是四个原生的js主旨图效果
暗中同意自动切换,也足以手动切换
javascript代码选拔函数式对象编制程序,也正是javascript编制程序中的Module格局
核心用法极粗略,最重要特点有三
1、模块化,可重用
2、封装了变量和function,和全局的命名空间不接触,不污染全局变量
3、只揭露可用public方法,其余个人方法漫天藏匿,确认保证js互相之间不会争论
运作效果图:-------------------翻看效果-------------------

本文实例汇报了javascript淡入淡出大旨图幻灯片效果。分享给我们供大家仿效。具体如下:
那是一款基于javascript完结的淡入淡出核心图幻灯片效果代码,可以自定义标题,完毕进程很简短。
运转作效果果图:-------------------查阅效果 下载源码-------------------

图片 1

图片 2

小提示:浏览器中一经无法健康运作,能够尝试切换浏览形式。
为大家大饱眼福的jQuery下拉丁美洲化找出表单效果代码如下

小提示:浏览器中假若不可能健康运营,能够品味切换浏览情势。
为我们共享的js淡入淡出大旨图幻灯片效果代码如下

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯js(不依赖现有框架)焦点文字滚动效果</title>
<style >
*{margin:0;padding:0; list-style:none;}

#slider{overflow:hidden;width:470px;height:150px;position:relative; margin:100px auto;}
#slider .pics{width:470px;height:150px}
#slider .pics li{height:150px;width:470px;float:left}
#slider #nav {position:absolute;bottom:5px;right:5px;}
#slider #nav li.nav{background:#F47500; color:#fff;}
#slider #nav li{border:1px solid #f47500; color:#d94b01; cursor:pointer;background:#fff;font-size:12px; height:15px;width:15px;float:left;margin-left:4px;display:inline;text-align:center}
</style>
</head>
<body>

<!--代码部分begin-->
<div id="slider">
 <ul class="pics">
 <li><img alt="js焦点图效果" src="images/01.jpg" /></li>
 <li><img alt="js焦点图效果" src="images/02.jpg" /></li>
 <li><img alt="js焦点图效果" src="images/03.jpg" /></li>
 <li><img alt="js焦点图效果" src="images/04.jpg" /></li>
 <li><img alt="js焦点图效果" src="images/05.jpg" /></li>
 </ul>
 <ul id="nav">
 <li onmouseover="setTimeout(function(){lanrenzhijia.slider.pos(0)},300)">1</li>
 <li onmouseover="setTimeout(function(){lanrenzhijia.slider.pos(1)},300)">2</li>
 <li onmouseover="setTimeout(function(){lanrenzhijia.slider.pos(2)},300)">3</li>
 <li onmouseover="setTimeout(function(){lanrenzhijia.slider.pos(3)},300)">4</li>
 <li onmouseover="setTimeout(function(){lanrenzhijia.slider.pos(4)},300)">5</li>
 </ul>
</div>
<script>
var lanrenzhijia = {}, H$ = function(id){return document.getElementById(id)}, H$$ = function(c,p){return p.getElementsByTagName(c)}
lanrenzhijia.slider = function(){
 return{
 init:function(id,options){
  var ul = this.u = H$$('ul',H$(id))[0], li = H$$('li',ul); this.l=li.length; this.index = 0;
  if(options.navId&&options.curClass){this.nav = H$$('li',H$(options.navId)), this.c = options.curClass;}
  this.a=options.auto||0; this.v=options.vertical||0;H$(id).style.overflow = 'hidden';H$(id).style.position = 'relative';ul.style.position='absolute';
  if(this.v){ul.style.top=0; this.h=options.height||li[0].offsetHeight; ul.style.height=(this.l*this.h)+'px';}
  else{ul.style.left=0; this.w=options.width||li[0].offsetWidth; ul.style.width=(this.l*this.w)+'px';}
  this.pos(options.index||0,this.a?1:0);
 },

 pos:function(pos,a){
  clearInterval(this.u.posAnim); clearInterval(this.u.auto);
  var curPos=this.v?parseInt(this.u.style.top):parseInt(this.u.style.left),
  correctPos=this.v?pos*this.h:pos*this.w, 
  direction = correctPos>Math.abs(curPos)?1:-1;
  correctPos*=-1; 
  this.index = pos;
  if(this.nav){for(var i=0;i<this.l;i++){this.nav[i].className = i==pos?this.c:''}}
  this.u.posAnim = setInterval(function(){lanrenzhijia.slider.anim(correctPos,direction,a)},10);
 },

 anim:function(des,dir,a){
  var curPos=this.v?parseInt(this.u.style.top):parseInt(this.u.style.left);
  if(curPos == des){
  clearInterval(this.u.posAnim);
  if(a||this.a){lanrenzhijia.slider.auto()}
  }
  else{
  var v=curPos-Math.ceil(Math.abs(des-curPos)*.07)*dir+'px';
  this.v?this.u.style.top=v:this.u.style.left=v;
  }
 },

 auto:function(){
  this.u.auto=setInterval(function(){lanrenzhijia.slider.move(1,1)},this.a*1000)
 },

 move:function(n,a){
  var num=this.index+n, i=n==1?num==this.l?0:num:num<0?this.l-1:num; lanrenzhijia.slider.pos(i,a);
 }
 };
}();
</script>
<script>
lanrenzhijia.slider.init('slider',{ 
 auto:3,
 vertical:1,
 navId:'nav',
 curClass:'nav',
 index:0});
</script>
<!--代码部分end-->

</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>数字淡入淡出效果焦点图</title>
</head>
<body>
<style>
ul#bcty365_nav{padding-left:50px; margin-bottom:10px; border-bottom:2px solid #ccc; overflow:hidden; _zoom:1;}
ul#bcty365_nav li{float:left; display:inline; margin:10px;}
ul#bcty365_nav li a{display:block;color:#000000; font-size:16px;}
ul#bcty365_nav li a,#wimoban_p,#wimoban_p a{ font-family:"微软雅黑";}
ul#bcty365_nav li a:hover,#wimoban_p a:hover{color:red;}
</style> 
<div style="width:500px;height:300px;overflow:hidden;margin:30px auto;">
 <!-- 代码 开始 -->
 <script language='javascript'> 
 linkarr = new Array();
 picarr = new Array();
 textarr = new Array();
 var swf_width=500;
 var swf_height=300;
 //文字颜色|文字位置|文字背景颜色|文字背景透明度|按键文字颜色|按键默认颜色|按键当前颜色|自动播放时间|图片过渡效果|是否显示按钮|打开方式
 var configtg='0xffffff|0|0x3FA61F|5|0xffffff|0xC5DDBC|0x000033|2|3|1|_blank';
 var files = "";
 var links = "";
 var texts = "";
 //这里设置调用标记
 linkarr[1] = "//www.jb51.net";
 picarr[1] = "images/1.jpg";
 textarr[1] = "脚本之家";
 linkarr[2] = "//www.jb51.net";
 picarr[2] = "images/2.jpg";
 textarr[2] = " 脚本之家";
 linkarr[3] = "//www.jb51.net";
 picarr[3] = "images/3.jpg";
 textarr[3] = " 脚本之家";
 linkarr[4] = "//www.jb51.net";
 picarr[4] = "images/4.jpg";
 textarr[4] = " 脚本之家";


 for(i=1;i<picarr.length;i++){
 if(files=="") files = picarr[i];
 else files += "|"+picarr[i];
 }
 for(i=1;i<linkarr.length;i++){
 if(links=="") links = linkarr[i];
 else links += "|"+linkarr[i];
 }
 for(i=1;i<textarr.length;i++){
 if(texts=="") texts = textarr[i];
 else texts += "|"+textarr[i];
 }
 document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="'+ swf_width +'" height="'+ swf_height +'">');
 document.write('<param name="movie" value="images/bcastr3.swf"><param name="quality" value="high">');
 document.write('<param name="menu" value="false"><param name=wmode value="opaque">');
 document.write('<param name="FlashVars" value="bcastr_file='+files+'&bcastr_link='+links+'&bcastr_title='+texts+'">');
 document.write('<embed src="images/bcastr3.swf" wmode="opaque" FlashVars="bcastr_file='+files+'&bcastr_link='+links+'&bcastr_title='+texts+'& menu="false" quality="high" width="'+ swf_width +'" height="'+ swf_height +'" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />'); document.write('</object>'); 
 </script>
 <!-- 代码 结束 -->
 </div>
 <div style=" clear:both; width:700px; margin:0 auto; text-align:center; padding-top:10px;">
 <p></p>
</div>

</body>
</html>

如上便是为我们大快朵颐的js(不依附现存框架)宗旨文字滚动作效果应代码,希望大家可以欣赏。

以上正是为大家大快朵颐的js淡入淡出主题图幻灯片效果代码,希望大家能够欣赏,并采取到试行中。

你大概感兴趣的稿子:

  • Android达成文字滚动作效果应
  • js实现文字滚动作效果应
  • js+div达成文字滚动和图表切换效果代码
  • JS达成倒计时和文字滚动的功力实例
  • 仿猪刚鬣网左下角的文字滚动作效果应
  • js 动态文字滚动的事例
  • 依赖Jquery的文字滚动跑马灯插件(一个页面八个滚动区)
  • js 上下文字滚动作效果应
  • 浅析js 文字滚动作效果应
  • Marquee合作DIV完成的文字滚动作效果应代码
  • js文字滚动停顿效果代码
  • 怎么着让多少个方框栏内的文字滚动呈现?
  • 二个不胜好用的文字滚动的案例,鼠标悬浮可间歇[二种方案任选]

您或许感兴趣的小说:

  • javascript+HTML5自定义成分播放宗旨图动画
  • js实现三张图(文)片一同切换的banner主题图
  • JS+CSS完结淡入式核心图片幻灯切换效果的艺术
  • JS核心图切换,上下翻转
  • javascript 封装的三个实用的节骨眼图切换效果
  • 实用的js 主旨图切换效果 结构作为相分离
  • CSS+Js遮罩效果的TAB及难点图片切换(推荐)
  • js原生之枢纽图调换加反应计时器实例

本文由六合联盟网发布于计算机网络,转载请注明出处:js淡入淡出焦点图幻灯片效果代码分享,js焦点文

关键词: