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.首先是个外 ...
随机推荐
- 【BZOJ5296】【CQOI2018】破解D-H协议（BSGS）
[BZOJ5296][CQOI2018]破解D-H协议(BSGS) 题面 BZOJ 洛谷 Description Diffie-Hellman密钥交换协议是一种简单有效的密钥交换方法.它可以让通讯双方 ...
- BZOJ3631：[JLOI2014]松鼠的新家——题解
http://www.lydsy.com/JudgeOnline/problem.php?id=3631 https://www.luogu.org/problemnew/show/P3258 松鼠的 ...
- BZOJ3156: 防御准备 【斜率优化dp】
3156: 防御准备 Time Limit: 10 Sec Memory Limit: 512 MB Submit: 2207 Solved: 933 [Submit][Status][Discu ...
- bzoj 3673&3674 可持久化并查集&加强版（可持久化线段树+启发式合并）
CCZ在2015年8月25日也就是初三暑假要结束的时候就已经能切这种题了%%% 学习了另一种启发式合并的方法,按秩合并,也就是按树的深度合并,实际上是和按树的大小一个道理,但是感觉(至少在这题上)更好 ...
- Codeforces Round #169 (Div. 2) A水 B C区间更新 D 思路
A. Lunch Rush time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...
- HDU2647 topsort
Problem Description Dandelion's uncle is a boss of a factory. As the spring festival is coming , he ...
- E. Border
E. Border time limit per test 1 second memory limit per test 256 megabytes input standard input outp ...
- Python to list users in AWS
code import boto3 c1=boto3.client('iam') #list_users will be a dict users=c1.list_users() #transfer ...
- [洛谷P3527] [POI2011]MET-Meteors
洛谷题目链接:[POI2011]MET-Meteors 题意翻译 Byteotian Interstellar Union有N个成员国.现在它发现了一颗新的星球,这颗星球的轨道被分为M份(第M份和第1 ...
- MySQL数据库运行环境的搭建
第一步:安装wampserver2.5-Apache-2.4.9-Mysql-5.6.17-php5.5.12-64b文件,安装过程中可能会遇到问题,把遇到的问题代码复制粘贴到360人工服务,查找方案 ...