phpcms实现轮播
phpcms首页实现轮播图
1.在你想要加轮播图的位置加入以下
<div >
<div id="button">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
<div style="left:-1200px;">
<div>
{pc:content action="position" posid="1" thumb="1" order="listorder DESC" num="5"}
{loop $data $r}
<div ><a href="https://www.swvq.com/cms/phpcms/{$r[url]}" target="_blank" title="{$r[title]}"><img src="https://www.swvq.com/cms/phpcms/{thumb($r[thumb],1200,320)}" alt="{$r[title]}" /></a></div>
{/loop}
{/pc}
<ul>
{pc:content action="lists" catid="" thumb="1" order="listorder DESC" num="5"}
{loop $data $r}
<li><a href="https://www.swvq.com/cms/phpcms/{$r[url]}" target="_blank" title="{$r[title]}">{str_cut($r[title],20)}</a></li>
{/loop}
{/pc}
</ul>
<div></div>
</div>
</div>
<span class="arrow"> <</span>
<span class="arrow">> </span>
</div>
由于这个焦点幻灯比较特殊,图片和文字需要两次调用,另外,后台添加内容时要勾选首页焦点图推荐,就可以添加到首页
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;
else
index = 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;
else
index = 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.onmouSEO((Search Engine Optimization))ver = stop;
flowDiagram.onmouSEO((Search Engine Optimization))ut = move;
move();
}
最终效果
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanfiafk
系列文章
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01