非常简单的焦点图切换特效代码

稿源：互联网 2022-04-02 21:38:20 点击： 42149 撤稿纠错

一个好简单好简单的焦点图（更像滑动门），提供给初学者借鉴参考。

以下讨论的是和焦点图滑动门相关的非常简单的焦点图切换特效代码教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

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

<!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">
* {margin:0;padding:0;}
ul, li {list-style:none;}
.mid {margin:0 auto;}
.area {width:240px;height:270px;overflow:hidden;background:#999;margin-top:150px;position:relative;}
#pic_list {position:relative;}
#pic_list li {position:absolute;visibility:hidden;}
#pic_list li.show {visibility:visible;}
#pic_list li img {vertical-align:middle;}
.button {width:240px;height:20px;line-height:20px;background:#ccc;position:absolute;bottom:0px;}
#button {float:right;}
#button li {float:left;width:20px;height:20px;text-align:center;margin:0 3px;font-family:"Arial";font-size:12px;color:#fff;background:#000;}
#button li.current {background:#f00;cursor:pointer;}
</style>
</head>
<body>
<div class="area mid">
    <div id="imgbox" class="bbbb">
        <ul id="pic_list" class="aaaa">
            <li class="show" id="one"><img src="http://img1.27.cn/images/201109/29/1317279971_77011100.jpg" width="240" /></li>
            <li id="two"><img src="http://img1.27.cn/images/201109/29/1317279972_01691900.jpg" width="240" /></li>
            <li id="three"><img src="http://img1.27.cn/images/201109/29/1317279973_69082200.jpg" width="240" /></li>
            <li id="four"><img src="http://img1.27.cn/images/201109/29/1317281054_38572100.jpg" width="240"  /></li>
            <li id="five"><img src="http://img1.27.cn/images/201109/29/1317281056_61630800.jpg" width="240" /></li>
        </ul>
    </div>
    <div class="button" class="dddd">
        <ul id="button" class="cccc">
            <li class="current" id="but_one">1</li><li id="but_two">2</li><li id="but_three">3</li><li id="but_four">4</li><li id="but_five">5</li>
        </ul>
    </div>
</div>
<script type="text/javascript">
(function(){
var imgbox = document.getElementById("imgbox");
var pic_list = document.getElementById("pic_list");
var pics = pic_list.getElementsByTagName("li");
var button = document.getElementById("button").getElementsByTagName("li");
var p;
var start;
function autoplay(start){for(i=start;i<button.length;i++){  //设置起始值为start参数.
 (function(){
  var p=i;               // 为p赋值i. i等于0,1,2,3,4;
  button[i].onmouseover=function change(){        //button[0],button[1],button[2],button[3],button[4]  onmouseover可以触发函数;
   for(j=0;j<this.parentNode.childNodes.length;j++){   //以this(当前触发事件的元素)为起点,的父节点的所有子节点的length值为最高值,开始遍历. ;
    this.parentNode.childNodes[j].className="";       //以this(当前触发事件的元素)为起点,的父节点的所有子节点的className为空. 危险慎用.;
     }
   this.className="current";        //this. 即当前触发onmouseover的元素的className为"current";
   for(m=0;m<pics.length;m++){        //以pics.length为最高值进行遍历.遍历pics.;
    pics[m].className="";        //清空所有pics数组中所有元素的className;
    if (m==p){           //当m==p (p==i) 所以m=i时,触发下列函数
     pics[m].className="show";      //pics的第m个元素的className值为show; m在这里等于i;
     }
    }
   }
  })();
 }
}
autoplay(0);
})();
</script>
</body>
</html>

关于非常简单的焦点图切换特效代码的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2011101574375.shtml方便下次再访问哦。

·上一篇： 通过键盘上下左右键选择文字并显示在文本框中
·下一篇： 《百度风云榜》TAB切换效果可多次调用的选项卡

非常简单的焦点图切换特效代码

文章分类LIST >>返回首页

最新游戏

最新新闻