使用jQuery实现的平滑滚动轮播图
<script type="text/javascript">
/*
* 功能说明：
* 1.点击向左（右）的图标 ，平滑的切换到上（下）页。
* 2，无限的循环切换：第一页的商业为最后一页 ，最后一页的下，一张为第一页
* 3，每隔3秒自动切换到下一页
* 4，当鼠标进入图片区域时，自动切换停止 ，当鼠标离开时，又开始自动切换
* 5，切换页面时 ，下面的圆点也跟着同步切换
* 6，点击圆点切换对应的页。
* */
//-------------------------------页面的平滑翻页－－－－－－－－－－－－－
$(function() {
//点击向右或向左的图形进行翻页
var $content = $('#content');
var $list = $('#img_list');
var $points = $('#points>span');
var $prev = $('#but_1');
var $next = $('#but_2');
var IMG_WIDTH = 1000; //定义单张图片的长度
var TIME = 400; //时间
var ITEM_TIME = 10; //单张图片移动的时间
var imgCount = 7;
var index = 0; //起始圆点的索引
var moving = false;
/*
* @
* 手动的向左和向右的按钮
*/
$prev.click(function() {
nextPage(true);
})
$next.click(function() {
nextPage(false);
})
/*
*@
* 自动翻页（true ： 左 false ： 右）
*/
var $fanye = setInterval(function() {
nextPage(false);
}, 3000);
/*
*鼠标移入时自动翻页停止，箭头显示
* 鼠标移出时自动翻页启动，箭头消失
*/
$content.hover(function() {
//清除循环
clearInterval($fanye);
$next.css('display', 'block');
$prev.css('display', 'block');
},
function() {
$next.css('display', 'none');
$prev.css('display', 'none');
$fanye = setInterval(function() {
nextPage(false);
}, 3000);
})
/*
* @
* 点击圆点切换图片，并更新圆点的样式
*/
$points.click(function() {
var targetIndex = $(this).index();
//计算目标页的下标
if (targetIndex != index) {
nextPage(targetIndex);
}
})
/*
* 移到下一页的方法
*/
function nextPage(next) {
//定义一个标志位，当标志位为true时表示当前的页面为翻页的过程中
if (moving) {
return; //当标志为为true时退出（也就是说在翻页的过程中禁止其他的事件调用nextPage（）方法）
}
moving = true;
var offset = 0; //所需要移动的距离，单张 或 单张＊next
//判断参数是boolean 还是整型的（boolean型的就是向左右移动，整型的就是移动到指定的图片）
if (typeof next == 'boolean') {
offset = next ? IMG_WIDTH : -IMG_WIDTH; //左移还是右移
} else {
offset = -(next - index) * IMG_WIDTH;
}
var itemoffset = offset / (TIME / ITEM_TIME); //单位移动的距离
var now_margin_left = parseInt($list.css('margin-left')); //获得当前移动前的距离
//图片的停止位置
var targetLeft = now_margin_left + offset; //目标位置
var xunhuan = setInterval(function() {
now_margin_left += itemoffset; //获得当前的位置
if (now_margin_left === targetLeft) {
clearInterval(xunhuan); //到达目标的位置，并清除定时器
moving = false; //在翻页结束时（清除定时器）
//判断是否到达左边和右边的边界
if (now_margin_left == -(imgCount - 1) * IMG_WIDTH) {
now_margin_left = (-IMG_WIDTH);
}
if (now_margin_left === 0) {
now_margin_left = -(imgCount - 2) * IMG_WIDTH;
}
}
$list.css('margin-left', now_margin_left + 'px'); //修改css样式
}, ITEM_TIME);
updatePoints(next); //更新圆点的样式
/*
* 更新圆点的的方法
*/
function updatePoints(next) { //将目标圆点更新为targetIndex
var targetIndex = 0; //目标圆点
//计算出目标圆点的下标，给目标圆点添加 class on属性
/*
* 判断参数是boolean型的还是整型的
* （如果是boolean型的直接左右移动，如果是整型的直接跳转到图片的索引）
*
*/
if (typeof next == 'boolean') {
if (next) {
targetIndex = index - 1; // 0 ~ imgCount-1
//判断是否到达最左边或最右边
if (targetIndex == -(imgCount - 2)) { //第一个圆点
targetIndex = 0;
}
} else {
targetIndex = index + 1;
if (targetIndex == imgCount - 2) { //跳转到第5个图片
targetIndex = 0;
}
}
} else {
targetIndex = next;
}
//清除上一个圆点的样式，给目标圆点添加样式
$points.eq(index).removeClass('on');
$points.eq(targetIndex).addClass('on');
index = targetIndex; //移动方法
}
}
})
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
详细代码地址：https://download.csdn.net/download/wangzijian121/10630705
原文地址https://blog.csdn.net/wangzijian121/article/details/82143748
