JavaScript / Jquery 实现纵向图片焦点轮换

上课东西太多自己做的东西出来记一下！！！

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

打开360浏览器，进入下载管理，新建下载！

新手第一次，请大家多多指正！

JavaScript / Jquery 实现纵向图片焦点轮换

猜你喜欢