点击图片切换的例子

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
ul { padding:0; margin:0; }
li { list-style:none; }
body { background:#333; }
#pic { width:400px; height:500px; position:relative; margin:0 auto; background:url(img/loader_ico.gif) no-repeat center #fff; }
#pic img { width:400px; height:500px; }
#pic ul { width:40px; position:absolute; top:0; right:-50px; }
#pic li { width:40px; height:40px; margin-bottom:4px; background:#666; }
#pic .active { background:#FC3; }
#pic span { top:0; }
#pic p { bottom:0; margin:0; }
#pic p,#pic span { position:absolute; left:0; width:400px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; }
</style>
<script>
window.onload = function (){
    var oDiv = document.getElementById('pic');
    var oImg = oDiv.getElementsByTagName('img')[0];
    var oSpan = oDiv.getElementsByTagName('span')[0];
    var oP = oDiv.getElementsByTagName('p')[0];
    var oUl = oDiv.getElementsByTagName('ul')[0];
    var aLi = oUl.getElementsByTagName('li');
    
    var arrUrl = [ 'img/1.png', 'img/2.png', 'img/3.png', 'img/4.png' ];
    var arrText = [ '小宠物', '图片二', '图片三', '面具' ];
    var num = 0;
    var oldLi = null;
    
    for( var i=0; i<arrUrl.length; i++ ){
        oUl.innerHTML += '<li></li>';
    }
    oldLi = aLi[num];
    
    // 初始化
    oImg.src = arrUrl[num];
    oSpan.innerHTML = 1+num+' / '+arrUrl.length;
    oP.innerHTML = arrText[num];
    aLi[num].className = 'active';
    
    for( var i=0; i<aLi.length; i++ ){
        aLi[i].index = i;            // 索引值
        aLi[i].onclick = function (){
            oImg.src = arrUrl[ this.index ];
            oP.innerHTML = arrText[ this.index ];
            oSpan.innerHTML = 1+this.index + ' / '+arrText.length;

            
            // 思路一：全部清空，当前添加
            for( var i=0; i<aLi.length; i++ ){
                aLi[i].className = '';
            }
            this.className = 'active';
            
            
            /* 思路二：清空上个，当前添加
            oldLi.className = '';
            oldLi = this;
            this.className = 'active';*/
            
        };
    }
};
</script>
</head>

<body>

<div id="pic">
    <img src="" />
  <span>数量正在加载中……</span>
  <p>文字说明正在加载中……</p>
  <ul></ul>
</div>

</body>
</html>

精简后的写法：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
ul { padding:0; margin:0; }
li { list-style:none; }
body { background:#333; }
#pic { width:400px; height:500px; position:relative; margin:0 auto; background:url(img/loader_ico.gif) no-repeat center #fff; }
#pic img { width:400px; height:500px; }
#pic ul { width:40px; position:absolute; top:0; right:-50px; }
#pic li { width:40px; height:40px; margin-bottom:4px; background:#666; }
#pic .active { background:#FC3; }
#pic span { top:0; }
#pic p { bottom:0; margin:0; }
#pic p,#pic span { position:absolute; left:0; width:400px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; }
</style>
<script>
window.onload = function (){
    var oDiv = document.getElementById('pic');
    var oImg = oDiv.getElementsByTagName('img')[0];
    var oSpan = oDiv.getElementsByTagName('span')[0];
    var oP = oDiv.getElementsByTagName('p')[0];
    var oUl = oDiv.getElementsByTagName('ul')[0];
    var aLi = oUl.getElementsByTagName('li');
    
    var arrUrl = [ 'img/1.png', 'img/2.png', 'img/3.png', 'img/4.png' ];
    var arrText = [ '小宠物', '图片二', '图片三', '面具' ];
    var num = 0;
    
    for( var i=0; i<arrUrl.length; i++ ){
        oUl.innerHTML += '<li></li>';
    }
    
    // 初始化
    function fnTab(){
        oImg.src = arrUrl[num];
        oSpan.innerHTML = 1+num+' / '+arrUrl.length;
        oP.innerHTML = arrText[num];
        for( var i=0; i<aLi.length; i++ ){
            aLi[i].className = '';
        }
        aLi[num].className = 'active';
    }
    fnTab();
    
    for( var i=0; i<aLi.length; i++ ){
        aLi[i].index = i;            // 索引值
        aLi[i].onclick = function (){
            num = this.index;
            fnTab();
        };
    }
};
</script>
</head>

<body>

<div id="pic">
    <img src="" />
  <span>数量正在加载中……</span>
  <p>文字说明正在加载中……</p>
  <ul></ul>
</div>

</body>
</html>

修改成传递参数的写法：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
ul { padding:0; margin:0; }
li { list-style:none; }
body { background:#333; }
.box { width:400px; height:500px; position:relative; background:url(img/loader_ico.gif) no-repeat center #fff; float:left; margin-right:60px; }
.box img { width:400px; height:500px; }
.box ul { width:40px; position:absolute; top:0; right:-50px; }
.box li { width:40px; height:40px; margin-bottom:4px; background:#666; }
.box .active { background:#FC3; }
.box span { top:0; }
.box p { bottom:0; margin:0; }
.box p,.box span { position:absolute; left:0; width:400px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; }
</style>
<script>

window.onload = function (){
    fnTab( 'pic1', [ 'img/1.png', 'img/2.png', 'img/3.png', 'img/4.png' ], [ '小宠物', '图片二', '图片三', '面具' ], 'onclick' );
    fnTab( 'pic2', [ 'img/2.png', 'img/3.png', 'img/4.png' ], [ '图片二', '图片三', '面具' ], 'onmouseover' );
};

function fnTab( id, arrUrl, arrText, evt ){
    var oDiv = document.getElementById(id);
    var oImg = oDiv.getElementsByTagName('img')[0];
    var oSpan = oDiv.getElementsByTagName('span')[0];
    var oP = oDiv.getElementsByTagName('p')[0];
    var oUl = oDiv.getElementsByTagName('ul')[0];
    var aLi = oUl.getElementsByTagName('li');
    var num = 0;
    
    for( var i=0; i<arrUrl.length; i++ ){
        oUl.innerHTML += '<li></li>';
    }
    
    // 初始化
    function fnTab(){
        oImg.src = arrUrl[num];
        oSpan.innerHTML = 1+num+' / '+arrUrl.length;
        oP.innerHTML = arrText[num];
        for( var i=0; i<aLi.length; i++ ){
            aLi[i].className = '';
        }
        aLi[num].className = 'active';
    }
    fnTab();
    
    for( var i=0; i<aLi.length; i++ ){
        aLi[i].index = i;            // 索引值
        aLi[i][evt] = function (){
            num = this.index;
            fnTab();
        };
    }
}
</script>
</head>

<body>

<div id="pic1" class="box">
    <img src="" />
  <span>数量正在加载中……</span>
  <p>文字说明正在加载中……</p>
  <ul></ul>
</div>

<div id="pic2" class="box">
    <img src="" />
  <span>数量正在加载中……</span>
  <p>文字说明正在加载中……</p>
  <ul></ul>
</div>

</body>
</html>

posted @ 2017-03-14 14:05 念念念不忘阅读(109) 评论(0) 收藏举报

刷新页面返回顶部

念念念不忘

点击图片切换的例子

公告