焦点轮播图效果，Tab选项卡切换效果教程-慕课网

第2章延迟切换效果
视频：2-1 js实现延迟切换(18:34)

第4章编程挑战
编程：4-1 焦点轮播图效果

焦点轮播图效果

小伙伴们，根据所学知识，使用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

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{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;} </style> <script type="text/javascript"> window.onload=function(){ var wrap=document.getElementById('wrap'), pic=document.getElementById('pic'), list=document.getElementById('list').getElementsByTagName('li'), index=0, timer=null; // 定义并调用自动播放函数 // 定义图片切换函数 // 鼠标划过整个容器时停止自动播放 // 鼠标离开整个容器时继续播放至下一张 // 遍历所有数字导航实现划过切换至对应的图片 } </script> </head> <body> <div class="wrap" id='wrap'> <ul id="pic"> <li><img src="http://img1.sycdn.imooc.com//54111cd9000174cd04900170.jpg" alt=""></li> <li><img src="http://img1.sycdn.imooc.com//54111dac000118af04900170.jpg" alt=""></li> <li><img src="http://img1.sycdn.imooc.com//54111d9c0001998204900170.jpg" alt=""></li> <li><img src="http://img1.sycdn.imooc.com//54111d8a0001f41704900170.jpg" alt=""></li> <li><img src="http://img1.sycdn.imooc.com//54111d7d00018ba604900170.jpg" alt=""></li> </ul> <ol id="list"> <li class="on">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> </div> </body> </html>

提问题

提交

其他问答

查看更多本节问答

写笔记

公开笔记

提交

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求

4-1 焦点轮播图效果