小潘杂谈

phpcms如何实现轮播

字号+ 作者:admin 来源:seo博客 2020-09-08 20:30 我要评论( )

phpcms首页实现轮播图 1.在你想要加轮播图的位置加入以下div id=flowDiagram div id=buttonspan index=1>由于这个焦点幻灯比较特殊,图片和文字需要两次调用,另外......

phpcms如何实现轮播

phpcms首页实现轮播图

1.在你想要加轮播图的位置加入以下<div id="flowDiagram" ><div id="button"><span index="1">由于这个焦点幻灯比较特殊,图片和文字需要两次调用,另外,后台添加内容时要勾选首页焦点图推荐,就可以添加到首页

推荐:《phpcms教程》

2.当然,这里面的css样式根据自己的需求做更改,在这里就不贴出css代码了,实现轮播需要加入以下js代码window.onload=function(){//获取元素var flowDiagram = document.getElementById('flowDiagram');//容器var photo = document.getElementById("photo");var button = document.getElementById("button").getElementsByTagName('span');var pre = document.getElementById("pre");var next = document.getElementById("next");var index = 1;var m;function move(){m = setInterval(next.onclick,3000);}function stop(){if(m)clearInterval(m);}function buttonlight(){for (var i = 0; i < button.length; i++) {if(button[i].className == "on"){button[i].className = "";break;}}button[index-1].className = "on";}pre.onclick=function() {if (index == 1)index = 5;elseindex = index - 1;buttonlight();photo.style.left = parseInt(photo.style.left) + 1200 + "px";if (parseInt(photo.style.left) > -1200){photo.style.left = -6000 + "px";}}next.onclick = function(){//当right键被触发时响应if (index == 5)index = 1;elseindex = index + 1;buttonlight();photo.style.left = parseInt(photo.style.left) - 1200 + "px";if (parseInt(photo.style.left) < -6000){photo.style.left = -1200 + "px";}}for (var i = 0; i < button.length; i++){button[i].onclick = function(){if(this.className=="on")return;var currentindex = parseInt(this.getAttribute("index"));//getAttribute能获取自定义的属性值,也可以获取自带的属性值var distance = currentindex - index;photo.style.left = parseInt(photo.style.left) - 1200 * distance + "px";index = currentindex;buttonlight();}}flowDiagram.onmouseover = stop;flowDiagram.onmouseout = move;move();}最终效果

phpcms如何实现轮播以上就是phpcms如何实现轮播的详细内容,更多请关注小潘博客其它相关文章!

转载请注明出处。

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。转载请注明seohttp://www.hkxiaopan.com

网友点评
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
验证码: 点击我更换图片
精彩导读