淘宝首页 图片滑动切换效果 基于jQuery的animate方法实现

内容如题

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
img {
	height:400px;
	width:1250px;
	/*使用relative,才能使用left、top性质*/
	position:relative;
	top:0px;
	left:0px;
	/*transition:left 0.5s;*/
}
</style>
</head>
<body>
<!--overflow:hidden性质使得超出div宽度的部分隐藏-->
<div id="buju" style="width:250px;height:400px;margin:80px auto;border:2px black solid;overflow:hidden;">
<img id="tt" src="55.png" alt="tupian" title="coocku"/>
<script src="js/jquery-1.6.2.min.js"></script>
<script>
var num = 0;
var x = 0;
$(document).ready(function() {

	//setInterval("huadong()",3000);
	huadong();

});
window.onfocus = gogo;
function gogo() {
	var st =setInterval(huadong,3000);
}
function stopgo() {
	clearInterval(st);

}
//当网页出去焦点时,需要消掉定时器,因为一旦打开另一个标签页,这个标签页的定时器还在后台进行
window.onblur = stopgo;
function huadong() {
	num++;

		if(num<4) {
			$("img").animate({left:"-=250"},500);
			//document.getElementById("tt").style.left =x +"px";
		}
		else {
			$("img").animate({left:0},500);
			//document.getElementById("tt").style.left =0 +"px";
			x =0;
			num =0;
		}
		x -= 250;
	//	setTimeout("huadong()",3000);
}
</script>
</div>
</body>
</html>

时间: 2024-10-02 22:54:32

淘宝首页 图片滑动切换效果 基于jQuery的animate方法实现的相关文章

淘宝首页 图片滑动切换效果 基于CSS3的transition方法实现

与上一文章对比着看效果更佳 <!doctype html> <html> <head> <meta charset="utf-8"> <style> img { height:400px; width:1250px; /*使用relative,才能使用left.top性质*/ position:relative; top:0px; left:0px; transition:left 0.5s; } </style>

js实现淘宝首页图片轮播效果

原文:http://ce.sysu.edu.cn/hope2008/Education/ShowArticle.asp?ArticleID=10585 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>淘宝首页图片轮播效果</title> <style> <!-- * {margin: 0;padding:0;} body

手机端图片滑动切换效果

最近公司要求开发wap版本页面,碰到了个图片滑动切换效果,折腾了半天,自己封装了一个比较通用的小控件,在此分享一下. 大概功能:可以自定义是否自动切换,支持单手滑动图片进行切换,支持左右滑动切换.循环切换等等,具体可以拿demo代码自己本地试试,注意只支持手机端哦 大概思路:通过touchstart.touchmove.touchend 三个事件加上css3的3d变化效果配合,实现滑动切换图片, 开发是基于Zepto框架,当然也支持其他任何一款手机端框架,只需将代码中的美元符号$换为指定框架操作

【原生javascript】margin-top实现淘宝首页图片滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta h

淘宝首页左右摆动图标效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

一款常用的漂亮的JS图片滑动切换效果

<HTML> <HEAD> <TITLE>一款常用的漂亮的JS图片滑动切换效果丨石家庄展柜制作|</TITLE> <style> BODY { PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px } UL { PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PAD

个人学习JQ插件编写成果:little酷炫的图片滑动切换效果

工作一个多月了,好久没来冒冒泡了,看了@wayong的JQ插件教程,自己编写了一个模仿拉勾网首页广告栏滑动特效的JQ插件,现在跟朋友们分享分享! 先上demo链接:http://runjs.cn/detail/gpowdhhk 快要下班了~先把代码放出来~~回家再编辑~ 这里是HTML代码: 1 <!--js酷炫图片滑动hover效果,类似拉勾网--> 2 <div class="beauty-go-outer" id="my-div"> 3

React Native之ViewPagerAndroid仿淘宝首页顶部分类布局效果实现

转载请注明出处:http://blog.csdn.net/woshizisezise/article/details/51030410 大家好,趁着现在别人都去吃饭的时间,来给大家讲一讲React Native中Android部分的控件ViewPagerAndroid的讲解,这里特别提醒一下,我写的博客都是基于大家有一些React Native基础的前提下,因为关于React Native这一系列的博文我是最近开始更新,由于自身工作繁重(每天早上10点干到晚上10点,是不是很惨?),所以暂时还没

淘宝首页性能优化实践

想必很多人都已经看到了新版的淘宝首页,它与以往不太一样,这一版页面中四处弥散着个性化的味道,由于独特的个性化需求,前端也面临各方面的技术挑战: 数据来源多 串行请求渲染一个模块 运营数据和个性化数据匹配和管理 数据兜底容灾 本次淘宝首页改版,虽已不再支持 IE6 和 IE7 等低版本的古董浏览器,但依然存在多个影响首页性能的因素: 依赖系统过多,数据的请求分为三块,其一是静态资源(如 js/css/image/iconfont 等):其二是推到 CDN 的静态数据(如运营填写的数据.前端配置信息