大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
如果不想用传统的页面跳转,可以考虑使用一下前端的MVC框架,比如backbone.js比如Angular.js都可以实现你说的那种,上下不动只有中间的内容在变,其实加载的是不同的模板,然后用路由控制的,整个浏览器始终处在一个界面中,只是在不停的重新渲染内容,页面并没有跳转,这个应该就是你想要的了吧
创新互联建站主营龙沙网站建设的网络公司,主营网站建设方案,App定制开发,龙沙h5重庆小程序开发搭建,龙沙网站营销推广欢迎龙沙等地区企业咨询
你的截图是banner切换图
想要的效果是点击圆点切换不同的图片,还是切换当前所在的页面?
如果是切换当前所在的页面,你在图片上加上链接不就可以了吗 ?
我刚开始也在找这个问题的答案,现在解决了,为后面学习的人栽棵树吧。
实现这个功能有很多种方法,这里我选一种个人认为比较简单的方法:
建立三个网页,一个作为主页面,另外两个子页面作为切换页面嵌入主页面,子页面也可以用文字替代。
用jQuery方法来切换页面,语言比较简单网上搜一下看看就懂了
下面附上代码
!DOCTYPE html
html
head
meta charset="UTF-8"
title标题/title
!--jQuery 百度CDN库--
script src=""/script
script
// jQuery代码
$(document).ready(function () {
$("#b1").click(function () {
$("#tab_1").show();// 显示
$("#tab_2").hide();// 隐藏
});
$("#b2").click(function () {
$("#tab_1").hide();
$("#tab_2").show();
});
});
/script
/head
body
div
h1标题一/h1
/div
div
div
ul
libutton id="b1"菜单1/button/li
libutton id="b2"菜单2/button/li
/ul
/div
div
div id="tab_1"
子页面1
/div
div id="tab_2" style="display: none"
子页面2
/div
/div
/div
/body
/html
可以用定时器setInterval
如果是有限的背景色切换,那把这些颜色放在一个数组里面,一秒切换一次
1234567
var arrColor=['green','red','blue'];var i=0;setInterval(function(){ obj.style.backgroundColor=arrColor[i]; if(i==arrColor.length-1) i=0; i++;},1000);
如果是随机变颜色,我这里写了一个随机颜色的方法
12345678910
function randomColor() {var Str=['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];var color="#";for(var i=0;i6;i++){var index=Math.ceil(Math.random()*Str.length);color+=Str[index];}return color;}
你可以参考一下
a href="index1.html"点击/a
点击后跳转到index1.html页面。
导航栏下面放一个Div,专门用来显示对应导航栏目的内容。点击导航栏触发点击事件,在事件函数中获取点击的栏目id,通过此id确定往div中添加那个内容。可以用div.innerHTML来更新div显示的内容。
或者,导航栏下面放置多个Div,数量等于导航栏目的个数,所有div要都重叠在一起。在点击事件函数中控制div的显示和隐藏。