DEMO 1
无缝滚动效果，连环效果
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.wrap{width: 800px;height: 257px;margin: 100px auto 0;border: 1px solid red;overflow-x: auto;}.content{width: 4000px;height: 240px;overflow: hidden;}.con1,.con2{float: left;height: 240px;}.content img{float: left;width: 200px;height: 240px;}</style></head><body><div class="wrap"><div class="content"><div class="con1"><img src="./imgs/f1.jpg" alt=""><img src="./imgs/f2.png" alt=""><img src="./imgs/f3.jpg" alt=""><img src="./imgs/f4.jpg" alt=""><img src="./imgs/f5.jpg" alt=""></div><div class="con2"></div></div></div><script>// 无缝滚动var wrap = document.querySelector('.wrap')var con1 = document.querySelector('.con1')var con2 = document.querySelector('.con2')var timer// 复制一组图片到con2con2.innerHTML = con1.innerHTMLfunction move(){clearInterval(timer)timer = setInterval(function (){wrap.scrollLeft++if (wrap.scrollLeft >= con1.clientWidth) {wrap.scrollLeft = 0}},10)}move()wrap.onmouseenter = function (){clearInterval(timer)}wrap.onmouseleave = function (){move()}</script></body></html>
DEMO 2
间断滚动，间隔一定时间自动轮播
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.wrap{width: 800px;height: 257px;margin: 100px auto 0;border: 1px solid red;overflow-x: auto;}.content{width: 4000px;height: 240px;overflow: hidden;}.con1,.con2{float: left;height: 240px;}.content img{float: left;width: 200px;height: 240px;}</style></head><body><div class="wrap"><div class="content"><div class="con1"><img src="./imgs/f1.jpg" alt=""><img src="./imgs/f2.png" alt=""><img src="./imgs/f3.jpg" alt=""><img src="./imgs/f4.jpg" alt=""><img src="./imgs/f5.jpg" alt=""></div><div class="con2"></div></div></div><script>// 间断滚动var wrap = document.querySelector('.wrap')var con1 = document.querySelector('.con1')var con2 = document.querySelector('.con2')var timer,timer2var imgWidth = con1.firstElementChild.clientWidth// 复制一组图片到con2con2.innerHTML = con1.innerHTMLfunction move(){timer = setInterval(function (){wrap.scrollLeft++if (wrap.scrollLeft % imgWidth === 0) {clearInterval(timer)clearTimeout(timer2)timer2 = setTimeout(function (){move()},2000)}if (wrap.scrollLeft >= con1.clientWidth) {wrap.scrollLeft = 0}},10)}move()wrap.onmouseenter = function (){clearInterval(timer)clearTimeout(timer2)}wrap.onmouseleave = function (){move()}</script></body></html>
DEMO 3
有自动轮播效果+手动左右切换按钮以及索引显示效果轮播图
引入的utils.js工具库是我之前文章自行封装的函数库调用。可往前翻自行查看…
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.wrap{width: 500px;height: 357px;border: 1px solid red;margin: 60px auto 0;position: relative;}.content{width: 500px;height: 357px;overflow-x: auto;/* overflow: hidden; */}.main{width: 10000px;height: 340px;}.content img{width: 500px;height: 340px;float: left;}.pages{width: 300px;height: 20px;text-align: center;position: absolute;left: 50%;bottom: 20px;margin-left: -150px;}.pages span{display: inline-block;width: 20px;height: 20px;line-height: 20px;text-align: center;background-color: lightgreen;margin: 0 2px;cursor: pointer;border-radius: 50%;}.prev{width: 25px;height: 24px;position: absolute;left: 10px;top: 50%;z-index: 10;margin-top: -12px;cursor: pointer;background: url(./imgs/fx1.png);}.next{width: 25px;height: 24px;position: absolute;right: 10px;top: 50%;z-index: 10;margin-top: -12px;cursor: pointer;background: url(./imgs/fx2.png);}.pages .active{background-color: pink;}</style></head><body><div class="wrap"><div class="content"><div class="main"><img src="./imgs/c1.jpg" alt=""><img src="./imgs/c2.jpg" alt=""><img src="./imgs/c3.jpg" alt=""><img src="./imgs/c4.jpg" alt=""><!-- <img src="./imgs/c1.jpg" alt=""> --></div></div><div class="pages"><span class="active">1</span><span>2</span><span>3</span><span>4</span></div><div class="prev"></div><div class="next"></div></div><script src="./utils.js"></script><script>var content = $('.content')var main = $('.main')var imgs = $('.main img')// 图片长度4var nums = $('.pages span')var prev = $('.prev')var next = $('.next')var imgIndex = 0 // 当前图片的索引var pageIndex = 0 // 当前页码的索引var timer // 自动播放的计时器idvar imgWidth = main.firstElementChild.clientWidth // 一张图片的宽度// 复制第一张图片放最后面var cloneImg = main.firstElementChild.cloneNode(true)main.appendChild(cloneImg)// autoPlay() // 启动自动播放function autoPlay(){timer = setInterval(function (){moveNext()// 切换到下一张图片},3000)}// 切换到下一张图片function moveNext(){imgIndex++if (imgIndex > imgs.length) {imgIndex = 1 // 最后一张图片的下一张是第二张content.scrollLeft = 0 // 滚动条回到前面的第一张图片}animate(content,{scrollLeft:imgIndex*imgWidth})// 当前页码去掉类名nums[pageIndex].className = ''pageIndex++if (pageIndex >= imgs.length) {pageIndex = 0}// 下一张添加类名nums[pageIndex].className = 'active'}// 切换到上一张图片function movePrev(){imgIndex--if (imgIndex < 0) {imgIndex = imgs.length-1 // 第一张图片的上一张是倒数第二张content.scrollLeft = imgWidth*imgs.length // 滚动条回到后面的第一张图片}animate(content,{scrollLeft:imgIndex*imgWidth})// 当前页码去掉类名nums[pageIndex].className = ''pageIndex--if (pageIndex < 0) {pageIndex = imgs.length-1}// 上一张添加类名nums[pageIndex].className = 'active'}// 点击切换下一张next.onclick = function (){clearInterval(timer)// 停止自动播放moveNext()// 切换到下一张图片autoPlay() // 启动自动播放}// 点击切换上一张prev.onclick = function (){clearInterval(timer)// 停止自动播放movePrev()// 切换到上一张图片autoPlay() // 启动自动播放}for (var i = 0; i < imgs.length; i++){nums[i].index = inums[i].onclick = function (){clearInterval(timer)// 停止自动播放imgIndex = this.indexanimate(content,{scrollLeft:imgIndex*imgWidth})// 当前页码去掉类名nums[pageIndex].className = ''pageIndex = this.index// 点击的那一张添加类名nums[pageIndex].className = 'active'autoPlay() // 启动自动播放}}</script></body></html>
