您的位置：首页 > Web前端 > JavaScript

JavaScript 实现纵向图片焦点轮换

2017-11-23 14:29 721 查看

为了方便以后使用，就将代码整理出来，希望来访者多多点评，谢谢！下面将展示源代码。

html：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js实现纵向焦点图片轮换效果</title>
<link rel="stylesheet" href="../css/main.css" type="text/css"/>
</head>

<body>
<div class="layout">
<ul class="ul_01">
<li><img src="../images/img1.jpg" alt=""/></li>
<li><img src="../images/img2.jpg" alt=""/></li>
<li><img src="../images/img3.jpg" alt=""/></li>
<li><img src="../images/img4.jpg" alt=""/></li>
<li><img src="../images/img5.jpg" alt=""/></li>
<li><img src="../images/img6.jpg" alt=""/></li>
<li><img src="../images/img7.jpg" alt=""/></li>
</ul>
<ul class="ul_02">
<li class="cur" onMouseOver="imgShow(this)">极致美景中国七大秋色斑斓地</li>
<li onMouseOver="imgShow(this)">畅游大理体味民族风情</li>
<li onMouseOver="imgShow(this)">桂林初冬浓妆淡抹最佳处</li>
<li onMouseOver="imgShow(this)">新疆库尔勒铁关西天涯极目少行</li>
<li onMouseOver="imgShow(this)">历史遗产：兴安灵渠</li>
<li onMouseOver="imgShow(this)">神秘美丽的内蒙古草原</li>
<li onMouseOver="imgShow(this)">回归自然感受另类风情</li>
</ul>
</div>
</body>
</html
css代码：

/* CSS Document */
body,ul,li{ margin:0; padding:0; list-style:none; border:none; font-size:12px;}

.layout{ width:612px; height:266px; margin:50px auto; border:1px solid #C63;}
.ul_01{float:left; position:relative; z-index:-11;}
.ul_01>li{width:400px; height:266px; overflow:hidden; position:absolute; top:0; left:0;}
.ul_01>li>img{ width:100%; height:100%;}
.ul_02{ width:212px; height:auto; float:right;}
.ul_02>li{ line-height:38px; background:url(../images/bg_j04.jpg) no-repeat; padding-left:30px; cursor:pointer;}
.ul_02>.cur{ background:url(../images/bg_j05.png) no-repeat; margin-left:-13px; padding-left:35px; color:#fff;}

js代码：

document.getElementsByClassName("ul_01").item(0).getElementsByTagName("li").item(0).style.display="block";
var nodeImg=document.getElementsByClassName("ul_01").item(0).getElementsByTagName("li");
var nodeText=document.getElementsByClassName("ul_02").item(0).getElementsByTagName("li");
for (var i = 0; i<7;i++){
nodeText[i].index=i;
}
function imgShow(obj){
for(var j=0;j<7;j++){
nodeText[j].className="";
nodeImg[j].style.display="none";
}
obj.className="cur";
var k=obj.index;
nodeImg[k].style.display="block";
}效果图：

Jquery版待更新！！！

jquery-1.10.0.min.js下载地址：https://code.jquery.com/jquery-1.10.0.min.js

新手第一次，请大家多多指正！
转载地址：http://blog.csdn.net/blog635/article/details/78585583

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航