1.js实现轮播图
<div class="banner"> <ul class="jd_bannerImg clearfix"> <li> <a href="javascript:;"> <img src="uploads/l1.jpg" alt=""> </a> </li> <li> <a href="javascript:;"> <img src="uploads/l2.jpg" alt=""> </a> </li> <li> <a href="javascript:;"> <img src="uploads/l3.jpg" alt=""> </a> </li> <li> <a href="javascript:;"> <img src="uploads/l4.jpg" alt=""> </a> </li> <li> <a href="javascript:;"> <img src="uploads/l5.jpg" alt=""> </a> </li> <li> <a href="javascript:;"> <img src="uploads/l6.jpg" alt=""> </a> </li> <li> <a href="javascript:;"> <img src="uploads/l7.jpg" alt=""> </a> </li> <li> <a href="javascript:;"> <img src="uploads/l8.jpg" alt=""> </a> </li> </ul> <ul class="jd_bannerIndicator"> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div>
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<pointLable.length;i++){ pointLable[i].classList.remove('active'); } pointLable[index-1].classList.add('active') } /*手动轮播*/ /*判断过渡是否完成*/ var isEnd=true; var startX,moveX,endX; bannerImg.addEventListener('touchstart',function (e) { /*清除时钟*/ clearInterval(timeID); startX = e.targetTouches[0].clientX; }); bannerImg.addEventListener('touchmove',function (e) { if(isEnd==true){ moveX = e.targetTouches[0].clientX; endX = moveX - startX; bannerImg.style.transition="none"; bannerImg.style.left =(-index*bannerWidth)+ endX+'px'; } }); bannerImg.addEventListener('touchend',function (e) { /*过渡正在执行*/ isEnd=false; if(Math.abs(endX) > 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文件）
<!--轮播图--> <div class="wjs_banner"> <div id="carousel-example-generic" class="wjs_banner carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> <li data-target="#carousel-example-generic" data-slide-to="3"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active " data-large-img="./images/slide_01_2000x410.jpg" data-small-img="./images/slide_01_640x340.jpg"> </div> <div class="item " data-large-img="./images/slide_02_2000x410.jpg" data-small-img="./images/slide_02_640x340.jpg"> </div> <div class="item " data-large-img="./images/slide_03_2000x410.jpg" data-small-img="./images/slide_03_640x340.jpg"> </div> <div class="item " data-large-img="./images/slide_04_2000x410.jpg" data-small-img="./images/slide_04_640x340.jpg"> </div> </div> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div>
$(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($('<a href="javascript:;" class="pcImg " ></a>').css("backgroundImage","url('"+imgSrc+"')")); }) }else { $(items).each(function (index,value) { var item = $(this); var imgSrc = item.data('smallImg'); item.html('<a href="javascript:;" class="mobileImg"><img src="'+imgSrc+'" alt="..."></a>'); }) } }).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实现轮播图（先导入文件）
<div id='slider' class='swipe'> <div class='swipe-wrap'> <div></div> <div></div> <div></div> </div> </div>
.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/