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. js中的constructor

    定义和用法 constructor 属性返回对创建此对象的 Date 函数的引用. 语法 object.constructor constructor属性不影响任何JavaScript的内部属性.in ...

  2. having过滤语句

    having 对部分分组来进行过滤 跟在group by 后面 在having语句中不能包含未分组的列名, select FAge,COUNT(*) from T_Employee  where FS ...

  3. 由一个bug引发的SQLite缓存一致性探索

    问题 我们在生产环境中使用SQLite时中发现建表报“table xxx already exists”错误,但DB文件中并没有该表.后面才发现这个是SQLite在实现过程中的一个bug,而这个bug ...

  4. python-copy模块使用

    浅拷贝 import copy dic = { "cpu":[80,], "mem":[80,], "disk":[80,] } print ...

  5. x01.TestViewContent: 插件测试

    开发神器 SharpDevelop 的插件系统,很有学习的必要. 1.首先在 github 上下载源代码,确保编译运行无误. 2.在 AddIns/Misc 下添加 SharpDevelop 插件项目 ...

  6. windows10的第一天使用总结

    一.快速开机设置 我的电脑配置如图,装有VS2015 2010 OFFICE等常用开发工具,在线升级后开机速度并没有明显提升. 1.保证windows font cache service服务启动,3 ...

  7. ubuntu 14.04 配置 jdk1.8

    自己在Ubuntu中安装jdk1.8的步骤,记录以方便以后查询. 将下载好的jdk安装包移到/usr/local目录中(我喜欢将自己安装的软件放在/usr/local目录中),解压缩 sudo tar ...

  8. transactionManager 以及datasource type解析

    transactionManager 在 MyBatis 中有两种事务管理器类型(也就是 type=”[JDBC|MANAGED]”): JDBC – 这个配置直接简单使用了 JDBC 的提交和回滚设 ...

  9. Animator Controller 继承关系

    准备知识 对于Animator Controller中蜘蛛网一样的几十条连线,后续如果靠人工维护,那成本将是很大. AnimatorOverrideController组件的文档:https://do ...

  10. 威佐夫博弈(Wythoff Game)

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