web前端初学--焦点图
1、打开软件Dreamweaver cs5，根据第一节课的内容做好准备DW准备，效果如下图
2、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<len; i++){
if(btn.eq(i).hasClass('img-btn-checked')){
return i;
}
}
};
space.time(num);
});
3、此时js文件夹中有2个js文件
4、新建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;}
5、打开index.html文件，在<head></head>之间输入如下代码后保存
<link rel="stylesheet" type="text/css" href="css/slider.css"/>
<script language="javascript" type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script language="javascript" type="text/javascript" src="js/imgAuto.js"></script>
6、打开index.html文件，在<body></body>之间输入如下代码后保存
<div class="ui-refresh ">
<div class="data-list">
<div id="content">
<div id="imgauto">
<div class="img-btn">
<a class="img-btn-checked"></a>
<a></a>
<a></a>
</div>
<div class="img-con">
<a style="display:block" href="#"><img src="images/img1.png
<a href="#"><img src="images/imgA1.png
<a href="#"><img src="images/imgB1.png
</div>
</div>
<!--imgauto-->
</div>
</div>
</div>
7、全部保存后按F12浏览效果