功能简介：
1、点击向左、向右的绿色箭头，实现左滑和右滑分页展示；
2、点击某个小圆点，页面跳转到第几页；
3、当鼠标在页面上横向滑动距离超过50px时，页面滑动，切小圆点跟着变动；
dom结构如下：
界面逻辑如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<link href="style2.css" rel="stylesheet" type="text/css" />
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var downX=0;
var downY=0;
var img_count = 22;// 假设有10张图片
var page = 1;
var i = 4; //每版放4个图片
var page_count = Math.ceil(img_count / i); //只要不是整数，向下取整
$(function () {
var $parent = $("div.v_show");//根据当前点击元素获取到父元素
var $v_show = $parent.find("div.v_content_list"); //寻找到“内容展示区域”
var $v_content = $parent.find("div.v_content"); //寻找到“内容展示区域”外围的DIV元素
var v_width = $v_content.width();
// 追加图片内容
var _html = "";
for (var i = 0; i < img_count; i++) {
_html += '<li >'
+ '<a href="#">'
+ '<img src="img/' + (i + 1) + '.jpg" alt="迪丽热巴" />'
+ '</a>'
+ '<h4>'
+ '<a href="#">迪丽热巴</a>'
+ '</h4>'
+ '<span>播放:<em>28,276</em></span>'
+ '</li>';
}
$("#listInfo").append(_html);
// 追加小圆点
var _html2 = '<span class="current"></span>';
for (var i = 1; i < page_count; i++) {
_html2+='<span></span>';
}
$("#tips").append(_html2);
// key1:禁止拖动图片;也可以在img便签上加 ondragstart="return false;" 但对IE 没有效果
$('img').on('mousedown', function (e) {
e.preventDefault();//web浏览器阻止默认事件
})
// 点击圆点
$(".highlight_tip span").click(function () {
$(".highlight_tip span.current").removeClass("current");//找到class是current的元素，去掉current
$(this).addClass("current");//当前元素添加current
var _index = $(".highlight_tip span").index(this) + 1;
if (!$v_show.is(":animated")) { //判断“内容展示区域”是否正在处于动画
// 加入当前index+1>page值，向后滑动；否者向前滑动
if (_index > page) {
$v_show.animate({ left: '-=' + v_width * (_index - page) }, "slow");
} else {
$v_show.animate({ left: '+=' + v_width * (page - _index) }, "slow");
}
page = _index;
}
});
// 往左 按钮
$("span.prev").click(function () {
gotoLeft($v_show,$parent,v_width);
});
// 向右 按钮
$("span.next").click(function () { //绑定click事件
gotoRight($v_show,$parent,v_width);
});
// 鼠标事件，当滑动的距离大于50时，滚动
$(".v_content").mousedown(function (e) {
downX=e.pageX;
downY=e.pageY;
}).mouseup(function (e) {
var upX=e.pageX;
var upY=e.pageY;
var x=upX-downX;
var y=upY-downY;
if(x>50){//向右滑
gotoLeft($v_show,$parent,v_width);
}else if(x<-50){//向左
gotoRight($v_show,$parent,v_width);
}else{
return;
}
});
});
// 向左滑动
function gotoLeft(obj,objp,v_width){
if (!obj.is(":animated")) { //判断“内容展示区域”是否正在处于动画
if (page == 1) { //已经到第一个版面了,如果再向前，必须跳转到最后一个版面。
obj.animate({ left: '-=' + v_width * (page_count - 1) }, "slow");
page = page_count;
} else {
obj.animate({ left: '+=' + v_width }, "slow");
page--;
}
objp.find("span").eq((page - 1)).addClass("current").siblings().removeClass("current");
}
};
// 向右滑动
function gotoRight(obj,objp,v_width){
if (!obj.is(":animated")) { //判断“内容展示区域”是否正在处于动画
if (page == page_count) { //已经到最后一个版面了,如果再向后，必须跳转到第一个版面。
obj.animate({ left: '0px' }, "slow"); //通过改变left值，跳转到第一个版面
page = 1;
} else {
obj.animate({ left: '-=' + v_width }, "slow"); //通过改变left值，达到每次换一个版面
page++;
}
objp.find("span").eq((page - 1)).addClass("current").siblings().removeClass("current");
}
}
</script>
</head>
<body>
<div class="v_show">
<!-- 1 头部 -->
<div class="v_caption">
<h2 class="cartoon" title="绝世美人">绝世美人</h2>
<div class="highlight_tip" id="tips">
</div>
<div class="change_btn">
<span class="prev"></span>
<span class="next"></span>
</div>
</div>
<!-- 内容 -->
<div class="v_content">
<div class="v_content_list">
<ul id="listInfo">
</ul>
</div>
</div>
</div>
</body>
</html>
