1.js实现轮播图
function bannerEffect() { /* *修改页面结构 * 1.在开始添加原始图片的最后一张图片 * 2.在最后添加原始图片的第一张图片 */ //获取页面元素 var banner = document.querySelector('.banner'); //获取图片容器 var bannerImg = banner.querySelector('ul:first-of-type'); //获取第一个图片 var first = bannerImg.querySelector('li:first-of-type'); //获取最后一张图片 var last = bannerImg.querySelector('li:last-of-type'); //在开始结尾插入图片 /*cloneNode 复制DOM元素*/ bannerImg.appendChild(first.cloneNode(true)); bannerImg.insertBefore(last.cloneNode(true),bannerImg.firstChild); /* *设置页面样式 * 1.获取li元素 * 2.获取banner宽度 * 3.设置盒子宽度 * 4.设置li宽度 * 5.设置偏移量 */ var lis = bannerImg.querySelectorAll('li'); var count = lis.length; var bannerWidth = banner.offsetWidth; bannerImg.style.width = count*bannerWidth+'px'; for(var i = 0;i < lis.length;i++){ lis[i].style.width=bannerWidth+'px'; } /*设置索引值*/ var index= 1; bannerImg.style.left=-bannerWidth+'px'; /*页面宽度改变，重新获取*/ window.onresize=function () { bannerWidth = banner.offsetWidth; bannerImg.style.width = count*bannerWidth+'px'; for(var i = 0;i < lis.length;i++){ lis[i].style.width=bannerWidth+'px'; } bannerImg.style.left=-index*bannerWidth+'px'; } /*自动轮播 * 1.添加定时器 * 2.设置索引 * 3.添加偏移量 * */ var timeID; var setTime = function () { timeID=setInterval(function () { index++; /*添加过渡效果*/ bannerImg.style.transition='left 0.5s ease-in-out'; bannerImg.style.left=(-index*bannerWidth)+'px'; /*延迟操作*/ setTimeout(function () { /*判断是否处于末尾*/ if(index==count-1){ index=1; /*清除过渡效果 * 由于之前元素添加过的效果会一直存在，所以需要清除 * */ bannerImg.style.transition='none'; bannerImg.style.left=(-index*bannerWidth)+'px'; } },500); },2000) } setTime(); /*点标记*/ var setPoint = function (index) { var pointLable = banner.querySelector('ul:last-of-type').querySelectorAll('li'); for(var i=0;i 100){ if(endX > 0){ index--; }else { index++; } bannerImg.style.transition='left 0.5s ease-in-out'; bannerImg.style.left=(-index*bannerWidth)+'px'; }else if(Math.abs(endX) > 0){ bannerImg.style.transition='left 0.5s ease-in-out'; bannerImg.style.left=(-index*bannerWidth)+'px'; } /*将move产生的数据重置*/ startX=0; moveX=0; endX=0; }); /*webkitTransitionEnd:可以监听当前元素的过渡效果执行完毕，当一个元素的过渡效果执行完毕的时候，会触发这个事件*/ bannerImg.addEventListener('webkitTransitionEnd',function () { if(index == count-1){ index=1; /*清除过渡效果*/ bannerImg.style.transition="none"; bannerImg.style.left=(-index*bannerWidth)+'px'; }else if(index==0){ index = count-2; /*清除过渡效果*/ bannerImg.style.transition="none"; bannerImg.style.left=(-index*bannerWidth)+'px'; } setPoint(index); setTimeout(function () { isEnd=true; /*清除时钟*/ clearInterval(timeID); //重新开启定时器 setTime(); },500); }); 2.bootstrap实现轮播图（先导入bootstrap文件）
$(function () { $('[data-toggle="tooltip"]').tooltip(); var items = $('.carousel-inner .item'); $(window).on('resize',function () { var width = $(window).width(); if(width>=768){ $(items).each(function (index,value) { var item = $(this); var imgSrc = item.data('largeImg'); item.html($('').css("backgroundImage","url('"+imgSrc+"')")); }) }else { $(items).each(function (index,value) { var item = $(this); var imgSrc = item.data('smallImg'); item.html('
'); }) } }).trigger('resize'); /*添加移动端的滑动操作*/ var startX,endX; var carousel_inner=$(".carousel-inner")[0]; /*获取当前轮播图*/ var carousel=$(".carousel"); carousel_inner.addEventListener("touchstart",function(e){ startX= e.targetTouches[0].clientX; }); carousel_inner.addEventListener("touchend",function(e){ endX= e.changedTouches[0].clientX; if(endX-startX > 0){ /*上一张*/ carousel.carousel('prev'); } else if(endX-startX < 0){ /*下一张*/ carousel.carousel('next'); } }); var ul = $('.wjs_product .nav-tabs'); var lis = ul.find('li'); var totalWidth = 0; lis.each(function (index,value) { totalWidth = totalWidth + $(value).outerWidth(true); }); ul.width(totalWidth); var myScroll = new IScroll('.tabs',{ scrollX: true, scrollY: false, });}); 3.swipe实现轮播图（先导入文件）
.swipe { overflow: hidden; visibility: hidden; position: relative;}.swipe-wrap { overflow: hidden; position: relative;}.swipe-wrap > div { float:left; width:100%; position: relative;} window.mySwipe = Swipe(document.getElementById('slider')); 4.swiper实现看轮播图（先导入文件）
详情：https://www.swiper.com.cn/