JavaScript 实现纵向图片焦点轮换

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

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

JavaScript 实现纵向图片焦点轮换

猜你喜欢