javascript 实现图片轮播和点击切换功能
图片轮播是网页上一个比较常见的功能，下面我们来实现他吧
原理很简单：
1：固定的区域，所有的图片重叠，一次只能显示一张图片
2：通过改变图片的zIndex属性改变显示的图片，就可以达到切换的效果了
<!-- cycle_pic.html -->
<!DOCTYPE html>
<html>
<head>
<title>cycle_pic</title>
<meta charset="utf-8">
<meta content="text/html" http-equiv="Content-Type">
<style type="text/css">
#slideshow_wrapper {
POSITION: relative;
PADDING-BOTTOM: 0px;
BACKGROUND-COLOR: #121212;
PADDING-LEFT: 0px;
WIDTH: 650px;
PADDING-RIGHT: 0px;
HEIGHT: 400px;
OVERFLOW: hidden;
PADDING-TOP: 0px
}
#slideshow_footbar {
Z-INDEX: 5;
POSITION: absolute;
FILTER: alpha(opacity=50);
WIDTH: 100%;
BOTTOM: 0px;
HEIGHT: 30px;
background-color: black;
opacity:0.5;
}
#slideshow_photo {
POSITION: absolute;
WIDTH: 100%;
HEIGHT: 100%;
CURSOR: pointer
}
#slideshow_photo A {
Z-INDEX: 1;
BORDER-BOTTOM: 0px;
POSITION: absolute;
BORDER-LEFT: 0px;
MARGIN: 0px;
DISPLAY: block;
BORDER-TOP: 0px;
TOP: 0px;
BORDER-RIGHT: 0px;
LEFT: 0px
}
#slideshow_footbar .slideshow-bt {
BACKGROUND-COLOR: #d2d3d4;
MARGIN: 10px 10px 0px 0px;
WIDTH: 10px;
DISPLAY: inline;
FLOAT: right;
HEIGHT: 10px;
FONT-SIZE: 0px
}
#slideshow_footbar .bt-on {
BACKGROUND-COLOR: red;
}
</style>
<script type="text/javascript" charset="utf-8">
var curIndex=1;//初始换显示第一张
function slideTo (index) {
var index = parseInt(index);
var pic = document.getElementById("slideshow_photo").childNodes;
for(var i=0;i<pic.length;i++){//改变zIndex属性
if(pic[i].attributes && pic[i].attributes['index'] && parseInt(pic[i].attributes['index'].value)==index){
pic[i].style.zIndex=2;
curIndex=index;
}
else if(pic[i].attributes && pic[i].attributes['index']) {
pic[i].style.zIndex=1;
}
}
var bts = document.getElementsByClassName("slideshow-bt");
for(var i=0;i<bts.length;i++){//改变显示的效果
if(parseInt(bts[i].attributes['index'].value)==index){
bts[i].className="slideshow-bt bt-on";
}
else bts[i].className = "slideshow-bt";
}
}
window.onload = function () { //为按钮初始化onclick事件
var bts = document.getElementsByClassName("slideshow-bt");
for(var i=0;i<bts.length;i++){
bts[i].onclick = function () {
slideTo(this.attributes['index'].value);
}
}
}
setInterval(function () {//循环切换
if(curIndex+1>5) curIndex=0;
slideTo(curIndex+1);
},2000);
</script>
</head>
<body>
<div id="slideshow_wrapper">
<div id="slideshow_photo">
<a href="#" title="" index="1"><img src="./num/1.jpg" width="650px;" alt="1" border="0px;"></a>
<a href="#" title="" index="2"><img src="./num/2.jpg" width="650px;" alt="2" border="0px;"></a>
<a href="#" title="" index="3"><img src="./num/3.jpg" width="650px;" alt="3" border="0px;"></a>
<a href="#" title="" index="4"><img src="./num/4.jpg" width="650px;" alt="4" border="0px;"></a>
<a href="#" title="" index="5"><img src="./num/5.jpg" width="650px;" alt="5" border="0px;"></a>
</div>
<div id="slideshow_footbar">
<div class="slideshow-bt" index="5"></div>
<div class="slideshow-bt" index="4"></div>
<div class="slideshow-bt" index="3"></div>
<div class="slideshow-bt" index="2"></div>
<div class="slideshow-bt" index="1"></div>
</div>
</div>
</body>
</html>
javascript 实现图片轮播和点击切换功能的更多相关文章
- jqs实现图片轮播--通过点击按钮来实现
<!-- 布局思路:一个大的div,中有一个ul.和一个箭头的div css样似描述: 整个盒子距离顶部100px,又水平居中 盒子的宽高为图片的实际宽高 由于每次都是看见了一张图片:有两种方式 ...
- JavaScript实现图片轮播组件
效果: 自动循环播放图片,下方有按钮可以切换到对应图片. 添加一个动画来实现图片切换. 鼠标停在图片上时,轮播停止,出现左右两个箭头,点击可以切换图片. 鼠标移开图片区域时,从当前位置继续轮播. 提供 ...
- 原生Javascript实现图片轮播效果
首先引入js运动框架 function getStyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; } else{ ...
- HTML——JAVASCRIPT练习题——图片轮播
方法一: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- Bootstrap3.0学习第二十六轮(JavaScript插件——图片轮播)
详情请查看http://aehyok.com/Blog/Detail/32.html 个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链接:ht ...
- JavaScript实现图片轮播图
<!DOCTYPE html><html> <head> <script > var time; function init(){ //设置定时操作 t ...
- 纯javaScript、jQuery实现个性化图片轮播
纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...
- Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示
用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...
- 图片轮播(左右切换)--JS原生和jQuery实现
图片轮播(左右切换)--js原生和jquery实现 左右切换的做法基本步骤跟 上一篇文章 淡入淡出 类似,只不过修改了一些特定的部分 (1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外 ...
随机推荐
- POJ.1006 Biorhythms (拓展欧几里得+中国剩余定理)
POJ.1006 Biorhythms (拓展欧几里得+中国剩余定理) 题意分析 不妨设日期为x,根据题意可以列出日期上的方程: 化简可得: 根据中国剩余定理求解即可. 代码总览 #include & ...
- CodeForces - 158B.Taxi (贪心)
CodeForces - 158B.Taxi (贪心) 题意分析 首先对1234的个数分别统计,4人组的直接加上即可.然后让1和3成对处理,只有2种情况,第一种是1多,就让剩下的1和2组队处理,另外一 ...
- oracle中varchar2字段存入blob字段及blob转成varchar2
CREATE OR REPLACE FUNCTION C2B (b IN CLOB default empty_clob()) RETURN BLOB -- typecasts BLOB to CLO ...
- BAT-Python面试题
Python语言特性 1 Python的函数参数传递 看两个如下例子,分析运行结果: 代码一: a = 1 def fun(a): a = 2 fun(a) print(a) # 1 代码二: a = ...
- 常州模拟赛d7t3 水管
分析:第一问还是很好做的,关键是怎么做第二问.我们可以每次删掉最小生成树上的一条边,然后再求一次最小生成树,看边权和大小和原来的是不是一样的,不过这个做法效率很低. 考虑Kruskal算法的原理,每次 ...
- ACM1258邻接表
教训:使用邻接表的时候一定要把邻接表的结构组定义的足够大,不能仅仅等于节点的个数,因为线段的数量往往远超过节点的数量. 这个题目是拓扑排序练习,提高下理解. #include<iostream& ...
- HDU3265 线段树（扫描线）
Posters Time Limit: 5000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submi ...
- 自己做的jquery的autocomplete的一个例子
转载自:http://dada-fangfang.iteye.com/blog/695464 首先下载jquery.js和jquery.autocomplete.js 注意:jquery.js 要放在 ...
- 如何把自己写的python程序给别人用
这里讲的给别人用,不是指将你的代码开源,也不是指给另一个程序员用..... 前段时间写了个程序,输入URP学生系统的账号和密码,输出课表.绩点之类的信息,想给同学用,但是总不能叫别人也去装python ...
- uva 12325 Zombie's Treasure Chest
https://vjudge.net/problem/UVA-12325 题意: 一个箱子,体积为N 两种宝物,体积为S1.S2,价值为V1.V2,数量无限 最多装多少价值的宝物 数据范围:2^32 ...