您的位置：首页 > Web前端 > JavaScript

js实现图片自动切换效果

2016-03-28 15:38 791 查看

var moves;
$(function() {
var imgs = $("#imgs li");
//取的里标签的个数
var currentIndex = imgs.length;

moves = function () {
var img = $(sh(getCurrentIndex()));
//alert(currentIndex);
//$(sh(currentIndex-1<0?imgs.length-1:currentIndex-1)).css({zIndex:-1});
img.animate({left: "-=100%"}, 1000, function () {
img.css({left: 0, zIndex: -2});
window.setTimeout("moves()", 3000);
});
};
moves();
//返回img的位置3,2,1
function getCurrentIndex() {
if (currentIndex < 1) {
currentIndex = imgs.length;
}
return --currentIndex;
}

function sh(index) {
//imgs是定义取的数据
$.each(imgs, function (i, img) {
if (i != index) {
document.title = i+"="+index;
$(img).css({
"z-index": -2
});
}
});
$(imgs[index - 1 < 0 ? imgs.length - 1 : index - 1]).css({
"z-index": -1
})
return $(imgs[index]).css({
"z-index": -0
});
}
});
</script>
<style>
*{margin:0px; padding:0px;}
a{text-decoration:none;}
ul{list-style:none;}
img{ border:0;}
#neck{position:relative; text-align:center;background:#efefef;z-index:-1;height:750px; }
#imgs li{position:absolute;top:0px; left:0px;width:100%;}

</style>
</head>
<body>
<div id="neck">
<ul id="imgs">
<li><a href="#"><img src="bootstrap/1.jpg" /></a></li>
<li><a href="#"><img src="bootstrap/2.jpg" /></a></li>
<li><a href="#"><img src="bootstrap/3.jpg"/></a></li>
</ul>
<div style="clear:both;"></div>
</div>

</div>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航