大幅JS焦点图切换
2016-07-11 11:19
127 查看
<!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>
<TITLE>NBA大幅焦点图切换</TITLE>
<style type="text/css">
#fours_m{z-index:-10; width:430px; height:382px; background:#053783 url(/jscss/demoimg/200909/fours_bj.gif) repeat-x 0 bottom;}
#f_img_roll{float:left;width:350px; height:300px; position:relative}
#f_img_roll img{position:absolute; left:0; top:0}
#f_img_s{float:right; position:relative; width:80px; height:300px;}
#f_img_s ul{margin:0; padding:0; margin-left:6px; list-style:none;}
#f_img_s li{width:60px; height:45px;border:1px solid #0066cc;margin-top:3px;}
#f_img_s img{width:54px; height:39px; border:3px solid #000066;vertical-align:top; }
#f_img_s div{top:3px}
#f_mask{position:absolute; top:3px; right:12px; width:75px; height:47px; background:url(mask.gif) no-repeat;}
#f_title{font-size:16px; font-weight:bold; clear:both; margin-top:10px; text-align:center; color:#fff; height:70px; width:80%}
</style>
<script type="text/javascript">
//图片资源
var imgs_m=[],imgs_s=[],imgs_title=[];
imgs_m[0]="wall1.jpg";
imgs_m[1]="wall2.jpg";
imgs_m[2]="wall3.jpg";
imgs_m[3]="wall4.jpg";
imgs_m[4]="wall5.jpg";
imgs_m[5]="wall6.jpg";
imgs_s[0]="wall_s1.jpg";
imgs_s[1]="wall_s2.jpg";
imgs_s[2]="wall_s3.jpg";
imgs_s[3]="wall_s4.jpg";
imgs_s[4]="wall_s5.jpg";
imgs_s[5]="wall_s6.jpg";
imgs_title[0]="第一张";
imgs_title[1]="第二张";
imgs_title[2]="第三张";
imgs_title[3]="第四张";
imgs_title[4]="第五张";
imgs_title[5]="第六张";
//显示小图
function imgs_s_dis(){
var imgs=document.getElementById("imgs");
var fr=document.createDocumentFragment();
for(var i=0;i<imgs_s.length;i++){
var li=document.createElement("li");
li.innerHTML="<img src='"+imgs_s[i]+"' alt='' />";
lis.push(li);
fr.appendChild(li);
}
imgs.appendChild(fr);
}
//图片切换
function img_scroll(num){
cur_img.src=imgs_m[num];
img_title.innerHTML=imgs_title[num];
}
//图片切换效果
var ie=/MSIE/.test(navigator.userAgent);//浏览器
var img_title=null;//title
var f_img_roll=null;//大图
var cur_img=null;//当前大图
var mb_img=null;//目标图
var f_mask=null;//MASK层
var lis=[];//所有LI
var cur_li=null;//当前MASK所在LI
var mb_li=null;//目标LI位置
var tt=null;//时间函数
var m=0;//默认top
var r=0;//当前lis下标
//自动播放
function img_play(){
r++;
if(r>lis.length-1)r=0;
mb_li=lis[r].offsetTop;
if(tt)clearTimeout(tt);
tt=setInterval("f_mask_mov()",25);
cur_li=lis[r];
img_scroll(r);
}
//加载动作
function _focus(){
imgs_s_dis();//初始小图显示
cur_li=lis[0];//初始当前mask所在元素
f_img_roll=document.getElementById("f_img_roll");
cur_img=f_img_roll.getElementsByTagName("img")[0];//得到默认大图引用
img_title=document.getElementById("f_title");
f_mask=document.getElementById("f_mask");//得到MASK引用
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";
}
lis[i].num=i;
lis[i].onclick=function(){
if(cur_li!=this){
if(tt)clearTimeout(tt);//停止正在的播放
clearTimeout(ttt);//停止自动播放
r=this.num;
mb_li=this.offsetTop;
tt=setInterval("f_mask_mov()",40);
cur_li=this;
img_scroll(this.num);
}
}
}
ttt=setTimeout("img_play()",3000);//开始自动播放
}
//滑动效果
function f_mask_mov(){
if(m>mb_li){
m-=(m-mb_li)*0.2;
if((m-1)<mb_li){
clearTimeout(tt);
f_mask.style.top=mb_li+"px";
f_mask_top=mb_li;//更新M值
m=mb_li;
ttt=setTimeout("img_play()",3000);//开始自动播放
return;
}else{
f_mask.style.top=m+"px";
}
}else{
m+=(mb_li+5-m)*0.2;
if(m>mb_li){
clearTimeout(tt);
f_mask.style.top=mb_li+"px";
m=f_mask_top=f_mask.offsetTop;//更新M值
ttt=setTimeout("img_play()",3000);//开始自动播放
return;
}else{
f_mask.style.top=m+"px";
}
}
}
window.onload=_focus;
</script>
</HEAD>
<BODY>
<div id="fours_m">
<div id="f_img_roll"><img src="/jscss/demoimg/wall1.jpg" /></div>
<div id="f_img_s">
<div id="f_mask"></div>
<ul id="imgs"></ul>
</div>
<div id="f_title">第一张</div>
</div>
</BODY>
</HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>NBA大幅焦点图切换</TITLE>
<style type="text/css">
#fours_m{z-index:-10; width:430px; height:382px; background:#053783 url(/jscss/demoimg/200909/fours_bj.gif) repeat-x 0 bottom;}
#f_img_roll{float:left;width:350px; height:300px; position:relative}
#f_img_roll img{position:absolute; left:0; top:0}
#f_img_s{float:right; position:relative; width:80px; height:300px;}
#f_img_s ul{margin:0; padding:0; margin-left:6px; list-style:none;}
#f_img_s li{width:60px; height:45px;border:1px solid #0066cc;margin-top:3px;}
#f_img_s img{width:54px; height:39px; border:3px solid #000066;vertical-align:top; }
#f_img_s div{top:3px}
#f_mask{position:absolute; top:3px; right:12px; width:75px; height:47px; background:url(mask.gif) no-repeat;}
#f_title{font-size:16px; font-weight:bold; clear:both; margin-top:10px; text-align:center; color:#fff; height:70px; width:80%}
</style>
<script type="text/javascript">
//图片资源
var imgs_m=[],imgs_s=[],imgs_title=[];
imgs_m[0]="wall1.jpg";
imgs_m[1]="wall2.jpg";
imgs_m[2]="wall3.jpg";
imgs_m[3]="wall4.jpg";
imgs_m[4]="wall5.jpg";
imgs_m[5]="wall6.jpg";
imgs_s[0]="wall_s1.jpg";
imgs_s[1]="wall_s2.jpg";
imgs_s[2]="wall_s3.jpg";
imgs_s[3]="wall_s4.jpg";
imgs_s[4]="wall_s5.jpg";
imgs_s[5]="wall_s6.jpg";
imgs_title[0]="第一张";
imgs_title[1]="第二张";
imgs_title[2]="第三张";
imgs_title[3]="第四张";
imgs_title[4]="第五张";
imgs_title[5]="第六张";
//显示小图
function imgs_s_dis(){
var imgs=document.getElementById("imgs");
var fr=document.createDocumentFragment();
for(var i=0;i<imgs_s.length;i++){
var li=document.createElement("li");
li.innerHTML="<img src='"+imgs_s[i]+"' alt='' />";
lis.push(li);
fr.appendChild(li);
}
imgs.appendChild(fr);
}
//图片切换
function img_scroll(num){
cur_img.src=imgs_m[num];
img_title.innerHTML=imgs_title[num];
}
//图片切换效果
var ie=/MSIE/.test(navigator.userAgent);//浏览器
var img_title=null;//title
var f_img_roll=null;//大图
var cur_img=null;//当前大图
var mb_img=null;//目标图
var f_mask=null;//MASK层
var lis=[];//所有LI
var cur_li=null;//当前MASK所在LI
var mb_li=null;//目标LI位置
var tt=null;//时间函数
var m=0;//默认top
var r=0;//当前lis下标
//自动播放
function img_play(){
r++;
if(r>lis.length-1)r=0;
mb_li=lis[r].offsetTop;
if(tt)clearTimeout(tt);
tt=setInterval("f_mask_mov()",25);
cur_li=lis[r];
img_scroll(r);
}
//加载动作
function _focus(){
imgs_s_dis();//初始小图显示
cur_li=lis[0];//初始当前mask所在元素
f_img_roll=document.getElementById("f_img_roll");
cur_img=f_img_roll.getElementsByTagName("img")[0];//得到默认大图引用
img_title=document.getElementById("f_title");
f_mask=document.getElementById("f_mask");//得到MASK引用
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";
}
lis[i].num=i;
lis[i].onclick=function(){
if(cur_li!=this){
if(tt)clearTimeout(tt);//停止正在的播放
clearTimeout(ttt);//停止自动播放
r=this.num;
mb_li=this.offsetTop;
tt=setInterval("f_mask_mov()",40);
cur_li=this;
img_scroll(this.num);
}
}
}
ttt=setTimeout("img_play()",3000);//开始自动播放
}
//滑动效果
function f_mask_mov(){
if(m>mb_li){
m-=(m-mb_li)*0.2;
if((m-1)<mb_li){
clearTimeout(tt);
f_mask.style.top=mb_li+"px";
f_mask_top=mb_li;//更新M值
m=mb_li;
ttt=setTimeout("img_play()",3000);//开始自动播放
return;
}else{
f_mask.style.top=m+"px";
}
}else{
m+=(mb_li+5-m)*0.2;
if(m>mb_li){
clearTimeout(tt);
f_mask.style.top=mb_li+"px";
m=f_mask_top=f_mask.offsetTop;//更新M值
ttt=setTimeout("img_play()",3000);//开始自动播放
return;
}else{
f_mask.style.top=m+"px";
}
}
}
window.onload=_focus;
</script>
</HEAD>
<BODY>
<div id="fours_m">
<div id="f_img_roll"><img src="/jscss/demoimg/wall1.jpg" /></div>
<div id="f_img_s">
<div id="f_mask"></div>
<ul id="imgs"></ul>
</div>
<div id="f_title">第一张</div>
</div>
</BODY>
</HTML>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 按比例缩放图片，JavaScript代码
- js中函数表达式和函数声明
- jsp与servlet传值相关问题
- Js拖动特效，一串水晶球(很强大)
- Js图片连续左右滚动
- JS图片切换，带缩略图版
- JS卡通图片切换
- JS图片滚动代码（无缝、平滑）
- 史上最全、JavaScript基础篇
- JS点击小图预览大图（仿淘宝）
- JS放大镜,JavaScript图片放大代码
- JavaScript真正的鼠标放上动画加载大图的
- 有品位的JS开发者特征
- JavaScript图片特效
- JavaScript图片预加载代码，显示loading
- JavaScript改变图片透明度，鼠标放上渐渐显示
- JavaScript图片放大
- JavaScript 由左向右的图片渐变过渡
- JavaScript动态控制图片透明度的变化
- JavaScript 图片滚动（绝对酷）