4-1 焦点轮播图效果
本节编程练习不计算学习进度，请电脑登录imooc.com操作

焦点轮播图效果

小伙伴们，根据所学知识，使用JS实现下图所示的焦点图切换效果

图片素材地址：

http://img1.sycdn.imooc.com//54111cd9000174cd04900170.jpg

http://img1.sycdn.imooc.com//54111dac000118af04900170.jpg

http://img1.sycdn.imooc.com//54111d9c0001998204900170.jpg

http://img1.sycdn.imooc.com//54111d8a0001f41704900170.jpg

http://img1.sycdn.imooc.com//54111d7d00018ba604900170.jpg

 

任务

一、页面加载、获取整个容器、所有放数字索引的li及放图片列表的ul、定义放定时器的变量、存放当前索引的变量index
二、添加定时器，每隔2秒钟index递增一次、调用一次切换图片函数

提示:
   1. index不能一直无限制的递增下去，需做判断
   2.调用切换图片函数时需将递增之后的index作为参数传过去

三、定义图片切换函数

提示:
  1.遍历所有放数字索引的li，将每个li上的类去掉。
   2.根据传递过来的index值找到对应的li给它添加类设为当前高亮显示。
   3. 根据传递过来的index值计算放图片的ul的top值
   4. 改变index的值，让其等于传递过来的参数值

注意：放图片的ul的top值=-index*单张图片的高度（所有图片必须等高）
四、鼠标划过整个容器时，图片停止切换，离开继续

提示:
1.  鼠标滑过整个容器时清除定时器
2.  鼠标离开时继续执行定时器，切换至下一张图片

五、遍历所有放数字的li，且给他们添加索引、鼠标滑过时切换至对应的图片

提示:
1.  鼠标滑过时调用图片切换函数，将滑过的li的索引传过去

 

index.html 
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5. 	<title>Document</title>
  6. 	<style>
  7.   *{margin:0;
  8.     padding:0;
  9.     list-style:none;}
  10.   .wrap{height:170px;
  11.         width:490px;
  12.         margin:60px auto;
  13.         overflow: hidden;
  14.         position: relative;
  15.         margin:100px auto;}
  16.   .wrap ul{position:absolute;} 
  17.   .wrap ul li{height:170px;}
  18.   .wrap ol{position:absolute;
  19.            right:5px;
  20.            bottom:10px;}
  21.   .wrap ol li{height:20px; width: 20px;
  22.               background:#ccc;
  23.               border:solid 1px #666;
  24.               margin-left:5px;
  25.               color:#000;
  26.               float:left;
  27.               line-height:center;
  28.               text-align:center;
  29.               cursor:pointer;}
  30.   .wrap ol .on{background:#E97305;
  31.                color:#fff;}
  32.  
  33.   </style>
  34.   <script type="text/javascript">
  35.   window.onload=function(){
  36.     var wrap=document.getElementById('wrap'),
  37.         pic=document.getElementById('pic'),
  38.         list=document.getElementById('list').getElementsByTagName('li'),
  39.         index=0,
  40.         timer=null;
  41.  
  42.       // 定义并调用自动播放函数
  43.  
  44.       // 定义图片切换函数
  45.  
  46.      // 鼠标划过整个容器时停止自动播放
  47.  
  48.      // 鼠标离开整个容器时继续播放至下一张
  49.  
  50.      // 遍历所有数字导航实现划过切换至对应的图片
  51.    }
  52.  
  53.   </script>	
  54. </head>
  55. <body>
  56.   <div class="wrap" id='wrap'>
  57.     <ul id="pic">
  58.       <li><img src="http://img1.sycdn.imooc.com//54111cd9000174cd04900170.jpg" alt=""></li>
  59.       <li><img src="http://img1.sycdn.imooc.com//54111dac000118af04900170.jpg" alt=""></li>
  60.       <li><img src="http://img1.sycdn.imooc.com//54111d9c0001998204900170.jpg" alt=""></li>
  61.       <li><img src="http://img1.sycdn.imooc.com//54111d8a0001f41704900170.jpg" alt=""></li>
  62.       <li><img src="http://img1.sycdn.imooc.com//54111d7d00018ba604900170.jpg" alt=""></li>    
  63.     </ul>
  64.     <ol id="list">
  65.       <li class="on">1</li>
  66.       <li>2</li>
  67.       <li>3</li>
  68.       <li>4</li>
  69.       <li>5</li>
  70.     </ol>
  71.   </div>
  72. </body>
  73. </html>
返回课程