html 代码
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#focus_m{position:relative; width:420px; height:384px; background:#133775;}
.f_img_roll{width:350px; height:300px; position:relative;}
.f_img_roll img{position:absolute; left:0; top:0; width:350px; height:300px;}
.f_img_tree{position:absolute; width:75px; height:300px; right:3px; top:0;}
.f_img_tree div{position:absolute; z-index:201; top:3px; right:0; width:75px; height:47px; background:url(http://www.kuanghong.com/han/images/mask.gif) no-repeat;}
.f_img_tree ul{margin:0; padding:0; list-style:none; position:absolute; right:0;}
.f_img_tree li{width:60px; height:45px; border:1px solid #0066cc; margin-top:3px;}
.f_img_tree img{width:54px; height:39px; border:3px solid #000066; vertical-align:top;}
.f_con{color:#fff; height:70px;}
.f_con .f_title{font-size:14px; height:30px; line-height:30px; margin-top:5px; font-weight:bold; text-align:center;}
.f_con .f_title a:link, .f_con .f_title a:visited{color:#fff; text-decoration:none}
.f_con .f_title a:hover{text-decoration:underline}
.f_con .f_con{font-size:12px; padding:0 10px; height:40px; line-height:150%;}
</style>
</head>
<body>
<div id="focus_m">
<div class="f_img_roll"></div>
<div class="f_img_tree"></div>
<div class="f_con">
<div class="f_title"></div>
<div class="f_con"></div>
</div>
</div>
</body>
</html>
javascript
<script type="text/javascript">
function $A(iterable) {
var results = [];
for (var i = 0; i < iterable.length; i++)results.push(iterable[i]);
return results;
}
Function.prototype.bind = function() {
var __method = this, args = $A(arguments), object = args.shift();
return function() {
return __method.apply(object, args.concat($A(arguments)));
}
}
var imgs = [
{max:'http://www.kuanghong.com/han/images/img_1.jpg', min:'http://www.kuanghong.com/han/images/img_1s.jpg', url:'#', title:'标题01标题01标题01标题01标题01', con:'内容01内容01内容01内容01内容01内容01内容01内容01内容01内容01内容01内容01内容01内容01内容01内容01内容01内容01'},
{max:'http://www.kuanghong.com/han/images/img_2.jpg', min:'http://www.kuanghong.com/han/images/img_2s.jpg', url:'#', title:'标题02标题02标题02标题02标题02', con:'内容02内容02内容02内容02内容02内容02内容02内容02内容02内容02内容02内容02内容02内容02内容02内容02内容02内容02'},
{max:'http://www.kuanghong.com/han/images/img_3.jpg', min:'http://www.kuanghong.com/han/images/img_3s.jpg', url:'#', title:'标题03标题03标题03标题03标题03', con:'内容03内容03内容03内容03内容03内容03内容03内容03内容03内容03内容03内容03内容03内容03内容03内容03内容03内容03'},
{max:'http://www.kuanghong.com/han/images/img_4.jpg', min:'http://www.kuanghong.com/han/images/img_4s.jpg', url:'#', title:'标题04标题04标题04标题04标题04', con:'内容04内容04内容04内容04内容04内容04内容04内容04内容04内容04内容04内容04内容04内容04内容04内容04内容04内容04'},
{max:'http://www.kuanghong.com/han/images/img_5.jpg', min:'http://www.kuanghong.com/han/images/img_5s.jpg', url:'#', title:'标题05标题05标题05标题05标题05', con:'内容05内容05内容05内容05内容05内容05内容05内容05内容05内容05内容05内容05内容05内容05内容05内容05内容05内容05'},
{max:'http://www.kuanghong.com/han/images/img_6.jpg', min:'http://www.kuanghong.com/han/images/img_6s.jpg', url:'#', title:'标题06标题06标题06标题06标题06', con:'内容06内容06内容06内容06内容06内容06内容06内容06内容06内容06内容06内容06内容06内容06内容06内容06内容06内容06'}
];
function focus(){this.initialize.apply(this,arguments)}
focus.prototype = {
initialize: function(imgs, fc, tim, speed){
this.imgs = imgs;
this.tim = tim*1000 || 2000;
this.speed = speed || 0.3;
this.t = null; // 动作计时
this.tm = null; // 图片计时
this.tb = null; // 滑块儿计时
this.cur_i = 0; // 当前图片位置
this.move = false; // 是否在运动
this.tem = 0; // 临时数据
this.posTo = 0; // 滑块儿目的地
this.over = 0;
var ds = document.getElementById(fc).getElementsByTagName('div');
var di = ds[0];
this.img_m = document.createElement('img');
this.img_m2 = this.img_m.cloneNode(true);
var dm = ds[1];
this.title = ds[3];
this.con = ds[4];
this.mask = document.createElement('div');
this.ul = document.createElement('ul');
this.lis = [];
this.img_m.style.zIndex = 101;
this.img_m2.style.zIndex = 100;
di.appendChild(this.img_m);
di.appendChild(this.img_m2);
di = null;
dm.appendChild(this.mask);
dm.appendChild(this.ul);
dm = null;
this.img_cache();
this.load();
},
img_cache: function(){
var img = new Image();
for(var i=0; i<this.imgs.length; i++)img.src = this.imgs[i].max;
},
stop: function(){
clearTimeout(this.t);
this.over = 1;
},
start: function(){
this.over = 0;
this.t = setTimeout(this.f_next.bind(this,null), this.tim);
},
load: function(){
var imgs = this.imgs;
this.img_m.src = imgs[0].max; // 加载默认大图
this.title.innerHTML = '<a href="'+imgs[0].url+'">'+imgs[0].title+'</a>'; // 标题
this.con.innerHTML = imgs[0].con; //内容
var oThis = this;
for(var i=0; i<imgs.length; i++){ //加载小图
var li = document.createElement('li');
li.onclick = function(){ oThis.f_next.call(oThis,this.i); }
li.innerHTML = '<img src="'+imgs[i].min+'" alt="" />';
li.i = i;
this.lis.push(li);
this.ul.appendChild(li);
}
var lis = this.ul.childNodes;
for(var i=0; i<lis.length; i++){
lis[i].onmouseover = function(){ this.style.border="1px solid #cc0000"; }
lis[i].onmouseout = function(){ this.style.border="1px solid #0066cc"; }
}
this.t = setTimeout(this.f_next.bind(this,null), this.tim);
this.title.parentNode.onmouseover = this.stop.bind(this);
this.title.parentNode.onmouseout = this.start.bind(this);
},
f_next: function(n){
if(this.tb) clearInterval(this.tb);
if(this.t) clearTimeout(this.t);
if(this.tm) clearInterval(this.tm);
if(n)this.cur_i = n-1;
var top = 0;
if(n!=0 && this.imgs[this.cur_i+1]){
this.posTo = this.lis[this.cur_i+1].offsetTop;
this.cur_i = this.cur_i+1;
}else{
this.posTo = this.lis[0].offsetTop;
this.cur_i = 0;
}
this.tem = this.mask.offsetTop;
this.tem > this.posTo? top = 1 : top = 0;
this.tb = setInterval(this.moveTo.bind(this, top), 25);
},
moveTo: function(top){
if(!top){
if((this.tem+1.8)>=this.posTo+1){
this.mask.style.top = this.posTo+'px';
clearInterval(this.tb);
this.img_swap();
return;
}
this.tem += (this.posTo-this.tem)*this.speed
}else{
if((this.tem-1.8)<=this.posTo-1){
this.mask.style.top = this.posTo+'px';
clearInterval(this.tb);
this.img_swap();
return;
}
this.tem -= (this.tem-this.posTo)*this.speed;
}
this.mask.style.top = this.tem+'px';
},
img_swap: function(){
var t, b;
if(this.img_m.style.zIndex>this.img_m2.style.zIndex){
t = this.img_m;
b = this.img_m2;
}else{
t = this.img_m2;
b = this.img_m;
}
this.title.innerHTML = '<a href="'+this.imgs[this.cur_i].url+'">'+this.imgs[this.cur_i].title+'</a>';
this.con.innerHTML = this.imgs[this.cur_i].con;
b.src = this.imgs[this.cur_i].max;
/MSIE/.test(navigator.userAgent) ? this.tem = t.style.filter ? t.style.filter.replace(/^.+=(\d+).+$/,'$1') : 100 : this.tem = t.style.opacity ? t.style.opacity*100 : 100;
this.tm = setInterval(this.img_hid.bind(this, t, b), 25);
},
img_hid: function(t,b){
this.tem -= 5;
if(/MSIE/.test(navigator.userAgent))
t.style.filter = 'alpha(opacity='+this.tem+')';
else
t.style.opacity = this.tem/100;
if(this.tem <=0){
clearInterval(this.tm);
var tz = t.style.zIndex;
var bz = b.style.zIndex;
t.style.zIndex = bz
b.style.zIndex = tz;
if(/MSIE/.test(navigator.userAgent))
t.style.filter = 'alpha(opacity=100)';
else
t.style.opacity = 1;
if(this.over) return;
this.t = setTimeout(this.f_next.bind(this, null), this.tim); // 继续循环
}
}
}
window.onload = function(){
new focus(imgs,'focus_m');
}
</script>
分享到：
相关推荐
在这个场景下，"HTML+Javascript实现点击图片自动播放背景音乐"是一个很好的示例，它结合了两种核心技术来实现用户交互。HTML（超文本标记语言）是网页的基础结构，而JavaScript则提供了动态效果和交互性。 首先，...
JS实现 定位二维码在图片的位置 JS实现 定位二维码在图片的位置 JS实现 定位二维码在图片的位置 JS实现 定位二维码在图片的位置 JS实现 定位二维码在图片的位置 JS实现 定位二维码在图片的位置 JS实现 定位二维码在...
在JavaScript（JS）中实现图片播放功能是一项常见的需求，尤其在网页设计和开发中。图片播放器通常用于创建动态的、交互式的图像展示，能够帮助用户以更吸引人的形式浏览多张图片。以下是对这个主题的详细解释： 一...
在JavaScript编程中，实现图片轮转效果是一种常见的需求，尤其在网页动态展示或者网页广告轮播中非常普遍。本文将详细讲解如何利用JavaScript技术来创建一个图片轮转效果，并结合当当品牌店铺的实际应用场景进行说明...
在HTML中，我们可以设置多个`<img>`标签，每个代表一张图片，然后通过CSS隐藏除第一张之外的所有图片，为初始的图片播放做好准备。 接下来，我们引入jQuery库，它简化了DOM操作和事件处理。通过`$(document).ready...
在JavaScript（JS）中实现图片切换功能是一项常见的前端任务，主要应用于网站的幻灯片、轮播图等组件。这个功能通常需要结合HTML结构、CSS样式以及JavaScript代码来完成。以下是一个详细的步骤介绍： 首先，我们...
下面将详细介绍如何利用JavaScript实现这一功能。 首先，我们需要理解PPT的本质。PowerPoint演示文稿本质上是一系列的幻灯片，每个幻灯片包含文本、图像、图表等元素。在网页上模拟PPT，我们需要将这些元素以网页可...
在JavaScript（JS）中实现图片动态播放效果是一个常见的需求，特别是在网页交互设计中。这个简单实例的核心在于利用JavaScript控制图片对象的`src`属性来实现图片的切换，从而达到动态播放的效果。以下将详细讲解这...
对于简单的应用场景，可以使用CSS的`object-fit`属性来实现图片的缩放效果： ```html ; height: auto; object-fit: cover;"> ``` 以上代码会保持图片的纵横比，并将其宽度限制为200像素，同时自动调整高度，以适应...
本文将深入探讨如何使用JavaScript实现这一功能，包括基本原理、关键代码及其实现步骤。 首先，我们需要理解JavaScript的基本语法和DOM操作。DOM（Document Object Model）是HTML和XML文档的结构化表示，通过...
在实现图片选中效果时，JQuery提供了便利的方法，如`click()`用于响应点击事件，`addClass()`和`removeClass()`用于添加或移除CSS类，从而改变图片的状态。 **Div+CSS** 是构建网页布局的基本元素，`div`是一个HTML...
在本资源中，我们将探讨如何利用JS实现图片轮播效果，这是一种常见的网页动态展示手法，可以有效地吸引用户注意力，提升用户体验。 图片轮播效果通常包括自动切换、手动切换、过渡动画等功能。下面我们将详细讲解...
在JavaScript中实现图片截取功能是一项实用且技术性较强的任务，尤其在网页应用中，如制作网站头像等个性化设置。这项技术的核心是利用HTML5的一些特性，如Canvas元素和JavaScript库来完成。以下我们将详细探讨如何...
在JavaScript（JS）中，实现图片播放并控制播放时间的功能是一项常见的需求，尤其在动态展示图片、制作轮播图或幻灯片效果时。这里我们将深入探讨如何利用JS实现这一功能，并结合描述中的"adcode99"这个可能的代码库...
在JavaScript中实现图片滚动，通常是指创建一个动态展示多张图片的效果，常见于网站的幻灯片、轮播图或滚动...以上是关于"js实现图片滚动"的基本介绍，实际应用中还需要考虑性能优化、浏览器兼容性以及用户体验等因素。
js实现图片放大和拖拽特效.rar js实现图片放大和拖拽特效.rar js实现图片放大和拖拽特效.rar js实现图片放大和拖拽特效.rar js实现图片放大和拖拽特效.rar js实现图片放大和拖拽特效.rar js实现图片放大和拖拽特效....
总结来说，使用JavaScript实现图片闪烁功能主要通过操作DOM元素的样式和定时器来实现。通过不断切换图片的可见状态或透明度，可以创建出视觉上的闪烁效果。这种技术在网页动态设计和交互体验提升方面有着广泛的应用...
总的来说，实现“html，js实现时间轴，可播放视频，点击放大图片”这一功能，需要结合HTML的结构化能力、JavaScript的动态交互特性，以及CSS的美化和布局技巧。通过精心设计和编码，可以创建出既美观又实用的互动...
针对这一问题，我们可以利用JavaScript和第三方库download.js来实现无论何种文件格式都能直接下载的功能。下面将详细解释如何通过JS实现这个功能。 首先，download.js是一个轻量级的JavaScript库，它允许你在浏览器...
总结一下，利用HTML和JavaScript实现图片的全屏自动播放涉及以下几个关键步骤： 1. 在HTML中创建`<img>`标签，并通过`id`属性标识。 2. 使用JavaScript获取图片元素，定义图片源数组。 3. 定义一个函数来更换图片源...