在慕课学习了JavaScript焦点轮播图特效，在此做一个整理。
首先是html结构，我用的是本地同文件夹下的三张图片，多出来的第一张（pic3副本）和最后一张图片（pic1副本）是为了实现无缝切换效果。通过设置div容器的left值来实现图片切换时，当轮播到pic3需要切换到pic1时，最后一张图片（也就是pic1副本）被切换进来，此时left值已经为-1600px，并且同时我们又将其left值改为-400px，这样就回到了真正的第一张图pic1。：
<div id="container">
<div id="pic" style="left:-400px">
<div><a href="javascript:;"><img src="DSC02637.jpg" alt="pic3copy"></a></div>
<div><a href="javascript:;"><img src="DSC01627.jpg" alt="pic1"></a></div>
<div><a href="javascript:;"><img src="DSC01628.jpg" alt="pic2"></a></div>
<div><a href="javascript:;"><img src="DSC02637.jpg" alt="pic3"></a></div>
<div><a href="javascript:;"><img src="DSC01627.jpg" alt="pic1copy"></a></div>
</div>
<ul id="position">
<li class="cur"></li>
<li class=""></li>
<li class=""></li>
</ul>
<a href="javascript:;" id="prev" class="arrow"><</a>
<a href="javascript:;" id="next" class="arrow">></a> </div>
css样式
*{
margin:;
padding:;
text-decoration: none;
}
#container{
position: relative;
width: 400px;
height: 200px;
overflow: hidden;/*隐藏溢出的图片*/
}
#pic{
width:2000px;/*5张图的宽度*/
position: absolute;/*基于父容器进行定位*/
}
#pic div{
float: left;
background: #5dd94e;
}
#pic div img{
width: 400px;
height: 200px;
}
#position{
position: absolute;
bottom:;
right:;
margin:;
background: #000;
opacity: 0.4;
width: 400px;
text-align: center;
}
#position li{
width: 10px;
height: 10px;
margin:0 2px;
display: inline-block;
-webkit-border-radius: 5px;
border-radius: 5px;
background-color: #afafaf;
}
#position .cur{
background-color: #ff0000;
}
.arrow {
cursor: pointer;
display: none;
line-height: 39px;
text-align: center;
font-size: 36px;
font-weight: bold;
width: 40px;
height: 40px;
position: absolute;
z-index:;
top: 80px;
background-color: RGBA(0,0,0,.3);
color: #fff;
}
.arrow:hover {
background-color: RGBA(0,0,0,.7);
}
#container:hover .arrow {
display: block;
}
#prev {
left: 20px;
}
#next {
right: 20px;
}
JavaScript
window.onload=function(){
var container=document.getElementById("container");
var pic=document.getElementById("pic");
var btns=document.getElementById("position").getElementsByTagName("li");
var prev=document.getElementById("prev");
var next=document.getElementById("next");
var flag=false;
var index=0;//小圆点索引
for (var i = 0; i < btns.length; i++) {
btns[i].index=i;
}
//控制小圆点显示
function showBtn(index){
for (var i = 0; i < btns.length; i++) {
if(btns[i].className=='cur'){
btns[i].className='';
break;
}
}
btns[index].className="cur";
}
//向右滑动index+1，index>2,即从最后一张切换到第一张时，index置为0
//flag为true标识正在切换
next.onclick=function(){
if(flag){
return;
}
index++;
index = index > 2 ? 0 : index;
showBtn(index);
if(!flag){
animate(-400);
}
}
prev.onclick=function(){
if(flag){
return;
}
index--;
index = index < 0 ? 2 : index;
showBtn(index);
if(!flag){
animate(400);
}
}
function animate(offset){
flag=true;
var newLeft=parseInt(pic.style.left) + offset ;
var time=300;//位移总时间
var interval=10;//位移间隔时间
var speed=offset/(time/interval);//每次位移量
//平滑移动
function go(){
if ( (speed > 0 && parseInt(pic.style.left) < newLeft) || (speed < 0 && parseInt(pic.style.left) > newLeft)) {
pic.style.left = parseInt(pic.style.left) + speed + 'px';
setTimeout(go, interval);
}
else{
flag=false;
pic.style.left = newLeft+ "px";
if(newLeft > -400 ){
pic.style.left = -1200 + "px";
}
if(newLeft < -1200 ){
pic.style.left = -400 + "px";
}
}
}
go();
}
//小圆点点击事件
for (var i = 0; i < btns.length; i++) {
btns[i].onclick=function (){
if (flag) {
return;
}
//点击当前轮播图片则不继续执行
if(this.className=="cur"){
return;
}
var myIndex=this.index-index;
var offset=-400*myIndex;
index=this.index;
showBtn(index);
animate(offset);
}
}
//自动播放
function play() {
timer = setTimeout(function () {
next.onclick();
play();
}, 2000);
}
function stop() {
clearTimeout(timer);
}
container.onmouseover = stop;
container.onmouseout = play;
play();
}
