标签:jpg tom text dao index 知识 代码 建议 slide
之前有人问过我关于图片轮播的代码怎么写,尽管我是专注于后台的,但学习一些后台的仅仅是还是比較有优点的,我有时候总是把简单的问题复杂化,其原因还是自己对于知识点的掌握不够坚固,导致不可以在实践中充分利用起来。所以。在平时的学习过程中,很多其它的应该注重于实践,仅仅有实践,才干在这个过程中把知识充分吸收,充分利用。
话说回来,图片轮播,已经不能简单的依赖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; }
$(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) });这样就完毕了图片的轮播,注意的是图片的尺寸,轮换的事件等
标签:jpg tom text dao index 知识 代码 建议 slide
原文地址:http://www.cnblogs.com/jhcelue/p/6910391.html