本文介绍了图片焦点轮播效果的实现方法。首先，要确保轮播图片大小一致且父容器大小与一张图片匹配，使用JS调整图片left值进行轮播。其次，设置左右按钮及图下方按钮的点击事件，通过改变left值实现切换。最后，添加自动播放功能，通过鼠标悬停控制定时器的开启和关闭。
首先分析一下这个特效的主要用到的知识。
1.布局方面，轮播的几张图片的大小必须是一样大的，而且父容器大小为一张照片大小，其余看不见的部分hidden,通过JS改变图片的left值来实现图片的轮播。
2.左右点击按钮，还有图下方的按钮，均为他们添加点击事件，改变图片的left值。
3.自动播放功能，就是设置了定时器，当鼠标移开的时候，触发定时器。鼠标回到container时，清除定时器。
源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片焦点轮播特效</title>
<style>
*{ margin: 0; padding: 0; text-decoration: none;}
body { padding: 20px;}
#container {
width: 600px;
height: 400px;
border: 3px solid #333;
overflow: hidden;
position: relative;
}
#list{
width:
最低0.47元/天 解锁文章
301
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
