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

最新推荐文章于 2024-06-21 17:17:44 发布

静媛不圆

最新推荐文章于 2024-06-21 17:17:44 发布

阅读量4.2k

点赞数

分类专栏： JavaScript 小程序文章标签：图片切换 CSS3 transition 滑动

本文链接：https://blog.csdn.net/caicaijingyuan/article/details/43909521

版权

本文介绍如何使用CSS3的transition属性来创建类似淘宝首页的图片滑动切换效果，通过对比分析，详细讲解实现过程和技术要点。

摘要由CSDN通过智能技术生成

与上一文章对比着看效果更佳

<!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();
});
function huadong() {
	num++;
	
		if(num<4) {
			//$("img").animate({left:"-=250"},500);
			document.getElementByI

最低0.47元/天解锁文章

静媛不圆

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
淘宝首页图片滑动切换效果基于CSS3的transition方法实现

与上一文章对比着看效果更佳img { height:400px; width:1250px; /*使用relative，才能使用left、top性质*/ position:relative; top:0px; left:0px; transition:left 0.5s;}var num = 0;var x = 0;$(document).re
复制链接

扫一扫