<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
width: 100%;
position: relative;
overflow: hidden;
}
.innercontainer {
position: relative;
width: 800%;
left: 0;
right: 0;
}
.wraperimg {
width: 500px;
float: left;
}
.pagination {
position: absolute;
bottom: 10px;
width: 100%;
text-align: center;
}
.pagination span {
display: inline-block;
width: 10px;
height: 10px;
background: salmon;
line-height: 5px;
border-radius: 100%;
margin-right: 10px;
}
.pagination .active {
background: aqua;
color: white;
}
img {
width: 100%;
height: 400px;
}
</style>
<body>
<div class="container">
<div class="innercontainer">
<div class="wraperimg"><img src="img/1.png" /></div>
<div class="wraperimg"><img src="img/2.png" /></div>
<div class="wraperimg"><img src="img/3.png" /></div>
<div class="wraperimg"><img src="img/4.png" /></div>
</div>
<div class="pagination">
<!--<span class="active"></span>-->
</div>
</div>
</body>
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 插入第一张图在尾部
var firstimg = $(".innercontainer .wraperimg:first-child img")[0].src;
console.log(firstimg, 'fiss')
var lastimg = $(" <div class='wraperimg'>" +
"<img src = '" + firstimg + "' />" +
"</div >");
$(".innercontainer .wraperimg:last-child").after(lastimg)
//屏幕宽度
var viewWidth = $(window).width();
$('.wraperimg').css('width', viewWidth);
//插入小店
var imglenght = $('img').length;
var newspan;
for (var i = 0; i < imglenght - 1; i++) {
if (i == 0) {
newspan = $('<span class="active"></span>');
$('.pagination').append(newspan);
} else {
newspan = $('<span></span>');
$('.pagination').append(newspan);
}
}
//移动端
var browser = {
versions: function () {
var u = navigator.userAgent, app = navigator.appVersion;
return {
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
};
}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
}
if (browser.versions.mobile || browser.versions.android || browser.versions.ios) {
$('body').on('touchstart', '.container', function (e) {
var touch = e.originalEvent;
var startX = touch.changedTouches[0].pageX;
$('.container').on('touchmove', function (e) {
e.preventDefault();
touch = e.originalEvent.touches[0] || e.originalEvent.changedtouches[0];
if (touch.pageX - startX > 10) {
$('.container').off('touchmove');
flag = false;
clearInterval(timer);
if (_index == 0) {
_index = innercontainerGroup.length - 1;
$(".innercontainer").css("left", -(innercontainerGroup.length - 1) * imgWidth);
}
_index--;
selectPic(_index);
} else if (touch.pageX - startX < -10) {
$('.container').off('touchmove');
flag = false;
clearInterval(timer);
_index++;
selectPic(_index);
}
})
return false;
// alert(touch)
}).on('touchend', function () {
$('.container').off('touchmove');
timer = setInterval(go, 3000);
});
}
//轮播
var innercontainerGroup = $('.wraperimg');
var spanGroup = $('.pagination span');
var imgWidth = $('.wraperimg img:first-child').eq(0).width();
var _index = 0;
var timer = null;
var flag = true;
function autogo(bol) {
if (bol) {
timer = setInterval(go, 3000);
}
}
autogo(flag);
function go() {
_index++;
selectPic(_index);
}
function selectPic(num) {
$('.pagination span').eq(num).addClass('active').siblings().removeClass('active');
$('.innercontainer').animate({
left: -num * imgWidth,
}, 1000, function () {
if (_index == innercontainerGroup.length - 1) {
_index = 0;
$('.innercontainer').css('left', '0px');
$('.pagination span').eq(0).addClass('active').siblings().removeClass('active');
}
})
}
</script>
</html>
