注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

米欧光影工作室

No matter what you want to express……

 
 
 

日志

 
 
关于我

{ note: ‘不会编程的设计狮不是好科研狗’ }

网易考拉推荐

焦点图资源与原理  

2013-10-15 23:42:26|  分类: js |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

焦点图素材:

很多漂亮的效果。http://www.jqueryslidershock.com

漂亮焦点图代码实例:

设计网站:


-----------------------------------------------
原理就是js的应用。

例子1:仅实现了每隔一段时间换一张图片的效果。
配套图片在images文件夹下,img001.jpg到img003.jpg,279 x 365px。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<!-- saved from url=(0013)about:internet -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js图片切换</title>
<style>
#focus{width:279px; margin:50px;}

#state{ left:370px;top:50px;
position: absolute;

width: 450px;
height: 365px;

background:#eeefef;
overflow: hidden;
color:#444;
font:42px arial;
}

</style>
</head>

<body>
<div id="focus">

<img src="images/img001.jpg" id="imgid">

<!--图片随机-->
<script language="javascript">
<!--
var imgs=new Array("images/img001.jpg","images/img002.jpg","images/img003.jpg");

function changeimg(){
r=Math.floor(Math.random()*3);
document.getElementById("imgid").src=imgs[r];
}

setInterval( changeimg, 3000);
-->
</script>

</div><!--end of focus -->





<div id=state>
简单随机播放图片代码
</div>






</body>
</html>


继续研究:


refer
1. http://zhidao.baidu.com/link?url=1ocjrxj6xjbcmFd4qBsXQIvS2kTowXwhM8dyFI2d9H8rDRvedo23UvjEvOZcV8qmy0fEZT2S0s7ohc7AI5Op1a



-
  评论这张
 
阅读(165)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017