Web应用——焦点图自动浏览
几张图片可以自动循环显示,此效果在各大网站应用十分流行,这里用Javascript+CSS完成此效果,具体效果请下载样例查看。
样例下载:点击下载
Body部分:
<div id="container" style="width:960px; margin: 0 auto; overflow: hidden; background-color: #FFF;">
<div class="wrap">
<div class="topbar clearfix">
<p>
<script language="LiveScript">
<!-- Hiding
today = new Date()
month=today.getMonth()+1
year=today.getFullYear()
day=today.getDate()
document.write(year,"-",month,"-",day);
// end hiding contents -->
</script>
</p>
</div>
<!-- partA begin -->
<div class="lA">
<div class="focus">
<div class="focusb">
<a href="http://www.cnblogs.com/uhome/" target="_blank"><img src="data:images/1.jpg" title="科比追平尤因 湖人狂胜" /></a>
<a href="http://www.cnblogs.com/uhome/" target="_blank"><img src="data:images/2.jpg" title="勒布朗29分 骑士负山猫" /></a>
<a href="http://www.cnblogs.com/uhome/" target="_blank"><img src="data:images/3.jpg" title="邓肯替补 马刺不敌猛龙" /></a>
<a href="http://www.cnblogs.com/uhome/" target="_blank"><img src="data:images/4.jpg" title="年终特刊-2009非常完美" /></a>
<div class="titlebg"></div>
<p>
<a href="http://www.cnblogs.com/uhome/" target="_blank">科比追平尤因 湖人狂胜</a>
<a href="http://www.cnblogs.com/uhome/" target="_blank" style="display:none;">勒布朗29分 骑士负山猫</a>
<a href="http://www.cnblogs.com/uhome/" target="_blank" style="display:none;">邓肯替补 马刺不敌猛龙</a>
<a href="http://www.cnblogs.com/uhome/" target="_blank" style="display:none;">年终特刊-2009非常完美</a>
</p>
</div>
<div class="focuss">
<p class='current'><img src="data:images/1.jpg" title="科比追平尤因 湖人狂胜" /></p>
<p><img src="data:images/2.jpg" title="勒布朗29分 骑士负山猫" /></p>
<p><img src="data:images/3.jpg" title="邓肯替补 马刺不敌猛龙" /></p>
<p style='padding-right:0'><img src="data:images/4.jpg" title="年终特刊-2009非常完美" /></p>
</div>
</div>
</div>
<!-- partA end -->
</div>
</div>
<div class="footer">
<div class="foot">Copyright ©2009 <a href="http://www.cnblogs.com/uhome/">拂云漂海龙</a> Powered by: Chotim 提供:CSS Sticky Footer
</div>
</div>
CSS部分:
html,body,div,p,ul,ol,li,dl,dt,dd{margin:0;padding:0;font-style:normal;font-size:12px;font-weight:normal;color:#002050;}
ul,ol{list-style:none;}
img{border:none;}
body{font-family:"宋体", Arial, Helvetica, sans-serif;background:url(skin/pagebg.jpg) repeat-x; background-color:#c1e7fe;}
.footer{background: url(skin/pagebg.jpg) repeat-x;}
a:link{color:#002050;text-decoration:none;}
a:visited{color:#002050;text-decoration:none}
a:hover{color:#f00!important;text-decoration:underline!important;}
a:active{color:#f00;}
.wrap{width:950px;margin:0 auto;overflow:hidden;}
.clear{zoom:1;}
a img{border:#72b6f2 1px solid;padding:3px;background-color:#fff;}
a:hover img{border-color:#002050;background-color:#003791;}
.lA{width:362px; margin:0 auto; overflow:hidden;}
/*背景图片no-repeat*/
.focus,
.focus .focuss p.current,
.focus .focuss p.mouseon{background:url(skin/bg.png) no-repeat;}
/*CSS for focus*/
.focus{background-position:0 -91px; height:265px;padding:5px 5px 0 5px;}
.focus .focusb{width:352px;height:202px;position:relative;overflow:hidden;}
.focus .focusb img{width:350px;height:200px;padding:0;border:1px solid #fff!important;}
.focus .focusb .titlebg{position:absolute;width:350px;height:40px;top:161px;left:1px;background-color:#000;z-index:5;filter:Alpha(Opacity=65);opacity:0.65;}
.focus .focusb p{position:absolute;top:165px;left:10px;z-index:10;font-size:22px;font-family:"microsoft yahei","微软雅黑","黑体","simsun","宋体";font-weight:normal;}
.focus a:link,.focus a:visited{color:#fff;}
.focus a:hover{color:#ff0!important;text-decoration:none!important;}
.focus .focuss{width:352px;height:63px;overflow:hidden;zoom:1;}
.focus .focuss p{width:85px;height:56px;padding:7px 4px 0 0;float:left;}
.focus .focuss p.mouseon{background-position:0 -870px;}
.focus .focuss p.current{background-position:-245px 0;}
.focus .focuss p.current img{border:1px solid #fff;}
.focus .focuss p img{width:83px;height:47px;padding:0;border:#72b6f2 1px solid;cursor:pointer;}
Javascript部分:
<script type="text/javascript">
jQuery(function(){
showImg(0)
var index = 1;
jQuery('.focuss>p').click(function(){index=jQuery('.focuss>p').index(this);showImg(index);});
jQuery('.focuss>p>img').hover(
function(){
if(MyTime){clearInterval(MyTime);}
},
function(){
if(index==3){index=0;}else{index++;}
MyTime = setInterval(function(){
showImg(index)
index++;
if(index==4){index=0;}
} , 6000);
});
jQuery('.focusb').hover(
function(){
if(MyTime){clearInterval(MyTime);}
},
function(){
MyTime = setInterval(function(){
showImg(index)
index++;
if(index==4){index=0;}
} , 6000);
});
var MyTime = setInterval(function(){
showImg(index)
index++;
if(index==4){index=0;}
} , 6000);
})
function showImg(i){
jQuery(".focusb>a>img").hide();
jQuery(".focusb>a>img").eq(i).fadeIn(500);
jQuery(".focuss>p").eq(i).addClass("current").siblings().removeClass("current");
jQuery(".focusb>p>a").eq(i).show().siblings().hide();
};
</script>
样例下载:点击下载
转载于:https://www.cnblogs.com/uhome/archive/2010/01/06/1640445.html
Web应用——焦点图自动浏览相关推荐
- jQuery实现焦点图自动切换
jQuery实现焦点图自动切换 1. 页面布局结构图: 其中按钮切换区的按钮预定义了与图片基色调相同的颜色: 2. 获取按钮切换区的li标签,并定义鼠标划过事件:(index为全局变量) 将鼠标划过的 ...
- html焦点图自动播放纯代码,jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)...
demo01.html 手动滚动图片 ul,li{margin:0;padding:0} img{border:0px;} #container{padding:40px;} #showArea im ...
- 强大的js焦点图插件myFocus.js
简要教程 myFocus是一个专注于WEB端焦点图/轮换图的JS库.该焦点图插件集成了30多种风格图片切换效果,体积小,使用简单,兼容ie6+和所有的主流浏览器.myFocus焦点图插件的特点还有: ...
- 一键在Web端把CAD图自动分割成多张图纸并导出子图或图片
前言 在实际中,一个CAD文件中往往存放多张图纸,有时需要这些图纸分开,单独保存或显示.以往的做法是在cad中人工进行处理.今天小编教您在web端一键把CAD图自动分割成多张图纸并能把每个子图导出 ...
- [Web]焦点图实现 篇一
网站焦点图是一种网站内容的展现形式,可简单理解为一张图片或多张图片展现在网页上就是网站焦点图.在网站很明显的位置,用图片组合播放的形式,类似焦点新闻的意思只不过加上了图片.一般多网站首页版面或频道首页 ...
- educoder头歌Web实训 web课——综合应用案例:动态焦点图页面的制作
educoder头歌Web实训 太原理工web课--综合应用案例:拼图页面的制作[全网更新最快]_玛卡巴卡的博客-CSDN博客 第1关:动态焦点图页面的样式设计 任务描述 本关任务: 完成动态焦点图 ...
- 超酷实用的jQuery焦点图赏析及源码
超酷实用的jQuery焦点图赏析及源码 焦点图应用在现代网页中使用十分广泛,有注重简单小巧的,也有注重华丽美观的,大部分jQuery焦点图都可以滑动和切换图片,并且在切换图片时产生不同的动画特效.今天 ...
- jQuery图片轮播(焦点图)插件(转载)
本文转自http://www.oschina.net/code/snippet_206691_11515?p=3#comments 特点:兼容IE6+,Chrome,Firefox,Opera,saf ...
- 计算机绘制轴类零件图,轴类零件工序图自动绘制的方法和系统研究
摘要: 计算机辅助工艺设计(Computer Aided Process Planning)是连接CAD/CAM的桥梁,是实现CIMS的关键环节,鉴于CAPP在制造业中的重要地位,一直成为国内外学者关 ...
最新文章
- 安装APK失败,错误代码:INSTALL_FAILED_INVALID_APK 解决方案
- 05 ORA系列:ORA-01013 报错用户请求取消当前的操作
- android 动态让控件超出屏幕_android 动态设置屏幕控件宽高度
- 23根火柴游戏 c语言,23 根火柴游戏
- 汉字在线转化unicode编码
- arXiv pdf下载很慢的解决方法
- 如何将字节数组转换为十六进制字符串,反之亦然?
- [转载] su和sudo
- NLP情感分析笔记(六):Transformer情感分析
- oracle如何储存超长汉子_oracle Clob 存储超长字符
- 通过telegram 传递变量_Docker随时随地玩转变量
- rup 裁剪_小型软件项目RUP裁剪模型的研究
- VCL界面控件DevExpress VCL全新发布v21.1.6
- 思维导图工具XMind
- redis持久化机制,深入分析redisAOF和RDB模式的利弊
- 清除linux系统盘空间,linux磁盘空间不足怎么办,磁盘清理方法
- 网上流量卡这么便宜,线上申请的流量卡有虚标吗
- Aurora 8B/10B光口通信
- fulltext全文索引的使用
- 有N个台阶,可以走两步也可以走一步 一共有多少种走法