对于代码大咖，jqurey的书写那是手到擒来。可对于web初学者来说，我的建议是能看懂，能修改，多收集！soso，今天给大家带来一个超好用的js！学霸们，一起来围观吧！
工具/原料
软件Dreamweavercs5
方法/步骤
1、打开软件Dreamweavercs5，根据第一节课的内容做好准备DW准备，效果如下图
2、1蛴蛩钔淞下载jquery-1.7.2.min.js，存储到js文件中2新建js文件，命名为imgAuto.js，将如下代码拎粹蠃账复制到其中，再保存到js文件夹$(function(){ varnum=0; varbtn=$('.img-btna'); varlen=btn.length;//长度 varautoTime;//自动播放变量 varspace={};//命名空间 $('.img-btna').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){//显示焦点图 varimg_con=$('.img-cona'); varimg_btn=$('.img-btna'); 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(vari=0;i<len;i++){ if(btn.eq(i).hasClass('img-btn-checked')){ returni; } } }; 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-cona{ 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-btna{ 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>之间输入如下代码后保存<linkrel="stylesheet"type="text/css"href="css/slider.css"/><scriptlanguage="javascript"type="text/javascript"src="js/jquery-1.7.2.min.js"></script><scriptlanguage="javascript"type="text/javascript"src="js/imgAuto.js"></script>
6、打开index.html文件，在<水瑞侮瑜body></body>之间输入如下代码后保台仵瑕噤存 <divclass="ui-refresh"><divclass="data-list"><divid="content"><divid="imgauto"><divclass="img-btn"><aclass="img-btn-checked"></a><a></a><a></a></div><divclass="img-con"><astyle="display:block"href="#"><imgsrc="images/img1.png"width="1000"height="422"/></a><ahref="#"><imgsrc="images/imgA1.png"width="1000"height="422"/></a><ahref="#"><imgsrc="images/imgB1.png"width="1000"height="422"/></a></div></div><!--imgauto--></div></div></div>
7、全部保存后按F12浏览效果