对于代码大咖，jqurey的书写那是手到擒来。可对于web初学者来说，我的建议是能看懂，能修改，多收集！soso，今天给大家带来一个超好用的js！学霸们，一起来围观吧！工具/原料more软件Dreamweaver cs5方法/步骤1/7分步阅读

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

2/7

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; ilen; i++){

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

return i;

}

}

};

space.time(num);

});

3/7

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

4/7

新建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/7

打开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/7

打开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 width=1000 height=422//a

a href=#img src=images/imgA1.png width=1000 height=422//a

a href=#img src=images/imgB1.png width=1000 height=422//a

/div

/div

!--imgauto--

/div

/div

/div

7/7

全部保存后按F12浏览效果

注意事项

一定要下载jquery-1.7.2.min.js，放到js文件夹内，否则没有效果

img src=images/img1.png width=1000 height=422中src路径可自行修改

智能仪器