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.首先是个外 ...
随机推荐
- 51NOD 2026：Gcd and Lcm——题解
http://www.51nod.com/onlineJudge/questionCode.html#!problemId=2026 参考及推导:https://www.cnblogs.com/ivo ...
- POJ1741 tree 【点分治】
Tree Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 25286 Accepted: 8421 Description ...
- React Patterns
Contents Stateless function JSX spread attributes Destructuring arguments Conditional rendering Chil ...
- ubuntu下安装golang
1.安装 sudo apt-get install golang 2.查看go的安装路径 go env 查看 GOROOT="/usr/lib/go-1.6" 3.修改环境变量 e ...
- 论C++11 中vector的N种遍历方法
随着C++11标准的出现,C++标准添加了许多有用的特性,C++代码的写法也有比较多的变化. vector是经常要使用到的std组件,对于vector的遍历,本文罗列了若干种写法. (注:本文中代码为 ...
- BI在连锁零售业应用
BI案例:BI在连锁零售业应用(ZT) Posted on 2015-08-25 09:31 xuzhengzhu 阅读(42) 评论(0) 编辑 收藏 第一部分:连锁零售企业上BI的必要性． 目前国 ...
- 分割png图片
/*** * 分割图片 */public function cut_img(){ $filename = 'site_upload/form_file_forinput/20180313/201803 ...
- IntelliJ IDEA 热加载
修改java文件后 win按:Ctrl+Shift+F9 mac按:cmd+Shift+F9 tomcat-maven-plugin 启动的项目也用这个快捷键热加载
- photoshop的魔棒工具怎么用来抠图
魔棒工具是photoshop中提供的一种可以快速形成选区的工具,对于颜色边界分界明显的图片,能够一键形成选区,方便快捷. 本教程通过一个简单的实例,教新手怎么用Photoshop魔棒工具快速形成抠图选 ...
- 【Contest Hunter【弱省胡策】Round #0-Flower Dance】组合数学+DP
题目链接: http://ch.ezoj.tk/contest/%E3%80%90%E5%BC%B1%E7%9C%81%E8%83%A1%E7%AD%96%E3%80%91Round%20%230/F ...