码迷,mamicode.com
首页 > 其他好文 > 详细

图片轮播的手写代码

时间:2017-05-26 21:47:18      阅读:180      评论:0      收藏:0      [点我收藏+]

标签: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;
}

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)
	
});
这样就完毕了图片的轮播,注意的是图片的尺寸,轮换的事件等

图片轮播的手写代码

标签:jpg   tom   text   dao   index   知识   代码   建议   slide   

原文地址:http://www.cnblogs.com/jhcelue/p/6910391.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!