如何实现phpcms轮播-创新互联

创新互联www.cdcxhl.cn八线动态BGP香港云服务器提供商,新人活动买多久送多久,划算不套路!

创新互联公司是专业的绩溪网站建设公司,绩溪接单;提供网站制作、成都网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行绩溪网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

今天就跟大家聊聊有关如何实现phpcms轮播,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

phpcms实现轮播的方法:首先在想要加轮播图的位置加入“<div id="flowDiagram" >...</div>”;然后根据自己的需求对css样式进行更改;最后在需要实现轮播的地方加入js代码即可。

phpcms首页实现轮播图

1.在你想要加轮播图的位置加入以下

<div id="flowDiagram" >
          <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 id="photo" style="left:-1200px;">
        <div>
           {pc:content  action="position" posid="1" thumb="1" order="listorder DESC" num="5"}
        {loop $data $r}
        <div ><a href="{$r[url]}" target="_blank" title="{$r[title]}"><img src="{thumb($r[thumb],1200,320)}" style="width:1200px; height:320px;" 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="{$r[url]}" target="_blank" title="{$r[title]}">{str_cut($r[title],20)}</a></li>
        {/loop}
        {/pc}
        </ul>
        <div></div>
        </div>
        </div>
<span id="pre" class="arrow"> <</span>
<span id="next" 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.onmouseover = stop;
    flowDiagram.onmouseout = move;
    move();
}

最终效果

如何实现phpcms轮播

看完上述内容,你们对如何实现phpcms轮播有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联-成都网站建设公司行业资讯频道,感谢大家的支持。

网页标题:如何实现phpcms轮播-创新互联
网站路径:https://www.cdcxhl.com/article38/hhgsp.html

成都网站建设公司_创新互联,为您提供营销型网站建设域名注册外贸建站商城网站虚拟主机服务器托管

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

成都seo排名网站优化