软件Dreamweaver cs5
打开软件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
此时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文件，在
之间输入如下代码后保存
全部保存后按F12浏览效果
一定要下载jquery-1.7.2.min.js，放到js文件夹内，否则没有效果
img src='images/img1.png' width='1000' height='422'中src路径可自行修改