注册 | 登陆

您的位置：阿里西西 > 网页特效 > 图像特效 > 详细内容

1顶

漂亮的黑色背景风格JS焦点图切换特效

稿源：互联网 2022-06-17 10:31:30 点击： 9332 撤稿纠错

从奇艺网上的flash焦点图得到灵感，尝试做了一个类似的风格，感觉还不错，分享给大家~~调用setFocus(ID,time);即可，ID为你的焦点图ID，time为每帧停留时间(秒)。其余的修改和上次一样，只需更改HTML/CSS代码，包括更改焦点图的大小、添加更多帧、图片等等

以下讨论的是和焦点图图片轮换相关的漂亮的黑色背景风格JS焦点图切换特效教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<base href="http://hi.baidu.com/koen_li" />
<style type="text/css">
*{margin:0;padding:0;border:0;list-style:none;}
body{padding:20px;background:#eee;}
#myfocus{width:450px;height:296px;overflow:hidden;padding:6px 6px 24px;background:#333 url(/web/UploadPic/2010-6/2010626103358712.jpg) no-repeat;position:relative;}
#myfocus #myloading{position:absolute;top:0;left:0;z-index:9999;width:462px;height:326px;background:#333;color:#f60;font-size:12px;text-align:center;padding-top:90px;}
#myfocus #myloading .bg{position:absolute;top:0;left:0;z-index:-1;}/*载入画面*/
#myfocus .pics{width:450px;height:296px;overflow:hidden;position:relative;}
#myfocus .pics ul{height:296px;position:absolute;}
#myfocus .pics ul li{width:450px;height:296px;float:left;position:relative;}/*图片大小450px*296px*/
#myfocus .pics ul li div,#myfocus .pics ul li div span,#myfocus .pics ul li div a{display:block;position:absolute;bottom:0;left:0;width:100%;height:34px;}
#myfocus .pics ul li div span{filter:alpha(opacity=50);opacity: 0.5;background:#000;}/*文字标题的背景样式*/
#myfocus .pics ul li div a{line-height:34px;overflow:hidden;padding-left:16px;text-decoration:none;font-size:14px;color:#fff;font-weight:bold;}/*文字标题样式*/
#myfocus .mybtn{position:absolute;bottom:8px;right:8px;}
#myfocus .mybtn ul li{float:left;width:16px;height:6px;margin-left:4px;overflow:hidden;border:1px solid #000;background:#ccc;cursor:pointer;}
#myfocus .mybtn ul li.current{background:#f60;}</style><script type="text/javascript">
/*design by koen @ 10nian5yue11ri*/
/*http://hi.baidu.com/koen_li*/
function setFocus(ID,t){//主函数...
function $(id) {return document.getElementById(id);}
function $$(tag,obj){return (typeof obj=='object'?obj:$(obj)).getElementsByTagName(tag);}
var n='';//标记
function showPics(num){
 if(n===num) return true;
 if(n==='') n=0;
 else n=num;
 var pics=$$('ul',ID)[0];
 var tit=$$('div',pics)[num];
 if (!pics.style.left){pics.style.left = 0+'px';}
    if (!tit.style.bottom||parseInt(tit.style.bottom)>-34){tit.style.bottom = -34+'px';}
 var endX=-num*$$('div',ID)[0].clientWidth;
 var goimg=function(){
  X=parseInt(pics.style.left);
  if (pics.movement){clearTimeout(pics.movement);}
  if(parseInt(pics.style.left)==endX) return true;
  if((endX-X)>0) X+=Math.ceil((endX-X) / 10);
  else X+=Math.floor((endX-X) / 10);
  pics.style.left=X+'px';
  pics.movement = setTimeout(goimg, 5);
 }
 var gotit=function(){
  var y=parseInt(tit.style.bottom);
  if (tit.movement){clearTimeout(tit.movement);}
  if(y==0) return true;
  y+=Math.ceil((0-y) / 10);
  if(parseInt(pics.style.left)==endX) tit.style.bottom=y+'px';
  if(y<0) tit.movement = setTimeout(gotit, 16);
 }
 goimg();
 gotit();
}
function classNormal() {//数字标签样式清除
    var focusBtnList = $$('li',$$('ul',ID)[1]);
    for (var i = 0; i < focusBtnList.length; i++) {
        focusBtnList[i].className = '';
    }
}
function focusChange() {//交互切换
    var focusBtnList = $$('li',$$('ul',ID)[1]);
    for (var i = 0; i < focusBtnList.length; i++) {
  focusBtnList[i].I=i;
  focusBtnList[i].onmouseover = function(){
         showPics(this.I);
         classNormal();
         focusBtnList[this.I].className = 'current';
  }
 }
}
var autoFocusChange=function() {//自动运行
    if (atuokey) return;
    var focusBtnList = $$('li',$$('ul',ID)[1]);
    for (var i = 0; i < focusBtnList.length; i++) {
        if (focusBtnList[i].className == 'current') {
            var currentNum = i;
        }
    }
 if(currentNum<focusBtnList.length-1){
  showPics(currentNum+1);
        classNormal();
        focusBtnList[currentNum+1].className = 'current';
 }else if(currentNum==focusBtnList.length-1){
  showPics(0);
        classNormal();
        focusBtnList[0].className = 'current';
 }
}
var atuokey = '';
function init(){//初始化<div><span></span><a href="#">文字说明</a></div>
 var ul=$$('ul',ID)[0];
 var li=$$('li',ul);
 var NUM=li.length;
 var wid=$('myloading')?$$('div',ID)[1].clientWidth:$$('div',ID)[0].clientWidth;ul.style.width=wid*NUM+'px';
 for(var i=0;i<NUM;i++){
  var a=li[i].getElementsByTagName('a')[0];
  var img=li[i].getElementsByTagName('img')[0];
  li[i].innerHTML=li[i].innerHTML+'<div><span></span><a href="'+a+'">'+img.alt+'</a></div>';
 }
 var s='<div class="mybtn"><ul>';
 for(var i=0;i<NUM;i++){s+='<li></li>'}
 s+='</ul></div>';
 $(ID).innerHTML+=s;
 $(ID).removeChild($('myloading'));
 showPics(0);
    classNormal();
    $$('li',$$('ul',ID)[1])[0].className = 'current';
 $(ID).onmouseover = function() {
        atuokey = true;
  clearInterval(auto);
    }
    $(ID).onmouseout = function() {
        atuokey = false;
  auto=setInterval(autoFocusChange, T);
    }
}
var T=t*1000;//每帧图片停留的时间，1000=1秒
var auto='';
init();
focusChange();
auto=setInterval(autoFocusChange, T);
};
window.onload=function(){
 setFocus('myfocus',4);
}
</script>
<div id="myfocus"><div id="myloading">请稍候...<br /><br /><img alt="" src="http://www.alixixi.com/web/UploadPic/2010-6/2010626103358861.gif" /><img class="bg" alt="" src="http://www.alixixi.com/web/UploadPic/2010-6/2010626103358712.jpg" /></div><div class="pics"><ul><li><a href="#"><img alt="图片1来源于网络，版权属于作者" src="http://www.alixixi.com/web/UploadPic/2010-6/2010626103359345.jpg" /></a></li><li><a href="#"><img alt="图片2来源于网络，版权属于作者" src="http://www.alixixi.com/web/UploadPic/2010-6/2010626103359249.jpg" /></a></li><li><a href="#"><img alt="图片3来源于网络，版权属于作者" src="http://www.alixixi.com/web/UploadPic/2010-6/2010626103359531.jpg" /></a></li><li><a href="#"><img alt="图片4来源于网络，版权属于作者" src="http://www.alixixi.com/web/UploadPic/2010-6/2010626103359988.jpg" /></a></li><li><a href="#"><img alt="图片5来源于网络，版权属于作者" src="http://www.alixixi.com/web/UploadPic/2010-6/2010626103359721.jpg" /></a></li><li><a href="#"><img alt="图片6来源于网络，版权属于作者" src="http://www.alixixi.com/web/UploadPic/2010-6/2010626103359224.jpg" /></a></li></ul></div></div>

关于漂亮的黑色背景风格JS焦点图切换特效的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2010062662314.shtml方便下次再访问哦。

·上一篇： JS封装函数制作竖向滑动的图片切换效果
·下一篇： JS三级折叠菜单特效自动收缩其它级

相关阅读

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

最新游戏

更多 »

最新新闻

更多 »