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.首先是个外 ...
随机推荐
- BZOJ2049：[SDOI2008]洞穴勘测——题解
http://www.lydsy.com/JudgeOnline/problem.php?id=2049 https://www.luogu.org/problemnew/show/P2147 辉辉热 ...
- jquery Promise和ES6 Promise的区别
1. Deferred对象有resolve和reject方法,可以直接修改状态 jquery用Deferred实现了Promise规范,Deferred与ES6 Promise的最大区别是: Defe ...
- js ajax向后台传数组可以直接拼接传输
ajax向后台传数组是可以直接传的,写法如下 var ids = [ ]; $(dom1).each(function(){ ids.push($(this).val()); }); var use ...
- oracle数据库解锁
当我们修改数据库时用for update 或者使用rowId修改后,对表进行了锁定,由于某种原因没有对他进行关闭,我们需要关闭 select b.username,b.sid,b.serial#,lo ...
- bzoj 5216 [Lydsy2017省队十连测]公路建设 线段树维护 最小生成树
[Lydsy2017省队十连测]公路建设 Time Limit: 20 Sec Memory Limit: 512 MBSubmit: 93 Solved: 53[Submit][Status][ ...
- HDU3231拓扑排序
Box Relations Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Tot ...
- 应用Hash函数
本文系转载,转自:http://www.blogjava.net/jinfei0627/articles/219543.html 应用Hash函数(java描述) 作者:冲处宇宙 时间:2007.1. ...
- 南阳ACM 题目811：变态最大值 Java版
变态最大值 时间限制:1000 ms | 内存限制:65535 KB 难度:1 描述 Yougth讲课的时候考察了一下求三个数最大值这个问题,没想到大家掌握的这么烂,幸好在他的帮助下大家算是解决了 ...
- MongoDB入门（2）- MongoDB安装
windows安装 下载文件,解压缩即可.下载地址 每次运行mongod --dbpath D:/MongoDB/data 命令行来启动MongoDB实在是不方便,把它作为Windows服务,这样就方 ...
- UVALive-4670 Dominating Patterns / 洛谷 3796 【模板】AC自动机
https://vjudge.net/problem/UVALive-4670 中文题面:https://www.luogu.org/problem/show?pid=3796 AC自动机模板 注意如 ...