4.1哪位大神做出来了可以发下代码吗搞了好久都没出来效果-慕课网

首页课程实战体系课手记专栏慕课教程

4.1哪位大神做出来了可以发下代码吗搞了好久都没出来效果

来源：4-1 焦点轮播图效果

qq_冰冻的陆地_0

2016-10-07 00:24

帮帮忙

写回答关注

5回答

HHHHHH_

2016-12-07 17:47:00

已采纳

你把我的代码直接粘贴进去应该就能用了

1 0

qq_冰冻的...

非常感谢！

2016-12-13 20:23:40

共 1 条回复 >

GatsbyJh: 2016-12-11 16:14:11

function $(id){
    return typeof id==='string'?document.getElementById(id):id;
}
window.onload=function(){
    var timer=null;
    var time2=null;
    var index=0;
    //获取鼠标滑过或点击的标签和要切换内容的元素
    var lis=$('title').getElementsByTagName('li'),
        divs=$('cont').getElementsByTagName('div');
    if(lis.length!=divs.length)
    return;
    //遍历title下的所有li
    for(i=0;i<lis.length;i++){
        lis[i].id=i;
        lis[i].onmouseover=function(){
            clearInterval(time2);
            //用that来引用当前的li
            var that=this;
            //如果存在定时器，就清除定时器
            if(timer){
                clearTimeout(timer);
                timer=null;
            }
            timer=setTimeout(changeOption(that.id),500)
        }
        lis[i].onmouseout=function(){
            clearInterval(time2);
            if(timer){
                clearTimeout(timer);
                timer=null;
            }
            timer2=setInterval(autoPlay,2000);
        }
    }
    //定时器，定时改变
    if(timer2){
        clearInterval(timer2);
        timer2=null;
    }
    timer2=setInterval(autoPlay,2000);
    //封装
    function changeOption(x){
                //清除所有li上的active
                    for(j=0;j<lis.length;j++){
                        lis[j].className='';
                        divs[j].style.display='none';
                    }
                //设置当前高亮显示
                    lis[x].className='active';
                    divs[x].style.display='block';
                    index=x;
    }
    function autoPlay(){
            index++;
            if(index>=lis.length){
                index=0;}
            changeOption(index);
        }
}

0 0

HHHHHH_

2016-12-07 17:46:18

<script type="text/javascript">
function $(id){
return typeof id==='string'?document.getElementById(id):id;
}
window.onload=banner;
function banner(){
var wrap=document.getElementById('wrap'),
picList=document.getElementById('pic').getElementsByTagName('li'),
list=document.getElementById('list').getElementsByTagName('li'),
index=0,
timer=null;

// 定义并调用自动播放函数
timer=setInterval(autoPlay,2000);
// 定义图片切换函数
function autoPlay(){
index++;
if(index>=list.length){
index=0;
}
autoChange(index);

}

for(var i=0;i<list.length;i++){
list[i].id=i;

list[i].onmouseover=function(){
clearInterval(timer);
autoChange(this.id);
}
list[i].onmouseout=function(){
timer=setInterval(autoPlay,2000);
}
picList[i].onmouseover=function(){
clearInterval(timer);
}
picList[i].onmouseout=function(){
timer=setInterval(autoPlay,2000);
}
}
function autoChange(curIndex){
for(var j=0;j<list.length;j++){
list[j].className='';
picList[j].style.display='none';
}
list[curIndex].className='on';
picList[curIndex].style.display='block';
index=curIndex;
}
}

</script>

0 0
qq_凉风有信丶_03837837

2016-10-17 02:41:51

这不是jQuery，你开头就定义错了

0 0
高才俊秀

2016-10-08 16:33:58

image.html 代码
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
   <title>Document</title>
<link rel="stylesheet" type="text/css" href="css/image.css">
<script type="text/javascript" src="js/image.js"></script>
</head>
<body>
<div id='wrap'>
    <ul id="pic">
      <li style="display: block;"><img src="http://img.mukewang.com/54111cd9000174cd04900170.jpg" alt=""></li>
      <li style="display: none;"><img src="http://img.mukewang.com/54111dac000118af04900170.jpg" alt=""></li>
      <li style="display: none;"><img src="http://img.mukewang.com/54111d9c0001998204900170.jpg" alt=""></li>
      <li style="display: none;"><img src="http://img.mukewang.com/54111d8a0001f41704900170.jpg" alt=""></li>
      <li style="display: none;"><img src="http://img.mukewang.com/54111d7d00018ba604900170.jpg" alt=""></li>
    </ul>
    <ol id="list">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ol>
</div>
</body>
</html>

css代码
*{margin:0;
    padding:0;
    list-style:none;}

.wrap{height:170px;
        width:490px;
        margin:60px auto;
        overflow: hidden;
        position: relative;
        margin:100px auto;}

.wrap ul{position:absolute;}

.wrap ul li{height:170px;}

.wrap ol{position:absolute;
           right:5px;
           bottom:10px;}

.wrap ol li{height:20px; width: 20px;
              background:#ccc;
              border:solid 1px #666;
              margin-left:5px;
              color:#000;
              float:left;
              /*line-height:center;*/
              text-align:center;
              cursor:pointer;}

.wrap ol .on{background:#E97305;
               color:#fff;}

js 代码
function $(id){
return typeof id==='string'?document.getElementById(id):id;
}

window.onload=image;

function image(){
    var wrap=$('wrap');
    var pic=$('pic');
    var lis = pic.getElementsByTagName('li');
    var list=$('list').getElementsByTagName('li');
    var index=0;
    var timer=null;

      //轮播图自动播放
      timer=setInterval(aotuPlay,2000)


     // 鼠标划过整个容器时停止自动播放
      pic.onmouseover=function(){
        clearInterval(timer);
       }
    // 鼠标离开整个容器时继续播放至下一张
      pic.onmouseout=function(){
        timer=setInterval(aotuPlay,2000)
      }


     //定义并调用自动播放函数aotuPlay
     function aotuPlay(){
        index++;
        if (index>=lis.length) {
          index=0;
        }
        // 遍历所有数字导航实现划过切换至对应的图片
        for (var i = 0; i < lis.length; i++) {
          lis[i].style.display='none';
          list[i].className='';
        }
        lis[index].style.display='block';
        list[index].className='on';
      }

}

0 0

Tab选项卡切换效果

本课程详细介绍网页页面中最流行常用的tab切换效果

65469 学习 · 533 问题

相似问题

回答 1

回答 2

回答 5

回答 5

回答 4