淘宝首页 图片滑动切换效果 基于CSS3的transition方法实现
2015-02-22 21:36
1001 查看
与上一文章对比着看效果更佳
<!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.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>
<!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.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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 淘宝首页 图片滑动切换效果 基于jQuery的animate方法实现
- 利用javascript从数据库取数据来实现CSDN首页图片的切换效果(新增下载地址)
- JavaScript实现图片的滑动切换效果 的Js代码
- CSS3 transition实现超酷图片墙动画效果
- js实现图片从左往右渐变切换效果的方法
- 利用javascript从数据库取数据来实现CSDN首页图片的切换效果
- js实现淘宝首页图片轮播效果(修正图片滚动顺序的问题)
- jquery简单图片切换显示效果实现方法
- CSS3 transition实现超酷图片墙动画效果
- 自定义TabHost实现背景图片随选项卡切换滑动效果
- 淘宝首页图片切换效果模仿
- 实现图片滑动切换展示效果
- 利用javascript从数据库取数据来实现CSDN首页图片的切换效果
- 自定义TabHost实现背景图片随选项卡切换滑动效果
- 基于Flex 4.6实现 Picture Slide （图片滑动展示效果）
- JavaScript实现图片的滑动切换效果
- JavaScript实现图片的滑动切换效果 的Js代码
- js 仿淘宝首页最新图片幻灯切换效果
- 方法自身实现异部调用和WinForm上图片切换效果