焦点轮播图
一.js实现
demo：http://jellyandjammy.sinaapp.com/imageChange/js.html
实现思路：
在一个div内放置五张图片，两张头尾图的附属图（这样可以无缝轮播），把div的宽度设为一张图片的大小。把其他的图片隐藏
在另一个div里放置五个span标签做成小按钮，再放置两个链接作为左右箭头。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>image_change</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <script type="text/javascript" src="js/script.js"></script> </head> <body> <div id="container"> <!-- 放置图片 --> <div id="list" style="left: -600px;"> <img src="images/5.jpg"> <!-- 第五张图的附属图 --> <img src="images/1.jpg"> <img src="images/2.jpg"> <img src="images/3.jpg"> <img src="images/4.jpg"> <img src="images/5.jpg"> <img src="images/1.jpg"> <!-- 第一张图的附属图 --> </div> <div id="buttons"> <!-- 放置小按钮 --> <span index="1" class="on"></span> <span index="2"></span> <span index="3"></span> <span index="4"></span> <span index="5"></span> </div> <!-- 放置左右两个箭头 --> <a href="javascript:;" id="prev" class="arrow"><</a> <a href="javascript:;" id="next" class="arrow">></a> <!-- javascript:;让点击效果执行JavaScript空语句，防止A标签跳转。把a作为一个按钮使用，可以点击 但是不跳转页面而是做其他处理 --> </div> </body> </html>
父容器设置为相对定位position:relative，放置图片，小按钮，箭头的子容器均设为绝对定位position:absolute，这样可以有z-index设置图层的顺序，图片z-index设为1作底层图片，小按钮和箭头的z-index设为2放置在底层图片上。
*{ margin: 0; padding: 0; text-decoration: none; /*把链接a的下划线去掉*/ } body{ padding: 20px; } /*父容器*/ #container{ width: 600px; height: 400px; overflow: hidden; /* 只显示一张图片，其余的隐藏*/ border: 3px solid #333; position: relative; /*父容器设置为相对定位*/ } /*子容器放置图片*/ #list{ width: 4200px; height: 400px; position: absolute; /*子容器设置绝对定位*/ z-index: 1 /*作为底层图片*/ } #list img{ float: left; } /*放置按钮的div*/ #buttons{ position: absolute; bottom: 10px; left: 250px; width: 100px; height: 10px; z-index: 2; } /*按钮*/ #buttons span{ cursor: pointer; /* 箭头设为手指*/ float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; /*把span设为圆形*/ background-color: #333; margin-right: 5px; } #buttons .on { background-color: orange; } /*左右箭头*/ .arrow{ cursor: pointer; width: 40px; height: 40px; position: absolute; z-index: 2; top: 180px; background-color: rgba(0,0,0,.3); /*设置背景色和透明度，最后一个参数为透明度*/ font-size: 36px; font-weight: bold; text-align: center; line-height: 40px; color: #fff; display: none; /*隐藏*/ } #container:hover .arrow{ display: block; /*鼠标划过父容器时显示箭头*/ } .arrow:hover { background-color: rgba(0,0,0,.7); /*设置背景色和透明度，最后一个参数为透明度，*/ } #prev{ left: 20px; } #next{ right: 20px; }
js先实现左右箭头点击切换图片功能，实现小按钮点击切换图片功能，用定时器实现自动轮播功能。调用函数实现鼠标在图片上就清除定时器，鼠标移出则开始定时器。
window.onload= function() { //window.onload是文档加载后再调用js代码 var container=document.getElementById("container"); var list=document.getElementById("list"); var buttons=document.getElementById("buttons").getElementsByTagName("span");//获取小按钮 var prev=document.getElementById("prev"); //前一个箭头 var next=document.getElementById("next"); //后一个箭头 var index=1; //第几个小按钮 var animated=false; //动画是否在运行 var timer; //左右箭头切换图片 function animate(offset){ if (offset == 0) { return; } animated=true; var newLeft=parseInt(list.style.left)+offset; //新的图片位置等于现有图片位置加上偏移量 //图片切换的动态效果的变量定义 var time=300; //位移总时间 var intervar=10; //位移间隔 var speed=offset/(time/intervar); //位移偏移量 function go(){ if ((speed<0 && parseInt(list.style.left)>newLeft) || (speed>0 && parseInt(list.style.left)<newLeft)) { list.style.left=parseInt(list.style.left)+speed+'px'; setTimeout(go,intervar); } else{ animated=false; list.style.left=newLeft+'px'; // 如果是第五张图片的附属图一的话就切换回第五张图片 if(newLeft > -600){ list.style.left= -3000 +'px'; } // 如果是第一张图片的附属图五的话就切换回第一张图片 if(newLeft< -3000){ list.style.left= -600 +'px'; } } } go(); } function play(){ timer=setInterval(function(){ next.onclick(); },3000); } function stop(){ clearInterval(timer); } //点击按钮时点亮按钮 function showButton(){ for(var i=0;i<buttons.length;i++){ if (buttons[i].className=='on'){ buttons[i].className = ''; } } buttons[index-1].className='on'; //数组是从0开始的 } //右箭头点击事件 next.onclick= function () { if (!animated) { animate(-600); } if(index==5){ index=1; } else{ index+=1; } showButton(); } //左箭头点击事件 prev.onclick= function () { if (!animated) { animate(600); } if(index==1){ index=5; } else{ index-=1; } showButton(); } //遍历按钮，设置点击哪个按钮就切换到那张图片 for (var i=0;i<buttons.length;i++){ buttons[i].onclick=function(){ if (this.className=='on') { //优化代码，当点击的是当前的图片时就不用往下跑，节省资源 return; } var myIndex=parseInt(this.getAttribute('index')); var offset=-600*(myIndex-index); animate(offset); index=myIndex; showButton(); //debugger; //可设置断点 } } container.onmouseover=stop; container.onmouseout=play; play(); }
二.JQuery实现
$(function () { var container = $('#container'); var list = $('#list'); var buttons = $('#buttons span'); var prev = $('#prev'); var next = $('#next'); var index = 1; var len = 5; var interval = 3000; var timer; function animate (offset) { var left = parseInt(list.css('left')) + offset; if (offset>0) { offset = '+=' + offset; } else { offset = '-=' + Math.abs(offset); } list.animate({'left': offset}, 300, function () { if(left > -200){ list.css('left', -600 * len); } if(left < (-600 * len)) { list.css('left', -600); } }); } function showButton() { buttons.eq(index-1).addClass('on').siblings().removeClass('on'); } function play() { timer = setTimeout(function () { next.trigger('click'); play(); }, interval); } function stop() { clearTimeout(timer); } next.bind('click', function () { if (list.is(':animated')) { return; } if (index == 5) { index = 1; } else { index += 1; } animate(-600); showButton(); }); prev.bind('click', function () { if (list.is(':animated')) { return; } if (index == 1) { index = 5; } else { index -= 1; } animate(600); showButton(); }); buttons.each(function () { $(this).bind('click', function () { if (list.is(':animated') || $(this).attr('class')=='on') { return; } var myIndex = parseInt($(this).attr('index')); var offset = -600 * (myIndex - index); animate(offset); index = myIndex; showButton(); }) }); container.hover(stop, play); play(); });
三.JS焦点图库 myFocus
demo:http://jellyandjammy.sinaapp.com/imageChange/myfocus.html
参考网站：http://www.chhua.com/myfocus/
实现思路：
下载并引入myFocus库文件;创建标准myFocus结构，如<div id="boxID">,<div class="pic">等;调用设置myFocus参数。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>image_change</title> <link rel="stylesheet" type="text/css" href="js/mf-pattern/mF_fancy.css"> <script type="text/javascript" src="js/myfocus-2.0.1.min.js"></script> <script type="text/javascript" src="js/mf-pattern/mF_fancy.js"></script> <script type="text/javascript"> myFocus.set({ id:'boxID',//焦点图盒子ID pattern:'mF_fancy',//风格应用的名称 time:3,//切换时间间隔(秒) trigger:'click',//触发切换模式:'click'(点击)/'mouseover'(悬停) width:600,//设置图片区域宽度(像素) height:400,//设置图片区域高度(像素) txtHeight:'default'//文字层高度设置(像素),'default'为默认高度，0为隐藏 }); </script> </head> <body> <div id="boxID"> <div class="loading">请稍候，图片正在加载中...</div> <div class="pic"> <ul> <li><a href="#"><img src="images/1.jpg"></a></li> <li><a href="#"><img src="images/2.jpg"></a></li> <li><a href="#"><img src="images/3.jpg"></a></li> <li><a href="#"><img src="images/4.jpg"></a></li> <li><a href="#"><img src="images/5.jpg"></a></li> </ul> </div> </div> </div> </body> </html>
注：当demo链接打不开时请复制网址到浏览器中打开
