1、打开软件Dreamweaver cs5，根据第一节课的内容做好准备DW准备，效果如下图
2、下载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" 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、全部保存后按F12浏览效果