移动端的轮播图，支持自动轮播，触摸滑动。
最后一页右滑会滚到第一页；第一页左滑会滚到最后一页。
移动端通常有默认触摸事件，要实现在图片上触摸滑动，要先禁用默认事件。
这里还缺一个jquery，请自行下载一个。jquery的animate动画很流畅。我一开始自己写的动画不流畅，就用了jquery的animate。
slide.html
<html>
<head>
<meta http-ｅquiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" >
<title>轮播图</title>
<link rel="stylesheet" type="text/css" href="./slide.css"/>
<script src="./jquery-1.10.2.min.js"></script>
<script src="./slide.js"></script>
</head>
<body>
<div class="slide-cont" >
<ul class="slides">
<li style="background-color: green"> <img src="./slide1.jpg" alt="图片加载失败"/> </li>
<li style="background-color: blue"> <img src="./slide2.jpg" alt="图片加载失败"/> </li>
<li style="background-color: yellow"> <img src="./slide3.jpg" alt="图片加载失败"/> </li>
<li style="background-color: #abc"> <img src="./slide3.jpg" alt="图片加载失败"/> </li>
</ul>
</div>
</body>
</html>
slide.js
/**
- author: wdx
- 2017.02
*/
$(document).ready(function(){
var slide_dom_1 = '.slides'; //轮播图ul容器
var _SL = {
ul : $(slide_dom_1),
lis: $(slide_dom_1).find('li'), //每张图
item: 1, //当前展示的图片序号，从1开始
width: $(slide_dom_1).parent().width(), //轮播图ul容器父节点div的宽度
size: $(slide_dom_1).find('li').length, //图的总数
goLeft: true, //向左滑动
speed: 4000, //每n秒自动滚动一次。单位ms
speedMove: 800, //自动滚动时动画速度
//speedMove_temp: 1000, //speedMove_temp = speedMove
//speedMove_touch: 300, //手动滚动时动画速度
bMove: true, //手动滚动开关
bRun: true, //自动滚动开关
timer: null, //定时器
}
_SL_start_run();
//窗口大小改变时重置滚动
window.onresize = function() {
var time;
if (time){
clearTimeout(time)
}
time = setTimeout(function() {
_SL_start_run();
}, 100);
};
//开始
function _SL_start_run() {
clearInterval(_SL.timer);
_SL_init();
_SL.timer = setInterval(_SL_run, _SL.speed);
}
//初始化
function _SL_init() {
_SL.width = $(slide_dom_1).parent().width();
//设置样式
$(_SL.lis).width(_SL.width);
$(_SL.ul).width(_SL.width * _SL.size);
$(_SL.ul).css('margin-left', (1 - _SL.item) * _SL.width);
//加中间底部的点
var $slide = $('.slides');
var thml_ = '';
for (var i=0; i<_SL.size; i++) {
if (i == _SL.item-1) {
thml_ += '<li class="color-ddd slide-mark-li-active"></li>';
} else {
thml_ += '<li class="color-ddd"></li>';
}
}
thml_ = '<ul>'+ thml_ +'</ul>';
$('.slides').parent().append('<div class="slide-mark-cont">' + thml_ + '</div>');
var width_ = _SL.size * 1.2 * 16; //li.width + li.margin-left;
var marginLeft_ = _SL.width/2 - width_/2;
$('.slide-mark-cont ul').css('margin-left', marginLeft_);
}
//滚动到第itemGoto张图(一次)
function _SL_goto(itemGoto) {
//console.log('slide to '+itemGoto);
if (itemGoto > _SL.size) {
return;
}
if (_SL.bMove) {
_SL.bMove = false;
var left = (1 - itemGoto) * _SL.width;
//哪张图的小圆圈变化
$('.slide-mark-cont ul li').removeClass('slide-mark-li-active');
$('.slide-mark-cont ul li').eq(itemGoto-1).addClass('slide-mark-li-active');
$(_SL.ul).animate({
'margin-left': left,
}, _SL.speedMove, function(){
//_SL.speedMove = _SL.speedMove_temp;
_SL.item = itemGoto;
_SL.bMove = true;
_SL.bRun = true;
});
}
}
//自动滚动
function _SL_run() {
if (_SL.bRun) {
var itemGoto = 1;
if (_SL.goLeft) {
itemGoto = (_SL.item) % _SL.size + 1;
} else {
itemGoto = _SL.item - 1;
itemGoto = itemGoto==0 ? _SL.size : itemGoto;
}
_SL_goto(itemGoto);
}
}
//滑动事件
$(_SL.ul).on("touchstart", function(e) {
// 判断默认行为是否可以被禁用
if (e.cancelable) {
// 判断默认行为是否已经被禁用
if (!e.defaultPrevented) {
e.preventDefault();
}
}
startX = e.originalEvent.changedTouches[0].pageX,
startY = e.originalEvent.changedTouches[0].pageY;
});
$(_SL.ul).on("touchend", function(e) {
if (e.cancelable) {
if (!e.defaultPrevented) {
e.preventDefault();
}
}
moveEndX = e.originalEvent.changedTouches[0].pageX,
moveEndY = e.originalEvent.changedTouches[0].pageY,
X = moveEndX - startX,
Y = moveEndY - startY;
//左滑
if ( X < 0 ) {
//console.log('<--');
//$(_SL.ul).stop();
_SL.bRun = false;
_SL.goLeft = true;
//_SL.speedMove = _SL.speedMove_touch;
var itemGoto = itemGoto = (_SL.item) % _SL.size + 1;
_SL_goto(itemGoto);
}
//右滑
else if ( X > 0 ) {
//console.log('-->');
//$(_SL.ul).stop();
_SL.bRun = false;
_SL.goLeft = false;
//_SL.speedMove = _SL.speedMove_touch;
var itemGoto = _SL.item - 1;
itemGoto = itemGoto==0 ? _SL.size : itemGoto;
_SL_goto(itemGoto);
}
//下滑
else if ( Y > 0) {
}
//上滑
else if ( Y < 0 ) {
}
//单击
else{
}
});
});
slide.css
* {padding: 0; margin: 0;}
body {font-size: 1.4rem;}
ul, li {list-style: none;}
html, body {
height: 100%; width: 100%;
font-size: 62.5%;
}
.slide-cont {
width: 100%; height: 16rem;
overflow: hidden;
position: relative;
}
.slides {
width: 100%; height: 100%; float: left;
}
.slides>li {
width: 100%; height: 100%; float: left;
}
.slides>li>a {
width: 100%; height: 100%;
}
.slides>li>img {
width: 100%; height: 100%;
}
.slides>li>a>img {
width: 100%; height: 100%;
}
.color-ddd {
background-color: #ddd;
opacity: 0.3;
}
.slide-mark-li-active {
opacity: 1.0;
background-color: #fff;
}
.slide-mark-cont {
width: 100%; height: 0.2rem;
position: absolute; left: 0; bottom: 0.5rem;
}
.slide-mark-cont>ul {
height: 100%;
}
.slide-mark-cont>ul>li {
float: left; height: 100%; width: 1.0rem; margin-left: 0.2rem;
}
————————————————
版权声明：本文为CSDN博主「qq444616055」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq444616055/article/details/87734187
'课程 > 程序' 카테고리의 다른 글
| 엑셀(Excel)의 기본 (0) | 2021.02.18 |
|---|---|
| 用slide实现图片轮播效果 (0) | 2019.10.30 |