web前端初学--焦点图

web前端初学--焦点图

对于代码大咖，jqurey的书写那是手到擒来。可对于web初学者来说，我的建议是能看懂，能修改，多收集！soso，今天给大家带来一个超好用的js！学霸们，一起来围观吧！

打开软件Dreamweaver cs5，根据第一节课的内容做好准备DW准备，效果如下图

1 下载jquery-1.7.2.min.js，存储到js文件中

2 新建js文件，命名为imgAuto.js，将如下代码复制到其中，再保存到js文件夹

$(function(){

var num=0;

var btn=$('.img-btn a');

var len=btn.length; //长度

var autoTime; //自动播放变量

var space={}; //命名空间

$('.img-btn a').hover(function(){

clearInterval(autoTime);

num=btn.index(this); //获取当前索引

space.showimg(num);

},function(){

space.time(num);

});

$('.pre,.next').hover(function(){

clearInterval(autoTime);

},function(){

num=space.getNum();

space.time(num);

});

$('.pre').click(function(){

num=space.getNum();

num===0?space.showimg(len-1):space.showimg(num-1); //超过长度返回最后一张图

});

$('.next').click(function(){

num=space.getNum();

num===len-1?space.showimg(0):space.showimg(num+1); //超过长度返回第一张图

});

space.time=function(num){ //自动播放

autoTime=setInterval(function(){

space.showimg(num);

num++;

if(num>=len){ //超过长度返回第一张图

num=0;

}

},3000);

};

space.showimg=function(i){ //显示焦点图

var img_con=$('.img-con a');

var img_btn=$('.img-btn a');

img_btn.eq(i).addClass('img-btn-checked').siblings('a').removeClass('img-btn-checked');

img_con.eq(i).stop(true,false).fadeIn(400).siblings('a').hide();

}

space.getNum=function(){ //获取当前索引

for(var i=0; i

if(btn.eq(i).hasClass('img-btn-checked')){

return i;

}

}

};

space.time(num);

});

此时js文件夹中有2个js文件

新建css文件，命名为slider.css，将如下代码复制到其中，再保存到css文件夹

#content{

width:1000px;

margin:auto;}

#imgauto{

width:100%;

height:422px;

position:relative;

}

.img-con,.next,.pre,.backbg,.img-btn{

display:block;

position:absolute;}

.img-con{

left:0px;

top:0;

z-index:50;}

.img-con a{

display:none;}

.next{

left:570px;

top:115px;

z-index:99;}

.pre{

left:20px;

top:115px;

z-index:98;}

.backbg{

width:600px;

height:150px;

left:40px;

top:365px;

z-index:1;

background:url(../images/blackbg.png) no-repeat;

}

.img-btn{

right:450px;

top:390px;

z-index:100;}

.img-btn a{

float:left;

margin-right:10px;

width:13px;

height:13px;

cursor:pointer;

FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/imgautobtn1.png');

background:url(../images/imgautobtn1.png) no-repeat;

}

.img-btn .img-btn-checked{

background:url(../images/imgautobtn2.png) no-repeat;}

打开index.html文件，在之间输入如下代码后保存

打开index.html文件，在之间输入如下代码后保存

全部保存后按F12浏览效果