效果是這樣的：注意的是：要記得導(dǎo)入 jquery！? jquery！ jquery！ 才能運(yùn)行哦。。。?
廢話不多說直接上代碼：
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()；//調(diào)用這個(gè)函數(shù)
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實(shí)例函數(shù)
function banner() {
? ? /*1. 自動(dòng)輪播圖且無縫? 定時(shí)器，過渡*/
? ? /*2. 點(diǎn)要隨著圖片的輪播改變? 根據(jù)索引切換*/
? ? /*3. 滑動(dòng)效果? 利用touch事件完成*/
? ? /*4. 滑動(dòng)結(jié)束的時(shí)候? ? 如果滑動(dòng)的距離不超過屏幕的1/3? 吸附回去? 過渡*/
? ? /*5. 滑動(dòng)結(jié)束的時(shí)候? ? 如果滑動(dòng)的距離超過屏幕的1/3? 切換（上一張，下一張）根據(jù)滑動(dòng)的方向，過渡*/
? ? /*輪播圖*/
? ? var banner = document.querySelector('.news-banner');
? ? /*屏幕寬度*/
? ? var width = banner.offsetWidth;
? ? /*圖片容器*/
? ? var imageBox = banner.querySelector('ul:first-child');
? ? /*點(diǎn)容器*/
? ? var pointBox = banner.querySelector('ul:last-child');
? ? /*所有的點(diǎn)*/
? ? 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);
? ? /*需要等最后一張動(dòng)畫結(jié)束去判斷 是否瞬間定位第一張*/
? ? imageBox.addEventListener('transitionend', function () {
? ? ? ? /*自動(dòng)滾動(dòng)的無縫*/
? ? ? ? // console.log("index:"+index);
? ? ? ? // console.log("imgnum:"+imgnum);
? ? ? ? if (index > imgnum) {
? ? ? ? ? ? index = 1;
? ? ? ? ? ? /*瞬間定位*/
? ? ? ? ? ? /*清過渡*/
? ? ? ? ? ? removeTransition();
? ? ? ? ? ? /*做位移*/
? ? ? ? ? ? setTranslateX(-index * width);
? ? ? ? }
? ? ? ? /*滑動(dòng)的時(shí)候也需要無縫*/
? ? ? ? else if (index < imgnum) {
? ? ? ? ? ? if(index <= 0){
? ? ? ? ? ? ? ? index = imgnum;
? ? ? ? ? ? ? ? /*瞬間定位*/
? ? ? ? ? ? ? ? /*清過渡*/
? ? ? ? ? ? ? ? removeTransition();
? ? ? ? ? ? ? ? /*做位移*/
? ? ? ? ? ? ? ? setTranslateX(-index * width);
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? //index++;
? ? ? ? ? ? ? ? /*瞬間定位*/
? ? ? ? ? ? ? ? /*清過渡*/
? ? ? ? ? ? ? ? removeTransition();
? ? ? ? ? ? ? ? /*做位移*/
? ? ? ? ? ? ? ? setTranslateX(-index * width);
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? /*根據(jù)索引設(shè)置點(diǎn)*/
? ? ? ? /*此時(shí)此刻? index? 的取值范圍? 1-8（0,8--1,9）*/
? ? ? ? /*點(diǎn)索引? index - 1 */
? ? ? ? setPoint();
? ? });
? ? /*設(shè)置點(diǎn)的方法*/
? ? var setPoint = function () {
? ? ? ? /*index 1-8*/
? ? ? ? /*清除樣式*/
? ? ? ? for (var i = 0; i < points.length; i++) {
? ? ? ? ? ? var obj = points[i];
? ? ? ? ? ? obj.classList.remove('now');
? ? ? ? }
? ? ? ? /*給對(duì)應(yīng)的加上樣式*/
? ? ? ? points[index-1].classList.add('now');
? ? };
? ? /*綁定事件*/
? ? var startX = 0;
? ? var distanceX = 0;
? ? var isMove = false;
? ? imageBox.addEventListener('touchstart', function (e) {
? ? ? ? /*清除定時(shí)器*/
? ? ? ? clearInterval(timer);
? ? ? ? /*記錄起始位置的X坐標(biāo)*/
? ? ? ? startX = e.touches[0].clientX;
? ? });
? ? imageBox.addEventListener('touchmove', function (e) {
? ? ? ? /*屏蔽父元素事件響應(yīng)*/
? ? ? ? e.stopPropagation();
? ? ? ? /*記錄滑動(dòng)過程當(dāng)中的X坐標(biāo)*/
? ? ? ? var moveX = e.touches[0].clientX;
? ? ? ? /*計(jì)算位移? 有正負(fù)方向*/
? ? ? ? distanceX = moveX - startX;
? ? ? ? /*計(jì)算目標(biāo)元素的位移? 不用管正負(fù)*/
? ? ? ? /*元素將要的定位=當(dāng)前定位+手指移動(dòng)的距離*/
? ? ? ? var translateX = -index * width + distanceX;
? ? ? ? /*滑動(dòng)--->元素隨著手指的滑動(dòng)做位置的改變*/
? ? ? ? removeTransition();
? ? ? ? setTranslateX(translateX);
? ? ? ? isMove = true;
? ? });
? ? imageBox.addEventListener('touchend', function (e) {
? ? ? ? /*4.? 5.? 實(shí)現(xiàn)*/
? ? ? ? /*要使用移動(dòng)的距離*/
? ? ? ? if (isMove) {
? ? ? ? ? ? if (Math.abs(distanceX) < width / 3) {
? ? ? ? ? ? ? ? /*吸附*/
? ? ? ? ? ? ? ? addTransition();
? ? ? ? ? ? ? ? setTranslateX(-index * width);
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? /*切換*/
? ? ? ? ? ? ? ? /*右滑動(dòng) 上一張*/
? ? ? ? ? ? ? ? if (distanceX > 0) {
? ? ? ? ? ? ? ? ? ? index--;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? /*左滑動(dòng) 下一張*/
? ? ? ? ? ? ? ? else {
? ? ? ? ? ? ? ? ? ? index++;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? /*根據(jù)index去動(dòng)畫的移動(dòng)*/
? ? ? ? ? ? ? ? addTransition();
? ? ? ? ? ? ? ? setTranslateX(-index * width);
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? /*最好做一次參數(shù)的重置*/
? ? ? ? startX = 0;
? ? ? ? distanceX = 0;
? ? ? ? isMove = false;
? ? ? ? /*加上定時(shí)器*/
? ? ? ? clearInterval(timer);
? ? ? ? timer = setInterval(function () {
? ? ? ? ? ? index++;
? ? ? ? ? ? /*加過渡*/
? ? ? ? ? ? addTransition();
? ? ? ? ? ? /*做位移*/
? ? ? ? ? ? setTranslateX(-index * width);
? ? ? ? }, 3000);
? ? });
}
css：
base.css
*::before,
*::after{
? ? /*所有的標(biāo)簽，和偽元素都選中*/
? ? margin: 0;
? ? padding: 0;
? ? /*移動(dòng)端常用布局是非固定像素*/
? ? box-sizing: border-box;
? ? -webkit-box-sizing: border-box;
? ? /*點(diǎn)擊高亮效果的清除*/
? ? 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
最后把文件保存到一個(gè)文件夾里面就像我這樣子：
如果這個(gè)對(duì)你有用幫忙點(diǎn)贊哦！感謝各位親們
