手机端网页banner实现
效果是这样的：注意的是：要记得导入 jquery！ jquery！ jquery！ 才能运行哦。。。
废话不多说直接上代码：
html：banner.html
<meta http-equiv="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"/>
<!--轮播图-->
<div class="news-banner" id="news-banner">
<ul id="bannerul">
<li><a href=""></a></li>
</ul>
<ul id="banner_ul_dot">
<li class="now"></li>
<li ></li>
</ul>
</div>
<!--轮播图End-->
js：
demodata.js
getBanner()；//调用这个函数
function getBanner() {
var backData = [{"picture":"./images/1.jpg"},{"picture":"./images/2.jpg"},{"picture":"./images/3.jpg"}];
var str = "";
var dotstr= "";
$("#bannerul").empty();
$("#banner_ul_dot").empty();
for(var i = 0 ; i < backData.length ; i++){
if(i == 0){
str +='<li><a href><img src="'+backData[backData.length-1].picture+'" /></ a></li>';
}
str +='<li><a href><img src="'+backData[i].picture+'" /></ a></li>';
if(i == 0){
dotstr +='<li class="now"></li>';
}else{
dotstr +='<li></li>';
}
if(i == (backData.length-1) ){
str +='<li><a ><img src="'+backData[0].picture+'" /></ a></li>';
}
}
$("#bannerul").append(str);
$("#banner_ul_dot").append(dotstr);
/*轮播图Start*/
banner();
}
banner.js
//banner实例函数
function banner() {
/*1. 自动轮播图且无缝 定时器，过渡*/
/*2. 点要随着图片的轮播改变 根据索引切换*/
/*3. 滑动效果 利用touch事件完成*/
/*4. 滑动结束的时候 如果滑动的距离不超过屏幕的1/3 吸附回去 过渡*/
/*5. 滑动结束的时候 如果滑动的距离超过屏幕的1/3 切换（上一张，下一张）根据滑动的方向，过渡*/
/*轮播图*/
var banner = document.querySelector('.news-banner');
/*屏幕宽度*/
var width = banner.offsetWidth;
/*图片容器*/
var imageBox = banner.querySelector('ul:first-child');
/*点容器*/
var pointBox = banner.querySelector('ul:last-child');
/*所有的点*/
var points = pointBox.querySelectorAll('li');
/*所有图片*/
var images = document.querySelector('#bannerul').querySelectorAll('li');
var addTransition = function () {
imageBox.style.transition = 'all 0.2s';
imageBox.style.webkitTransition = 'all 0.2s';
};
var removeTransition = function () {
imageBox.style.transition = 'none';
imageBox.style.webkitTransition = 'none';
};
var setTranslateX = function (translateX) {
imageBox.style.transform = 'translateX(' + translateX + 'px)';
imageBox.style.webkitTransform = 'translateX(' + translateX + 'px)';
};
/*程序的核心 index */
var imgnum = images.length-2;
var index = 1;
var timer = setInterval(function () {
index++;
/*加过渡*/
addTransition();
/*做位移*/
setTranslateX(-index * width);
}, 2000);
/*需要等最后一张动画结束去判断 是否瞬间定位第一张*/
imageBox.addEventListener('transitionend', function () {
/*自动滚动的无缝*/
// console.log("index:"+index);
// console.log("imgnum:"+imgnum);
if (index > imgnum) {
index = 1;
/*瞬间定位*/
/*清过渡*/
removeTransition();
/*做位移*/
setTranslateX(-index * width);
}
/*滑动的时候也需要无缝*/
else if (index < imgnum) {
if(index <= 0){
index = imgnum;
/*瞬间定位*/
/*清过渡*/
removeTransition();
/*做位移*/
setTranslateX(-index * width);
}else{
//index++;
/*瞬间定位*/
/*清过渡*/
removeTransition();
/*做位移*/
setTranslateX(-index * width);
}
}
/*根据索引设置点*/
/*此时此刻 index 的取值范围 1-8（0,8--1,9）*/
/*点索引 index - 1 */
setPoint();
});
/*设置点的方法*/
var setPoint = function () {
/*index 1-8*/
/*清除样式*/
for (var i = 0; i < points.length; i++) {
var obj = points[i];
obj.classList.remove('now');
}
/*给对应的加上样式*/
points[index-1].classList.add('now');
};
/*绑定事件*/
var startX = 0;
var distanceX = 0;
var isMove = false;
imageBox.addEventListener('touchstart', function (e) {
/*清除定时器*/
clearInterval(timer);
/*记录起始位置的X坐标*/
startX = e.touches[0].clientX;
});
imageBox.addEventListener('touchmove', function (e) {
/*屏蔽父元素事件响应*/
e.stopPropagation();
/*记录滑动过程当中的X坐标*/
var moveX = e.touches[0].clientX;
/*计算位移 有正负方向*/
distanceX = moveX - startX;
/*计算目标元素的位移 不用管正负*/
/*元素将要的定位=当前定位+手指移动的距离*/
var translateX = -index * width + distanceX;
/*滑动--->元素随着手指的滑动做位置的改变*/
removeTransition();
setTranslateX(translateX);
isMove = true;
});
imageBox.addEventListener('touchend', function (e) {
/*4. 5. 实现*/
/*要使用移动的距离*/
if (isMove) {
if (Math.abs(distanceX) < width / 3) {
/*吸附*/
addTransition();
setTranslateX(-index * width);
} else {
/*切换*/
/*右滑动 上一张*/
if (distanceX > 0) {
index--;
}
/*左滑动 下一张*/
else {
index++;
}
/*根据index去动画的移动*/
addTransition();
setTranslateX(-index * width);
}
}
/*最好做一次参数的重置*/
startX = 0;
distanceX = 0;
isMove = false;
/*加上定时器*/
clearInterval(timer);
timer = setInterval(function () {
index++;
/*加过渡*/
addTransition();
/*做位移*/
setTranslateX(-index * width);
}, 3000);
});
}
css：
base.css
*::before,
*::after{
/*所有的标签，和伪元素都选中*/
margin: 0;
padding: 0;
/*移动端常用布局是非固定像素*/
box-sizing: border-box;
-webkit-box-sizing: border-box;
/*点击高亮效果的清除*/
tap-highlight-color: transparent;
-webkit-tap-highlight-color: transparent;
}
ul,ol{
list-style: none;
}
a{
text-decoration: none;
color: #333;
}
banner.css
/*轮播图*/
.news-banner{
width: 93%;
overflow: hidden;
position: relative;
margin: 10px auto;
height: 115px;
border-radius: 5px;
}
.mui-table-view-cell{
padding: 0;
}
.news-banner ul:first-child{
width: 1000%;
transform: translate(-10%);
-webkit-transform: translate(-10%);
}
.news-banner ul:first-child li{
width: 10%;
float: left;
}
.news-banner ul:first-child li a{
display: block;
width: 100%;
/*border: 1px solid red;*/
height: 115px;
}
.news-banner ul:first-child li a img{
display: block;
width: 100%;
height: 115px;
/*border: 1px solid red;*/
}
.news-banner ul:last-child{
position: absolute;
/* width: 118px; */
height: 6px;
left: 50%;
/* margin-left: -49px; */
bottom: 6px;
transform: translate(-50%,0);
}
.news-banner ul:last-child li{
width: 6px;
height: 6px;
border-radius: 50%;
border: 1px solid #fff;
margin-left: 10px;
float: left;
}
.news-banner ul:last-child li:first-child{
margin-left: 0;
}
.news-banner ul:last-child .now{
background-color: #fff;
}
/*轮播图End*/
图片路径：
images/**.jpg
最后把文件保存到一个文件夹里面就像我这样子：
如果这个对你有用帮忙点赞哦！感谢各位亲们
