phpcms V9想实现图片轮播功能怎么弄

phpcms V9想实现图片轮播功能怎么弄？用js做简单的图片轮播效果。 思路如下：用JavaScript来控制轮播的图片的样式(margin-left)。用计时器来控制图片的自动播放。鼠标点击控制图片的翻页。

phpcms V9想实现图片轮播功能怎么弄？用js做简单的图片轮播效果。 思路如下：用JavaScript来控制轮播的图片的样式(margin-left)。用计时器来控制图片的自动播放。鼠标点击控制图片的翻页。

先来看效果图：

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图片轮播的所有内容，希望可以帮到大家，欢迎找小编一起交流~