web前端初学--焦点图

2024-10-15 01:16:57

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

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>  </div> </div> </div>

7、全部保存后按F12浏览效果