轮播图*3

来源：互联网发布：外卖小票打印软件编辑：程序博客网时间：2024/06/05 17:14

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>不完整版轮播图</title><style>#out{position:relative;width: 300px;height: 300px;overflow: hidden;}#in{position: absolute;width:1800px;height: 1800px;left: 0px;}img{display: inline-block;width:300px;height: 300px;}</style></head><body><div id="out"><div id="in"><img src="img/10.jpg"/><img src="img/11.jpg"/><img src="img/12.jpg"/><img src="img/13.jpg"/><img src="img/14.jpg"/><img src="img/15.jpg"/></div></div><script>var huixin = 0;setInterval(function(){if(huixin==-1200){huixin=0;}else{document.getElementById("in").style.left = (huixin) + "px";huixin-=5;}},66)</script></body></html>

中途转换的时候会跳一下，希望以后的自己有能力改过来

一一匹配版onmouseove,可以换成onclick

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">* {margin: 0;padding: 0;list-style: none;}#lun {width: 560px;height: 305px;border: 1px solid #C5E300;margin: 100px auto;position: relative;}#lun ul li {position: absolute;left: 0px;top: 0px;display: none;}#lun ul li img {display: block;width: 560px;height: 305px;}#lun ol {position: absolute;width: 240px;left: 50%;bottom: 20px;margin-left: -120px;}#lun ol li {height: 20px;width: 20px;background: orange;margin-right: 10px;float: left;border-radius: 50%;}#lun ol li.active {background: greenyellow;}</style></head><body><div id="lun"><ul><li style="display: block;"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505129048246&di=ecc3726680a4b198deb9d2f16f4d88f6&imgtype=0&src=http%3A%2F%2Fcnews.chinadaily.com.cn%2Fimg%2Fattachement%2Fjpg%2Fsite1%2F20170307%2Fbc305bcee6d91a2834a52a.jpg" /></li><li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505129048247&di=d4c55130d5e332a8214df58198620328&imgtype=0&src=http%3A%2F%2Fcnews.chinadaily.com.cn%2Fimg%2Fattachement%2Fjpg%2Fsite1%2F20170307%2Fbc305bcee6d91a2834a529.jpg" /></li><li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505129048248&di=5ef12c116ac9e64bfcecde4fcd4703d2&imgtype=0&src=http%3A%2F%2Fcnews.chinadaily.com.cn%2Fimg%2Fattachement%2Fjpg%2Fsite1%2F20170307%2Fbc305bcee6d91a2834a528.jpg" /></li><li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505129048248&di=fd1f6648acebdaea511907a35050da5d&imgtype=0&src=http%3A%2F%2Fcnews.chinadaily.com.cn%2Fimg%2Fattachement%2Fjpg%2Fsite1%2F20170307%2Fbc305bcee6d91a2834a527.jpg" /></li><li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505129048249&di=e673d4b7bb034edb5cd46faa401554b4&imgtype=0&src=http%3A%2F%2Fcnews.chinadaily.com.cn%2Fimg%2Fattachement%2Fjpg%2Fsite1%2F20170307%2Fbc305bcee6d91a2834a526.jpg" /></li><li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505129043686&di=510e4e3af4608e4f402faf745945c878&imgtype=0&src=http%3A%2F%2Fupload.gezila.com%2Fdata%2F20170520%2F29501495243031.jpg" /></li><li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505129043672&di=7c1a8fa0c7083e28af292da2eb15a898&imgtype=0&src=http%3A%2F%2Fnewsimg.5054399.com%2Fuploads%2Fuserup%2F1610%2F1111364W3D.jpg" /></li><li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505129358936&di=fd5075eed512734799df63e3d3b01e9c&imgtype=0&src=http%3A%2F%2Fimg.pipaw.net%2Fwy%2Ftitle%2F2016%2F03%2F14%2F368e343b51c3a1da72565abfc37974ff.jpg" /></li></ul><ol><li class="active"></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ol><!--<a href="javascript:;"><</a><a href="javascript:;">></a>--></div><script type="text/javascript">var oBtn1 = document.getElementsByTagName("ul")[0].getElementsByTagName("li");var oBtn2 = document.getElementsByTagName("ol")[0].getElementsByTagName("li");var num = 0;for(var i = 0; i < oBtn2.length; i++) {oBtn2[i].index = i; //自定义索引oBtn2[i].onmouseover = function() {num = this.index;for(var i = 0; i < oBtn2.length; i++) {oBtn2[i].className = "";oBtn1[i].style.display = "none";}oBtn2[num].className = 'active';oBtn1[num].style.display = "block"; //alert(this.index)把当前的索引给图片}}</script></body></html>

下面这是完整版，一开始小编时用display来做的，后来因为要用到渐变效果就改为了opacity。

整体思路1.html和css布局

2.自定义索引，图片跟圆点一一对应（防止代码冗余，封装了一个函数）

3.箭头显示隐藏与切换

4.自动播放（这个方法非常实用，哈哈）

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">* {margin: 0;padding: 0;list-style: none;}#lun {width: 560px;height: 305px;border: 1px solid #C5E300;margin: 100px auto;position: relative;}#lun ul li {position: absolute;left: 0px;top: 0px;opacity: 0;filter:alpha(opacity=0);transition: all .5s;}#lun ul li img {display: block;width: 560px;height: 305px;}#lun ol {position: absolute;width: 240px;left: 50%;bottom: 20px;margin-left: -120px;}#lun ol li {height: 20px;width: 20px;background: orange;margin-right: 10px;float: left;border-radius: 50%;cursor: pointer;}#lun ol li.active {background: greenyellow;}#left,#right {position: absolute;font-size: 60px;color: white;text-decoration: none;top: 120px;opacity: 0;}#left {left: 20px;}#right {right: 20px;}</style></head><body><div id="lun"><ul><li style="opacity: 1"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505129048246&di=ecc3726680a4b198deb9d2f16f4d88f6&imgtype=0&src=http%3A%2F%2Fcnews.chinadaily.com.cn%2Fimg%2Fattachement%2Fjpg%2Fsite1%2F20170307%2Fbc305bcee6d91a2834a52a.jpg" /></li><li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505129048247&di=d4c55130d5e332a8214df58198620328&imgtype=0&src=http%3A%2F%2Fcnews.chinadaily.com.cn%2Fimg%2Fattachement%2Fjpg%2Fsite1%2F20170307%2Fbc305bcee6d91a2834a529.jpg" /></li><li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505129048248&di=5ef12c116ac9e64bfcecde4fcd4703d2&imgtype=0&src=http%3A%2F%2Fcnews.chinadaily.com.cn%2Fimg%2Fattachement%2Fjpg%2Fsite1%2F20170307%2Fbc305bcee6d91a2834a528.jpg" /></li><li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505129048248&di=fd1f6648acebdaea511907a35050da5d&imgtype=0&src=http%3A%2F%2Fcnews.chinadaily.com.cn%2Fimg%2Fattachement%2Fjpg%2Fsite1%2F20170307%2Fbc305bcee6d91a2834a527.jpg" /></li><li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505129048249&di=e673d4b7bb034edb5cd46faa401554b4&imgtype=0&src=http%3A%2F%2Fcnews.chinadaily.com.cn%2Fimg%2Fattachement%2Fjpg%2Fsite1%2F20170307%2Fbc305bcee6d91a2834a526.jpg" /></li><li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505129043686&di=510e4e3af4608e4f402faf745945c878&imgtype=0&src=http%3A%2F%2Fupload.gezila.com%2Fdata%2F20170520%2F29501495243031.jpg" /></li><li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505129043672&di=7c1a8fa0c7083e28af292da2eb15a898&imgtype=0&src=http%3A%2F%2Fnewsimg.5054399.com%2Fuploads%2Fuserup%2F1610%2F1111364W3D.jpg" /></li><li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505129358936&di=fd5075eed512734799df63e3d3b01e9c&imgtype=0&src=http%3A%2F%2Fimg.pipaw.net%2Fwy%2Ftitle%2F2016%2F03%2F14%2F368e343b51c3a1da72565abfc37974ff.jpg" /></li></ul><ol><li class="active"></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ol><a href="javascript:;" id="left"><</a><a href="javascript:;" id="right">></a></div><script type="text/javascript">var oBtn1 = document.getElementsByTagName("ul")[0].getElementsByTagName("li");var oBtn2 = document.getElementsByTagName("ol")[0].getElementsByTagName("li");var lunBo = document.querySelector("#lun");var oL = document.getElementById("left");var oR = document.getElementById("right");var num = 0;for(var i = 0; i < oBtn2.length; i++) {oBtn2[i].index = i; //自定义索引,此行很重要！！！oBtn2[i].onmouseover = function() {num = this.index;lunbotu()};}//箭头的显示与隐藏lunBo.onmouseover = function() {oL.style.opacity = 1;oR.style.opacity = 1;clearInterval(timer)};lunBo.onmouseout = function() {oL.style.opacity = 0;oR.style.opacity = 0;timer = setInterval(function() {oR.onclick()}, 1000)};//左右箭头的切换oR.onclick = function() {if(num >= oBtn2.length-1) {//长度别忘记减1；num = 0;} else {num++;}lunbotu()} //LEFToL.onclick = function() {if(num <= 0) {num = oBtn2.length-1;//长度要减1；} else {num--;}lunbotu()} //RIGHTfunction lunbotu() {for(var i = 0; i < oBtn2.length; i++) {oBtn2[i].className = "";oBtn1[i].style.opacity = 0;}oBtn2[num].className = 'active';oBtn1[num].style.opacity = 1; //alert(this.index)把当前的索引给图片}//自动播放var timer = setInterval(function() {oR.onclick()}, 1000)//一般为5到7s，这里因为是demo所以设置的快一些</script></body></html>

轮播可以通过控制opacity \display：none\ z-index实现

阅读全文

0 0