Javascript实现简单焦点图
分析：
总体思路：
所有图片其实都是经过定位、浮动等显示在同一行内的，通过改变图片容器的left值来实现一张一张移动的，再给最外层的总容器加一个overflow：hidden，每次就只能显示一张图片了，其他都被隐藏了，如下图
具体实现：
（一）html部分
包含内容：轮播图片、切换箭头(左右)、圆点切换按钮(底部)
注意问题：
-1. 轮播图片（假设有5张）排列顺序 → 5、1、2、3、4、5、1，头尾各有一张重复是为了实现循环滚动效果
-2. 在实现过程中，
-3. 为了方便与图片一一对应，给每个圆点按钮自定义了index属性
（二）js部分
包含内容：箭头点击切换效果、圆点按钮鼠标滑过切换效果、切换过程中的位移动画效果、页面加载后自动循环播放效果、鼠标移动到图片上停止自动播放移开后继续自动播放
注意问题：
-1. 箭头切换和圆点切换要互相配合好
-2. 自定义属性使用getAttribute( )获取
-3. 切换过程中的位移动画效果:总位移/移动次数 最好整除，注意是整除而不是取整，否则会造成切换过程的最后一瞬间图片出现晃动，道理类似于”惯性”，切换过头了又倒回来的感觉
-4. 切换的优化问题：为了避免鼠标点击太快造成的切换效果错乱，每次切换前需要判断当前动画是否正在进行中，如果正在进行就暂不切换，如果没有动画正在进行就开始切换
代码展示：
(1)html代码
<body>
<div id="banner">
<div id="imglist" style="left:-790px">
<img src="images/banner5.jpg">
<img src="images/banner1.jpg">
<img src="images/banner2.jpg">
<img src="images/banner3.jpg">
<img src="images/banner4.jpg">
<img src="images/banner5.jpg">
<img src="images/banner1.jpg">
div>
<div id="cuts">
<span index="1" class="on">span>
<span index="2">span>
<span index="3">span>
<span index="4">span>
<span index="5">span>
div>
<i id="prev" class="arrow"><i>
<i id="next" class="arrow">>i>
div>
body>(2)css样式
<style>
* {
margin: 0;
padding: 0;
}
#banner {
width: 790px;
height: 340px;
overflow: hidden;
position: relative;
margin: 0 auto;
top: 50px;
}
#imglist {
width: 5530px;
height: 340px;
position: absolute;
z-index: 90;
}
#imglist img {
float: left;
}
#cuts {
width: 108px;
height: 12px;
padding: 4px 0;
line-height: 20px;
position: absolute;
bottom: 20px;
left: 341px;
z-index: 100;
background: rgba(255,255,255,.3);
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
}
#cuts span {
float: left;
width: 12px;
height: 12px;
border-radius: 50%;
background: #fff;
margin-left: 8px;
}
#cuts .on {
background: #DB192A;
}
.arrow{
width: 30px;
height: 60px;
line-height: 60px;
position: absolute;
top: 140px;
z-index: 100;
background: rgba(0,0,0,.2);
color: #fff;
text-align: center;
cursor: pointer;
display: none;
}
.arrow:hover{
background: rgba(0,0,0,.5);
}
#banner:hover .arrow {
display: block;
}
#prev {
left: 0;
}
#next {
right:0;
}
style>(3)js代码
<script>
window.onload = function (){
var prev = document.querySelector("#prev");
var next = document.querySelector("#next");
var imglist = document.querySelector("#imglist");
var cuts = document.querySelectorAll("#cuts span");
var index = 1;
var len = 5;
var animated = false;
var timer;
function animate(offset){
var left = parseInt(imglist.style.left)+offset;
var time = 100;
var interval = 10;
var speed = offset/(time/interval);
function go(){ //位移动画效果
animated = true;
if((speed>0 && parseInt(imglist.style.left)0 && parseInt(imglist.style.left)>left)){
imglist.style.left = parseInt(imglist.style.left) + speed + "px";
setTimeout(go,interval);
}else {
imglist.style.left = left + "px";
if(left>-790){
imglist.style.left = -790*len + "px";
}else if(left<(-790*len)){
imglist.style.left ="-790px";
}
animated = false;
}
}
go();
}
function showBtn(){ //圆点按钮切换效果
for (var i = 0; i < cuts.length; i++) {
if(cuts[i].className == "on"){
cuts[i].className = "";
break;
}
}
cuts[index-1].className = "on";
}
for (var i = 0; i < cuts.length; i++) {
cuts[i].onmouseover = function(){
if(animated){
return;
}else if (this.className == "on"){
return;
}
var myIndex = parseInt(this.getAttribute("index"));//取到的index属性是字符串，所以转number;
var offset = -790*(myIndex - index);
animate(offset);
index = myIndex;
showBtn();
}
prev.onclick = function(){ //左箭头切换
if(animated){
return;
}
if(index == 1){
index = 5;
}else{
index -= 1;
}
animate(790);
showBtn();
}
next.onclick = function(){ //右箭头切换
if(animated){
return;
}
if(index == 5){
index = 1;
}else{
index += 1;
}
animate(-790);
showBtn();
}
function play(){ //自动播放
timer = setInterval(function(){
next.onclick();
},2000);
}
function stop(){
clearTimeout(timer);
}
banner.onmouseover = stop;
banner.onmouseout = play;
play();
}
script>难点：
-1.箭头切换和圆点切换的相互配合
-2.位移动画效果的逻辑分析和实现过程
-3.判断动画是否正在进行的逻辑分析