之前有人问过我关于图片轮播的代码怎么写,虽然我是专注于后台的,但学习一些后台的只是还是比较有好处的,我有时候总是把简单的问题复杂化,其原因还是自己对于知识点的掌握不够牢固,导致不能够在实践中充分利用起来,所以,在平时的学习过程中,更多的应该注重于实践,只有实践,才能在这个过程中把知识充分吸收,充分利用。
话说回来,图片轮播,已经不能简单的依赖css了,但是问题来了,我却想到了用Ajax。。。。其实,思路还是对的,即效果的生成还是依靠对节点的操作,但依靠纯粹的JavaScript却太过于复杂,所以我就引入了jquery库,这里面的东西自己感觉都学完了,但是灵活的运用还是不太有把握,很多东西看起来单一,但是在实际的开发过程中结合起来却非常的重要。
另外我要说的是,也是我的个人观点,我看到有不少人去用dreamearver等所见即所得的开发工具去做特效,不是不行,我觉得,即便是做出来,代码的复杂度和可阅读性会大大的下降,而且,很不利于后期的维护工作,不懂代码的话会无法深入到代码去修该,所以说,我的建议是使用文本编辑工具如notepad++,如果是有规模的项目可以用集成开发工具,如Zend studio等,Dreamweaver是美工用的东西,不是面向开发人员的。
回归到正题。我把图片轮播的代码文件方面分为4块: html文件 css文件 js文件 图片文件。
html;
<html>
<head>
<meta charset="utf-8" />
<title>图片轮播</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my.js"></script>
<link rel="stylesheet" type="text/css" href="my.css"/>
</head>
<body>
<div class="main">
<div class="myslide">
<div class="myslidetwo">
<img src="01.jpg"/>
<img src="02.jpg"/>
<img src="03.jpg"/>
<img src="04.jpg"/>
</div>
</div>
<div class="daohang">
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<ol>
<div>
</div>
</body>
</html>
css文件:
body{
background-color: #dddddd;
}
*{
margin: 0px;
padding: 0px;
}
.main{
position: absolute;
left: 50%;
top: 50%;
margin: -175px 0px 0px -250px;
width: 500px;
height: 350px;
}
.myslide{
float: left;
width: 500px;
height: 350px;
position: absolute;
overflow: hidden;
}
.myslidetwo{
position: absolute;
overflow: hidden;
width: 2000px;
}
.myslidetwo img{
float: left;
width: 500px;
height: 350px;
}
.daohang{
position: absolute;
bottom: -40px;
left: 210px;
width: 200px;
/*background: red;*/
}
ol li{
list-style: none;
float: left;
border: #fc0;
font-size: 30px;
background: #fff;
cursor: pointer;
}
ol li.current{
background: #0f0;
}
js文件(注意:已经引入jquery文件)
$(document).ready(function(){
var _now=0;
var oul=$(".myslidetwo");
var numl=$(".daohang ol li");
var ali=$(".myslide").eq(0).width();
numl.click(function(){
var index=$(this).index();
$(this).addClass("current").siblings().removeClass();
oul.animate({'left':-ali*index},500);
})
setInterval(function(){
if(_now==numl.size()-1){
_now=0;
}else{
_now++;
}
numl.eq(_now).addClass("current").siblings().removeClass();
oul.animate({'left':-ali*_now},500);
},2000)
});
这样就完成了图片的轮播,注意的是图片的尺寸,轮换的事件等