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

挑战1：使用jQuery生成水平图片幻灯效果

2015-03-10 17:35 281 查看

在http://www.gbtags.com/gb/gbtutorials/478.htm发现的：

<!doctype html>
<html>
<head>
<style type="text/css">

.slider {
width: 542px;
overflow: hidden;
}

.slider ul {
width: 10000px;
list-style: none;
padding: 0;
margin: 0;
}

.slider li {
display: inline-block;
float: left;
}
</style>
</head>
<body>
<div class="slider">
<ul>
<li><img src="http://www.gbtags.com/gb/networks/uploads/afb73f09-8334-46b2-ad66-4abeb7c67a0a/images/gbtags1.jpg" alt="image"></li>
<li><img src="http://www.gbtags.com/gb/networks/uploads/afb73f09-8334-46b2-ad66-4abeb7c67a0a/images/gbtags2.jpg" alt="image"></li>
<li><img src="http://www.gbtags.com/gb/networks/uploads/afb73f09-8334-46b2-ad66-4abeb7c67a0a/images/gbtags3.jpg" alt="image"></li>
<li><img src="http://www.gbtags.com/gb/networks/uploads/afb73f09-8334-46b2-ad66-4abeb7c67a0a/images/gbtags4.jpg" alt="image"></li>
</ul>
</div>

<div id="slider-nav">
<button data-direction="prev"> «　上一个</button>
<button data-direction="next">下一个 »</button>
</div>
<script type='text/javascript' src="http://cdn.gbtags.com/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
(function(){
var Slider = function(){
var imageWidth = $(".slider img:eq(0)").width();
var imageLength = $(".slider img").size();
var $slider = $(".slider ul");
var index = 0;

var slideImage = function(index){
var margin = -1 * imageWidth * index;
$slider.animate({"margin-left": margin});
}

this.prev = function(){
if(index == 0) {
index = imageLength;
}

slideImage(--index);
}

this.next = function(){
if(index + 1 == imageLength) {
index = -1;
}

slideImage(++index)
}
};

var slider = new Slider();

$("#slider-nav button").click(function(){
if($(this).data("direction") == "prev") {
slider.prev();
} else {
slider.next();
}
});
})(jQuery);
</script>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航