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"> &lt;</span>
<span id="next" class="arrow">&gt; </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首页实现轮播图的更多相关文章

  1. Luffy之Xadmin以及首页搭建(轮播图,导航)

    1. 首页 1.1 轮播图 admin站点配置支持图片上传 pip install Pillow 默认情况下,Django会将上传的图片保存在本地服务器上,需要配置保存的路径.我们可以将上传的文件保存 ...

  2. 仿百度壁纸客户端(二)——主页自定义ViewPager广告定时轮播图

    仿百度壁纸客户端(二)--主页自定义ViewPager广告定时轮播图 百度壁纸系列 仿百度壁纸客户端(一)--主框架搭建,自定义Tab + ViewPager + Fragment 仿百度壁纸客户端( ...

  3. jQuery实现todo及轮播图

    内容: 1.todo程序 2.轮播图 1.todo程序 需求: 实现一个todo程序,可以添加数据,可以删除数据,可以修改数据,可以查看所有数据 另外实现自己的一系列弹窗:用于提示用户的提示框.用于警 ...

  4. phpcms新闻轮播图实现

    首页如果有新闻的轮播图,点击图片可以进入相关的新闻.因为已经使用外部js轮播插件,所以想不修改插件进行轮播 我用的js插件是yx-rotaion插件,配合phpcms的get工具箱对新闻进行读取并抽取 ...

  5. 仿爱奇艺视频,腾讯视频,搜狐视频首页推荐位轮播图(二)之SuperIndicator源码分析

    转载请把头部出处链接和尾部二维码一起转载,本文出自逆流的鱼:http://blog.csdn.net/hejjunlin/article/details/52510431 背景:仿爱奇艺视频,腾讯视频 ...

  6. Vue(小案例_vue+axios仿手机app)_首页(底部导航栏+轮播图+九宫格)

    ---恢复内容开始--- 一.前言                        1.底部导航(两种做法)                                         2.轮播图 ...

  7. BootStrap学习(三)——重写首页之导航栏和轮播图

    1.按钮 1)帮助文档:http://v3.bootcss.com/css/#buttons 2).btn-lg..btn-sm..btn-xs可以设置按钮的不同尺寸 3).active类设置按钮的激 ...

  8. vue2.0 + vux (五)api接口封装 及 首页 轮播图制作

    1.安装 jquery 和 whatwg-fetch (优雅的异步请求API) npm install jquery --save npm install whatwg-fetch --save 2. ...

  9. React Native布局实践:开发京东client首页(三)——轮播图的实现

    上篇文章中,我们一起构建了京东client的TabBar.在本文中.将继续向大家介绍京东client首页轮播图及其下发功能button的开发方法,如今就让我们開始吧! 1.相关控件调研 眼下在Gith ...

随机推荐

  1. 【转】漫谈iOS程序的证书和签名机制

    转自:漫谈iOS程序的证书和签名机制 接触iOS开发半年,曾经也被这个主题坑的摸不着头脑,也在淘宝上买过企业证书签名这些服务,有大神都做了一个全自动的发布打包(不过此大神现在不卖企业证书了),甚是羡慕 ...

  2. 「视频直播技术详解」系列之七:直播云 SDK 性能测试模型

    ​关于直播的技术文章不少,成体系的不多.我们将用七篇文章,更系统化地介绍当下大热的视频直播各环节的关键技术,帮助视频直播创业者们更全面.深入地了解视频直播技术,更好地技术选型. 本系列文章大纲如下: ...

  3. 了解npm的文件结构(npm-folders)和配置文件(npm-mrc)

    一.npm的文件结构 npm的安装: 本地安装 1. 将安装包放在 ./node_modules 下(运行 npm 命令时所在的目录),如果没有 node_modules 目录,会在当前执行 npm ...

  4. [Erlang 0118] Erlang 杂记 V

       我在知乎回答问题不多,这个问题: "对你职业生涯帮助最大的习惯是什么?它是如何帮助你的?",我还是主动回答了一下.    做笔记 一开始笔记软件做的不好的时候就发邮件给自己, ...

  5. 从零自学Hadoop(21):HBase数据模型相关操作下

    阅读目录 序 变量 数据模型操作 系列索引 本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 文章是哥(mephisto)写的,SourceLink 序 ...

  6. python排序之一插入排序

    python排序之一插入排序 首先什么是插入排序,个人理解就是拿队列中的一个元素与其之前的元素一一做比较交根据大小换位置的过程好了我们先来看看代码 首先就是一个无序的列表先打印它好让排序后有对比效果, ...

  7. redis.conf配置详细解析

    # redis 配置文件示例 # 当你需要为某个配置项指定内存大小的时候,必须要带上单位, # 通常的格式就是 1k 5gb 4m 等酱紫: # # 1k => 1000 bytes # 1kb ...

  8. Context值和bool开关

      Context值和bool开关的相关内容 Context值分为2种 系统默认的context值 服务的context值 Context值的作用 主要是防止有未知文件进入目录文件之中(如将病毒拷贝到 ...

  9. L1-006. 连续因子

    https://www.patest.cn/contests/gplt/L1-006 题目地址 在上面 一个正整数N的因子中可能存在若干连续的数字.例如630可以分解为3*5*6*7,其中5.6.7就 ...

  10. 威佐夫博弈(Wythoff Game)

    有两堆石子,数量任意,可以不同.游戏开始由两个人轮流取石子.游戏规定,每次有两种不同的取法,一是可以在任意的一堆中取走任意多的石子:二是可以在两堆中同时取走相同数量的石子.最后把石子全部取完者为胜者. ...