jQuery实现图片轮播效果

　　　图片轮播是一个老生常谈的东西，今天跟着书上写了一个demo。（参考《锋利的jQuery》）

　　　要实现的功能，图片可以向左向右滚动，自动循环播放，并且可以跳转至指定页面。



　　　查看示例

　　　图片滚动效果主要用到的东西就是position:absolute 和 left: 0; overflow：hidden属性，用于定位图片和隐藏显示多余图片。

　　　具体代码可以点开示例链接——查看网页源代码。。

　　　看一下代码结构吧

　　　scroll.html:

　　　

<div class="v_show">
<div class="v_caption">
//4个页面标识，可点击切换至具体页面
<div class="highlight_tip">
<span class="current">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
//向左 向右按钮
<div class="change_btn">
<span class="prev">back</span>
<span class="next">next</span>
</div>
</div>
//图片容器
<div class="v_content">
//图片显示区域
<div class="v_content_list">
<ul>
//将图片资源全部写在这里
<li><a href="#"><img src="img/01.jpg" alt="海贼王"/></a><h4><a href="#">海贼王</a></h4>
<span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="img/01.jpg" alt="海贼王"/></a><h4><a href="#">海贼王</a></h4>
<span>播放:<em>28,276</em></span></li>

.......
</ul>
</div>
</div>
</div>

　　　main.js:

　　　

$(function () {
var page = 1;
var i = 4;
//向右滚动效果实现
$("span.next").click(function () {
//console.log('enter');
var $parent = $(this).parents("div.v_show");
var $v_show = $parent.find("div.v_content_list");
var $v_content = $parent.find("div.v_content");

//获取内容显示区宽度
var v_width = $v_content.width();

var len = $v_show.find("li").length;
var page_count = Math.ceil(len / i);
if (!$v_show.is(":animated")) {
//如果已经是最后一页，则滚动到第一页
if (page == page_count) {
$v_show.animate({left: "0"}, "normal");
page = 1;
} else {
$v_show.animate({left: "-=" + v_width}, "normal");
page++;
}

$parent.find("span").eq((page - 1)).addClass("current").siblings().removeClass("current");
}

});

//向左滚动效果实现
$("span.prev").click(function () {
var $parent = $(this).parents("div.v_show");
var $v_show = $parent.find("div.v_content_list");
var $v_content = $parent.find("div.v_content");

var v_width = $v_content.width();

var len = $v_show.find("li").length;
var page_count = Math.ceil(len / i);
//防止多次连续点击鼠标移除后仍在进行动画
//判断当前元素是否处于动画状态，并选择是否执行动画操作
if (!$v_show.is(":animated")) {
//如果已经是第一页，则滚动到最后一页
if (page == 1) {
$v_show.animate({left: '-=' + v_width * (page_count - 1)}, "slow");
page = page_count;
} else {
$v_show.animate({left: "+=" + v_width}, "normal");
page--;
}
//上方4个标识的样式增加与移除
$parent.find("span").eq((page - 1)).addClass("current").siblings().removeClass("current");

}

});

$(".highlight_tip span").click(function () {
var $pageToGo = $(this).index() +1;

var $parent = $(this).parents("div.v_show");
var $v_show = $parent.find("div.v_content_list");
var $v_content = $parent.find("div.v_content");

var v_width = $v_content.width();

var len = $v_show.find("li").length;

if (!$v_show.is(":animated")) {
//判断向右滚动还是向左滚动
if ($pageToGo > page) {

$v_show.animate({left: "-=" + v_width*($pageToGo - page)}, "normal");
page = $pageToGo;
$parent.find("span").eq((page - 1)).addClass("current").siblings().removeClass("current");

} else {
$v_show.animate({left: "+=" + v_width*(page - $pageToGo)}, "normal");
page = $pageToGo;
$parent.find("span").eq((page - 1)).addClass("current").siblings().removeClass("current");

}
}

});
//设置自动滚动 时间设为3秒
setInterval("$('span.next').trigger('click')",3000);
}
)

主要css样式：

.highlight_tip span {
display: inline;
float: left;
width: 7px;
height: 7px;
overflow: hidden;
margin: 0 2px;
background: url(img/btn_cartoon.gif) no-repeat 0 -320px;
text-indent: -9999px;
cursor: pointer;
}

.v_content {
position: relative;
width: 592px;
height: 160px;
overflow: hidden;
border-right: 1px solid #E7E7E7;
border-bottom: 1px solid #E7E7E7;
border-left: 1px solid #E7E7E7;
}

.v_content_list {
position: absolute;
width: 2500px;
top: 0px;
left: 0px;
}

.highlight_tip .current {
background-position: 0 -220px;
}

详细实现代码可以查看上方给出的示例链接，在此不赘述。