js图片轮播
html部分
<a href="" id="pta"><div id="picture" class="pt"></div></a>a标签包裹着div,背景图片作为链接
script部分
var n=-1;//n作为全局变量放在外面,否则每次刷新n的值都是-1
function pt(){
var tp=new Array('url(../bank/picture/1111.jpg)','url(../bank/picture/2222.jpg)','url(../bank/picture/3333.jpg)','url(../bank/picture/4444.jpg)')
var adiv=new Array('http://www.bankofchina.com/pbservice/bi3/201701/t20170124_8524721.html','http://www.bankofchina.com/pbservice/pb7/','http://www.bankofchina.com/pbservice/pb8/','http://www.bankofchina.com/cbservice/cb11/')
var picture=document.getElementById('picture')
var pta=document.getElementById('pta')
n+=1
e=n%tp.length;
pta.setAttribute('href',adiv[e])
picture.style.background=tp[e]
setTimeout('pt()',3000)
}
pt()
js图片轮播的更多相关文章
- js图片轮播效果实现代码
首先给大家看一看js图片轮播效果,如下图 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟i ...
- JS图片轮播[左右轮播
直接可以用,网上摘下来的! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
- js 图片轮播简单版
<html> <head> <meta charset="utf-8" /> <title></title> <s ...
- js 图片轮播(一)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- js 图片轮播代码编辑
图片轮播,将几张图片统一放在展示平台 banner上,通过banner移动将图片轮流播放. <script>// 取对象 var btn_l = document.getElementsB ...
- Js 图片轮播渐隐效果
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 非常简洁的js图片轮播
<div id="tupian"></div><script>var jpg =new Array();jpg[0]="url(c.j ...
- js图片轮播图
/*焦点图*/ var Box='.carousel';//盒子 var Menu=$(Box+' .l_cursor li');//圆点菜单 var Con ...
- angular js 图片轮播
搬运工: eg1: Build a Sweet AngularJS Photo Slider Pt 2 with ngTouch DEMO:http://paul-xiao.github.io/ang ...
- 最简单的JS图片轮播
var arr=new Array(); arr[1]="";//放图片地址 arr[2]=""; arr[3]=""; var no=0; ...
随机推荐
- 有个程序猿要去当CEO了:(一)事情始末
事情大概是这样的: 去年年底,我从原公司离职,原因大概是公司绩效不好,呆着也没意思. 后来听说,年终结算遣散了所有人. 今年年初的时候,前老板又找上我,说希望能和我再合作. 起先是想分我一部分干股,让 ...
- setDefaultCloseOperation()参数得使用说明
System.exit(0)是退出整个程序,如果有多个窗口,全部都销毁退出.setDefaultCloseOperation()是设置用户在此窗体上发起 "close" 时默认执行 ...
- Spring——<aop:scoped-proxy/>理解
首先看一下Spring文档上的两个例子对比: <bean id="userPreferences" class="com.foo.UserPreferences&q ...
- 微信公众号java开发思路
方法一:不开启开发模式,直接在自定义菜单中跳转到网页,适用于流量较小的公众号. 方法二:开启开发者模式,关闭自带的自定义菜单和消息回复,接入自己开发的应用 1.接入校验:创建s ...
- webpack学习笔记(二)-- 初学者常见问题及解决方法
这篇文章是webpack学习第二篇,主要罗列了本人在实际操作中遇到的一些问题及其解决方法,仅供参考,欢迎提出不同意见. 注:本文假设读者已有webpack方面相关知识,故文中涉及到的专有名词不做另外解 ...
- 初步认识Thymeleaf:简单表达式和标签。(二)
本篇文章是对上篇文章中Thymeleaf标签的补充. 1.th:each:循环,<tr th:each="user,userStat:${users}">,userSt ...
- webpack使用总结
我们可以在js中引入样式文件 require('myStyle.css') 这时我们便需要引入相应的webpack loader来帮助我们解析这段代码. 一般来说需要引入css-loader和styl ...
- ngrok完成内网映射外网
项目需求: 完成微信公众号开发配置搭建,其中需要一个可以外部访问的域名 实现技术: www.ngrok.cc 实现方式: 在该网站最下方下载需要的ngrok文件,在最上方点击注册,获取token,之后 ...
- 如何使用LightningChart拖放功能进行数据转移 ?
本文主要介绍如何使用LightningChart扩展拖放功能为所有图表组件创建图表,如:系列,标题,轴线等等.支持用鼠标放置自定义对象到另一个图表中,如:可以添加或修改JSON/CSV或其他格式的数据 ...
- Excel图表-"DNA"图
p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...