查看“图片轮播”的源代码
←
图片轮播
跳转至:
导航
、
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
<div id="warpper"> <div class="container"> <!-- 图片区域 --> <ul class="imgList"> <li>[[文件:卡通人物1.jpeg|400px]]</li> <li> [[文件:卡通人物2.jpeg|400px]]</li> <li> [[文件:卡通人物3.jpeg|400px]]</li> </ul> <!-- 左右切换图标 --> <img src="./images/pre.png" width="40px" height="60px" class="pre"> <img src="./images/next.png" width="40px" height="60px" class="next"> <!-- 下方控制图片按钮 --> <ul class="dollList"> <li class="sec"><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> </div> </div> ---- <div id="focus_img"> [[文件:卡通人物1.jpeg|400px]] [[文件:卡通人物2.jpeg|400px]] [[文件:卡通人物3.jpeg|400px]] </div> <lunbo width='400px' height='240px' ptime='10000'/> ---- <li><img src="./images:卡通人物1.jpeg" alt=""></li> <li><img src="./images:卡通人物2.jpeg" alt=""></li> <li><img src="./images:卡通人物3.jpeg" alt=""></li> <li><img src="./images:卡通人物4.jpeg" alt=""></li> <li><img src="./images:卡通人物5.jpeg" alt=""></li> <li><img src="./images:卡通人物6.jpeg" alt=""></li> ---- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>最简单的轮播效果</title> </head> <body> <div class="box" id="box"> <div class="inner"> <!--轮播图--> <ul> <li><a href="#"><img src="卡通人物1.jpeg" alt=""></a></li> <li><a href="#"><img src="卡通人物2.jpeg" alt=""></a></li> <li><a href="#"><img src="卡通人物3.jepg" alt=""></a></li> <li><a href="#"><img src="卡通人物4.jepg" alt=""></a></li> <li><a href="#"><img src="卡通人物5.jepg" alt=""></a></li> </ul> <ol class="bar"> 小按钮数量无法确定,由js动态生成 </ol> <!--左右焦点--> <div id="arr"> <span id="left"> <</span> <span id="right">></span> </div> </div> </div> </body> </html> 接下来是css样式: [css] view plaincopy <code class="language-html hljs xml"><span class="hljs-tag"><<span class="hljs-name">style</span>></span><span class="css"> * { <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>; <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span> } <span class="hljs-selector-class">.box</span> { <span class="hljs-attribute">width</span>: <span class="hljs-number">500px</span>; <span class="hljs-attribute">height</span>: <span class="hljs-number">300px</span>; <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid <span class="hljs-number">#ccc</span>; <span class="hljs-attribute">margin</span>: <span class="hljs-number">100px</span> auto; <span class="hljs-attribute">padding</span>: <span class="hljs-number">5px</span>; } <span class="hljs-selector-class">.inner</span>{ <span class="hljs-attribute">width</span>: <span class="hljs-number">500px</span>; <span class="hljs-attribute">height</span>: <span class="hljs-number">300px</span>; <span class="hljs-attribute">position</span>: relative; <span class="hljs-attribute">overflow</span>: hidden; } <span class="hljs-selector-class">.inner</span> <span class="hljs-selector-tag">img</span>{ <span class="hljs-attribute">width</span>: <span class="hljs-number">500px</span>; <span class="hljs-attribute">height</span>: <span class="hljs-number">300px</span>; <span class="hljs-attribute">vertical-align</span>: top } <span class="hljs-selector-tag">ul</span> { <span class="hljs-attribute">width</span>: <span class="hljs-number">1000%</span>; <span class="hljs-attribute">position</span>: absolute; <span class="hljs-attribute">list-style</span>: none; <span class="hljs-attribute">left</span>:<span class="hljs-number">0</span>; <span class="hljs-attribute">top</span>: <span class="hljs-number">0</span>; } <span class="hljs-selector-class">.inner</span> <span class="hljs-selector-tag">li</span>{ <span class="hljs-attribute">float</span>: left; } <span class="hljs-selector-tag">ol</span> { <span class="hljs-attribute">position</span>: absolute; <span class="hljs-attribute">height</span>: <span class="hljs-number">20px</span>; <span class="hljs-attribute">right</span>: <span class="hljs-number">20px</span>; <span class="hljs-attribute">bottom</span>: <span class="hljs-number">20px</span>; <span class="hljs-attribute">text-align</span>: center; <span class="hljs-attribute">padding</span>: <span class="hljs-number">5px</span>; } <span class="hljs-selector-tag">ol</span> <span class="hljs-selector-tag">li</span>{ <span class="hljs-attribute">display</span>: inline-block; <span class="hljs-attribute">width</span>: <span class="hljs-number">20px</span>; <span class="hljs-attribute">height</span>: <span class="hljs-number">20px</span>; <span class="hljs-attribute">line-height</span>: <span class="hljs-number">20px</span>; <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#fff</span>; <span class="hljs-attribute">margin</span>: <span class="hljs-number">5px</span>; <span class="hljs-attribute">cursor</span>: pointer; } <span class="hljs-selector-tag">ol</span> <span class="hljs-selector-class">.current</span>{ <span class="hljs-attribute">background-color</span>: red; } <span class="hljs-selector-id">#arr</span>{ <span class="hljs-attribute">display</span>: none; } <span class="hljs-selector-id">#arr</span> <span class="hljs-selector-tag">span</span>{ <span class="hljs-attribute">width</span>: <span class="hljs-number">40px</span>; <span class="hljs-attribute">height</span>: <span class="hljs-number">40px</span>; <span class="hljs-attribute">position</span>: absolute; <span class="hljs-attribute">left</span>: <span class="hljs-number">5px</span>; <span class="hljs-attribute">top</span>: <span class="hljs-number">50%</span>; <span class="hljs-attribute">margin-top</span>: -<span class="hljs-number">20px</span>; <span class="hljs-attribute">background</span>: <span class="hljs-number">#fff</span>; <span class="hljs-attribute">cursor</span>: pointer; <span class="hljs-attribute">line-height</span>: <span class="hljs-number">40px</span>; <span class="hljs-attribute">text-align</span>: center; <span class="hljs-attribute">font-weight</span>: bold; <span class="hljs-attribute">font-family</span>: <span class="hljs-string">'黑体'</span>; <span class="hljs-attribute">font-size</span>: <span class="hljs-number">30px</span>; <span class="hljs-attribute">color</span>: <span class="hljs-number">#000</span>; <span class="hljs-attribute">opacity</span>: <span class="hljs-number">0.5</span>; <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid <span class="hljs-number">#fff</span>; } <span class="hljs-selector-id">#arr</span> <span class="hljs-selector-id">#right</span> { <span class="hljs-attribute">right</span>: <span class="hljs-number">5px</span>; <span class="hljs-attribute">left</span>: auto; }</span></code> 第三部分是最主要的js代码: <script> /** * * @param id 传入元素的id * @returns {HTMLElement | null} 返回标签对象,方便获取元素 */ function my$(id) { return document.getElementById(id); } //获取各元素,方便操作 var box=my$("box"); var inner=box.children[0]; var ulObj=inner.children[0]; var list=ulObj.children; var olObj=inner.children[1]; var arr=my$("arr"); var imgWidth=inner.offsetWidth; var right=my$("right"); var pic=0; //根据li个数,创建小按钮 for(var i=0;i<list.length;i++){ var liObj=document.createElement("li"); olObj.appendChild(liObj); liObj.innerText=(i+1); liObj.setAttribute("index",i); //为按钮注册mouseover事件 liObj.οnmοuseοver=function () { //先清除所有按钮的样式 for (var j=0;j<olObj.children.length;j++){ olObj.children[j].removeAttribute("class"); } this.className="current"; pic=this.getAttribute("index"); animate(ulObj,-pic*imgWidth); } } //设置ol中第一个li有背景颜色 olObj.children[0].className = "current"; //克隆一个ul中第一个li,加入到ul中的最后=====克隆 ulObj.appendChild(ulObj.children[0].cloneNode(true)); var timeId=setInterval(onmouseclickHandle,1000); //左右焦点实现点击切换图片功能 box.οnmοuseοver=function () { arr.style.display="block"; clearInterval(timeId); }; box.οnmοuseοut=function () { arr.style.display="none"; timeId=setInterval(onmouseclickHandle,1000); }; right.οnclick=onmouseclickHandle; function onmouseclickHandle() { //如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图, //所以,如果用户再次点击按钮,用户应该看到第二个图片 if (pic == list.length - 1) { //如何从第6个图,跳转到第一个图 pic = 0;//先设置pic=0 ulObj.style.left = 0 + "px";//把ul的位置还原成开始的默认位置 } pic++;//立刻设置pic加1,那么此时用户就会看到第二个图片了 animate(ulObj, -pic * imgWidth);//pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片 //如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色, if (pic == list.length - 1) { //第五个按钮颜色干掉 olObj.children[olObj.children.length - 1].className = ""; //第一个按钮颜色设置上 olObj.children[0].className = "current"; } else { //干掉所有的小按钮的背景颜色 for (var i = 0; i < olObj.children.length; i++) { olObj.children[i].removeAttribute("class"); } olObj.children[pic].className = "current"; } } left.οnclick=function () { if (pic==0){ pic=list.length-1; ulObj.style.left=-pic*imgWidth+"px"; } pic--; animate(ulObj,-pic*imgWidth); for (var i = 0; i < olObj.children.length; i++) { olObj.children[i].removeAttribute("class"); } //当前的pic索引对应的按钮设置颜色 olObj.children[pic].className = "current"; }; //设置任意的一个元素,移动到指定的目标位置 function animate(element, target) { clearInterval(element.timeId); //定时器的id值存储到对象的一个属性中 element.timeId = setInterval(function () { //获取元素的当前的位置,数字类型 var current = element.offsetLeft; //每次移动的距离 var step = 10; step = current < target ? step : -step; //当前移动到位置 current += step; if (Math.abs(current - target) > Math.abs(step)) { element.style.left = current + "px"; } else { //清理定时器 clearInterval(element.timeId); //直接到达目标 element.style.left = target + "px"; } }, 10); } </script> 所有用图片如下: 1.jpg 2.jpg 3.jpg 4.jpg 5.jpg 下面是完整的代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>最简单的轮播效果</title> <style> * { margin: 0; padding: 0 } .box { width: 500px; height: 300px; border: 1px solid #ccc; margin: 100px auto; padding: 5px; } .inner{ width: 500px; height: 300px; position: relative; overflow: hidden; } .inner img{ width: 500px; height: 300px; vertical-align: top } ul { width: 1000%; position: absolute; list-style: none; left:0; top: 0; } .inner li{ float: left; } ol { position: absolute; height: 20px; right: 20px; bottom: 20px; text-align: center; padding: 5px; } ol li{ display: inline-block; width: 20px; height: 20px; line-height: 20px; background-color: #fff; margin: 5px; cursor: pointer; } ol .current{ background-color: red; } #arr{ display: none; } #arr span{ width: 40px; height: 40px; position: absolute; left: 5px; top: 50%; margin-top: -20px; background: #fff; cursor: pointer; line-height: 40px; text-align: center; font-weight: bold; font-family: '黑体'; font-size: 30px; color: #000; opacity: 0.5; border: 1px solid #fff; } #arr #right { right: 5px; left: auto; } </style> </head> <body> <div class="box" id="box"> <div class="inner"> <!--轮播图--> <ul> <li><a href="#"><img src="images/1.jpg" alt=""></a></li> <li><a href="#"><img src="images/2.jpg" alt=""></a></li> <li><a href="#"><img src="images/3.jpg" alt=""></a></li> <li><a href="#"><img src="images/4.jpg" alt=""></a></li> <li><a href="#"><img src="images/5.jpg" alt=""></a></li> </ul> <ol class="bar"> </ol> <!--左右焦点--> <div id="arr"> <span id="left"> < </span> <span id="right"> > </span> </div> </div> </div> <script> /** * * @param id 传入元素的id * @returns {HTMLElement | null} 返回标签对象,方便获取元素 */ function my$(id) { return document.getElementById(id); } //获取各元素,方便操作 var box=my$("box"); var inner=box.children[0]; var ulObj=inner.children[0]; var list=ulObj.children; var olObj=inner.children[1]; var arr=my$("arr"); var imgWidth=inner.offsetWidth; var right=my$("right"); var pic=0; //根据li个数,创建小按钮 for(var i=0;i<list.length;i++){ var liObj=document.createElement("li"); olObj.appendChild(liObj); liObj.innerText=(i+1); liObj.setAttribute("index",i); //为按钮注册mouseover事件 liObj.οnmοuseοver=function () { //先清除所有按钮的样式 for (var j=0;j<olObj.children.length;j++){ olObj.children[j].removeAttribute("class"); } this.className="current"; pic=this.getAttribute("index"); animate(ulObj,-pic*imgWidth); } } //设置ol中第一个li有背景颜色 olObj.children[0].className = "current"; //克隆一个ul中第一个li,加入到ul中的最后=====克隆 ulObj.appendChild(ulObj.children[0].cloneNode(true)); var timeId=setInterval(onmouseclickHandle,1000); //左右焦点实现点击切换图片功能 box.οnmοuseοver=function () { arr.style.display="block"; clearInterval(timeId); }; box.οnmοuseοut=function () { arr.style.display="none"; timeId=setInterval(onmouseclickHandle,1000); }; right.οnclick=onmouseclickHandle; function onmouseclickHandle() { //如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图, //所以,如果用户再次点击按钮,用户应该看到第二个图片 if (pic == list.length - 1) { //如何从第6个图,跳转到第一个图 pic = 0;//先设置pic=0 ulObj.style.left = 0 + "px";//把ul的位置还原成开始的默认位置 } pic++;//立刻设置pic加1,那么此时用户就会看到第二个图片了 animate(ulObj, -pic * imgWidth);//pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片 //如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色, if (pic == list.length - 1) { //第五个按钮颜色干掉 olObj.children[olObj.children.length - 1].className = ""; //第一个按钮颜色设置上 olObj.children[0].className = "current"; } else { //干掉所有的小按钮的背景颜色 for (var i = 0; i < olObj.children.length; i++) { olObj.children[i].removeAttribute("class"); } olObj.children[pic].className = "current"; } } left.οnclick=function () { if (pic==0){ pic=list.length-1; ulObj.style.left=-pic*imgWidth+"px"; } pic--; animate(ulObj,-pic*imgWidth); for (var i = 0; i < olObj.children.length; i++) { olObj.children[i].removeAttribute("class"); } //当前的pic索引对应的按钮设置颜色 olObj.children[pic].className = "current"; }; //设置任意的一个元素,移动到指定的目标位置 function animate(element, target) { clearInterval(element.timeId); //定时器的id值存储到对象的一个属性中 element.timeId = setInterval(function () { //获取元素的当前的位置,数字类型 var current = element.offsetLeft; //每次移动的距离 var step = 10; step = current < target ? step : -step; //当前移动到位置 current += step; if (Math.abs(current - target) > Math.abs(step)) { element.style.left = current + "px"; } else { //清理定时器 clearInterval(element.timeId); //直接到达目标 element.style.left = target + "px"; } }, 10); } </script> </body> </html> 文章最后发布于: 2018-05-30 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/lgx1134569285/article/details/80511795 展开全文 APP打开,阅读更顺畅 80条评论 写评论 就远 博主,你好,我是完全拷贝你的代码和图片的,现在出现的问题是,点击下方的1,2,3,4,5这几个数字不会进行跳转相应的图片,还有就是左右<>没有显示出来。(2019-10-16 #44楼) 回复 d1524396988没关系,我是学后端的。只是觉得这个功能还可以,所以一直在揣测2019-11-27 就远回复d1524396988:不过网上这种问题一搜一大堆的,可以看看别的2019-11-27 就远回复d1524396988:没呢,我没弄了,不好意思,没帮上你2019-11-27 d1524396988而且鼠标放上去也不停2019-11-26 d1524396988妈的,搞了一晚上和你的情况一样。点击onmouseover小按钮事件,无反应。就连span标签的><图标都不显示。欺负咋们后端。你的问题解决没有。老师。。。。。呼唤你2019-11-26 qq_40971723 博主你好,我这个按照你这个写起来,为啥点击左右按钮没反应吗(2019-08-19 #43楼) 回复 d1524396988你还有按钮,我搞出来按钮都没有。左右切换按钮没有。2019-11-26 qq_45040113 大哥,为什么我只有一张图片出来?,我都是按你这个敲的(2019-05-09 #42楼) 回复 ApeWithHair回复yizaiqizhong:放到哪个div下面?2019-12-04 yizaiqizhong回复qq_45040113:将js语句放到div下面就好了2019-05-30
返回至
图片轮播
。
导航菜单
个人工具
创建账户
登录
名字空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
社区主页
新闻动态
最近更改
随机页面
帮助
华师附中老三届
站群链接
社友网(sn)
产品百科(cpwiki)
产品与服务(sn)
社区支持农业(sn)
工具
链入页面
相关更改
特殊页面
页面信息