最简短的js焦点图代码

最新推荐文章于 2024-06-27 20:30:00 发布

ityzc

最新推荐文章于 2024-06-27 20:30:00 发布

阅读量2.5k

点赞数

分类专栏： js 焦点图文章标签： javascript 焦点图

本文链接：https://blog.csdn.net/ityzc/article/details/50594799

版权

js 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

焦点图

1 篇文章 0 订阅

订阅专栏

<style>
*{margin:0 auto;padding:0px;}
ul,li{list-style:none;}
ul{width:5000px;position:relative;transition:0.5s;}
li{float:left;display:inline;width:1200px;}
.focus{overflow:hidden;width:1200px;}
nav span{padding:1em;background:#eee;position:relative;left:80%;top:-33px;opacity:0.5;}
nav span:hover{background:#e70041;color:#fff;}
</style>

<div class="focus">
<ul>
<li><img src="1.jpg" height="756" width="1200" /></li>
<li><img src="2.jpg" height="756" width="1200" /></li>
<li><img src="3.jpg" height="756" width="1200" /></li>
</ul>
<nav><span>1</span><span>2</span><span>3</span></nav>
</div>

<script>
var focus = document.querySelector(".focus ul")
var list = document.querySelectorAll("nav span")
for(i=0;i<list.length;i++){
list[i].onmouseover = (function(i){return function(){focus.style.left=-1200*i + "px";};})(i);
}
</script>

刚写了一个非常简短的js切换图，兼容ie8以上，如果有无名大神可以继续精简代码，欢迎补充