Js实现图片点击切换与轮播
Js实现图片点击切换与轮播
图片点击切换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var btn1=document.getElementById("pre");
var btn2=document.getElementById("next");
var img=document.getElementById("img1");
var imgarr=["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg","images/6.jpg"];
var index=0;
var info=document.getElementById("pd");
info.innerHTML="一共"+imgarr.length+"张 图片 ，当前 第"+(index+1)+"张";
btn1.onclick=function(){
index--;
if(index<0){
index=imgarr.length-1;
}
img.src=imgarr[index];
info.innerHTML="一共"+imgarr.length+"张 图片 ，当前 第"+(index+1)+"张";
};
btn2.onclick=function(){
index++;
if(index>imgarr.length-1){
index=0;
}
img.src=imgarr[in000dex];
info.innerHTML="一共"+imgarr.length+"张 图片 ，当前 第"+(index+1)+"张";
};
};
</script>
<style type="text/css">
*{
padding: 0;
margin:0;
}
.outer{
width:640px;
height:453px;
margin:100px auto; text-align: center;
} </style>
</head>
<body>
<div class="outer">
<p id="pd"></p>
<img src="data:images/1.jpg" id="img1" />
<button id="pre">上一张</button>
<button id="next">下一张</button> </div>
</body>
</html>
实现效果：
轮播
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding:0px;
margin: 0px;
} #outer{
position: relative;
width:660px;
height:425px;
margin:50px auto ;
background:yellow;
padding:10px 0;
overflow: hidden;
}
#imglist{
position: absolute;
list-style: none;
/*
* 设置偏移量
*
*
*/
left:0px; }
#imglist li{
margin: 0 10px;
float:left;
} #navDiv{
position: absolute;
bottom: 15px;
/*
* 设置left值
* outer宽度 640
* navDiv宽度 30*5=125
* 640-125=515
* 515/2=257.5
* left:257.5px;
*/
left:0; }
#navDiv a{
float:left;
width:20px;
height:20px;
background:#ff1;
opacity: 0.5;
/*兼容IE8的透明*/
filter:alpha(opacity=50);
margin: 0 5px;
}
#navDiv a:hover{
background:red;
}
</style>
<script type="text/javascript" src="tools.js"></script>
<script type="text/javascript"> window.onload=function(){
var imglist=document.getElementById("imglist");
var navDiv=document.getElementById("navDiv");
var outer=document.getElementById("outer");
//获取页面所有的img标签
var imgarr=document.getElementsByTagName("img");
//获取页面所有的A标签
var allA=document.getElementsByTagName("a");
//默认显示图片的索引
var index=0;
//设置
allA[index].style.background="black";
//设置ul的长度
imglist.style.width=660*imgarr.length+"px";
//设置navDiv的left值
navDiv.style.left=(outer.offsetWidth-navDiv.offsetWidth)/2+"px"; //定义一个定时器标识
var timer; //点击超链接切换到指定的图片
//为所有的超链接绑定单击响应函数
for(var i=0;i<allA.length;i++){
//为每一个超链接都添加一个NUM属性
allA[i].num=i;
//为超链接绑定单击响应函数
allA[i].onclick=function(){
//关闭自动切换
clearInterval(timer);
//获取点击超链接的索引，并将其设置为index
index=this.num;
//切换图片 //imglist.style.left=index*-660+"px"; setA();
move(imglist,20,-660*index,"left",function(){
//动画执行完后，再执行自动切换
autoChange();
}); };
}
//自动切换图片
autoChange(); //创建一个方法来设置选中的A
function setA(){ //判断是不是最后一张照片
if(index>=imgarr.length-1){
index=0; //如果是最后一张，就把imglist移到0
imglist.style.left=0+"px";
}
for(var j=0;j<allA.length;j++){
//去掉内联样式，只剩下样式表的样式
allA[j].style.background="";
} allA[index].style.background="black"; }; function autoChange(){
timer=setInterval(function(){
index++;
index%=imgarr.length;
move(imglist,20,-660*index,"left",function(){
setA();
});
},3000);
}; }; </script>
</head>
<body>
<!--创建一个外部的div，来作为大的容器-->
<div id="outer">
<!--创建一个ul，用来放置图片-->
<ul id="imglist">
<li>
<img src="data:images/1.jpg" />
</li>
<li>
<img src="data:images/2.jpg" />
</li>
<li>
<img src="data:images/3.jpg" />
</li>
<li>
<img src="data:images/4.jpg" />
</li>
<li>
<img src="data:images/5.jpg" />
</li>
<li>
<img src="data:images/1.jpg" />
</li>
</ul>
<div id="navDiv">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a> </div>
</div>
</body>
</html>
tools.js
//动画函数
/*参数
* -1.obj 对象
* -2.speed 速度
* -3.target 执行动画的目标
* -4.arrt 要变化的样式
* -5.callback:回调函数 将会在动画执行完后执行
*/ function move(obj,speed,target,arrt,callback){
//关闭上一次定时器
clearTimeout(obj.timer);
//判断速度的正负值
//如果从0向800移动则为正
//如果从800向0移动则为负
var current=parseInt(getStyle(obj,arrt));
if(current>target){
speed=-speed;
}
//开启一个定时器
//为obj添加一个timer属性，用来保存它1自己的定时器的标识
obj.timer=setInterval(function(){ //获取原来的left值
var oldvalue=parseInt(getStyle(obj,arrt));
//在旧值的基础上增加
var newvalue=oldvalue+speed;
if(speed<0&&newvalue<target||speed>0&&newvalue>target)
{
newvalue=target;
}
obj.style[arrt]=newvalue+"px";
//当元素到达target关闭定时器
if(newvalue===target||newvalue===target){
clearTimeout(obj.timer);
//动画执行完 执行函数
callback&&callback();
} },30);
};
实现效果：
Js实现图片点击切换与轮播的更多相关文章
- 纯css就能实现可点击切换的轮播图，feel起来很丝滑
前言 轮播图经常会在项目里用到,但是实际上用到的轮播图都是比较简单的,没有复杂的特效,这个时候如果去引入swiper那些库的话,未免就有点杀鸡焉用牛刀了. 所以不如自己手写一个,而今天我要分享的一种写 ...
- JS图片自动和可控的轮播切换特效
点击这里查看效果:http://hovertree.com/texiao/js/1.htm HTML文件代码如下: <!DOCTYPE html> <html xmlns=" ...
- js 滚轮事件 滚轮焦点图（轮播图）
利用滚轮,切换轮播图.附带mousewheel插件以及原生js写法: <!doctype html> <html> <head> <meta charse ...
- jQuery+html5实现的3D动态切换焦点轮播幻灯片
今天爱编程给网友们分享一款基于jQuery+html5实现的3D动态切换焦点轮播幻灯片,支持左右箭头和圆点按钮播放控制,支持多种不同的3D动态切换特效,自适应全屏显示,兼容360.FireFox.Ch ...
- 图片轮播的JS写法，通用涉及多个轮播
本代码是借鉴大神的代码分析理解后,自己改写的!有不足指出希望给为大神指点. 核心只有一个JS,里面包含了css样式. 展示效果图:
- js实现相册翻页，滚动，切换，轮播功能
我们在做web开发的时候,前台的效果要求是很高的,因为对于不懂程序的用户来说,前台的视觉冲击,无疑是对我们产品的第一印象. 在完成web图片各种功能上,很多框架有很绚丽的效果,但今天我们来看看用原生的 ...
- 点击轮播图片左右button，实现轮播效果
点击左右button.实现图片轮播效果.js代码例如以下: $(function () { var index = 1; var pPage = 1; var $v_citemss = $(" ...
- 使用angular路由切换后 轮播以及iscrollJs失效的问题
我们在使用angular的时候,路由总是最让人头疼的地方. 在这里为大家解决一些用angular来回切换遗留下的小问题 比如我们在使用ng-route时如果主页面含有轮播图,当你切换到其他页面再切回主 ...
- 利用动画+div的前后切换实现轮播
可以利用两块div(分别设为前和后),用绝对定位使两块div重合,再利用z-index实现两块div的堆叠顺序(即显示的变换),利用动画和定时器实现轮播,这就是基本的思路. 完整的顺序如下: 1.先设 ...
随机推荐
- 判断List是否为空的问题
今天公司安排给页面调试Bug,感觉公司人员写的判断判断List是否为空存在一定的问题,公司判断是list!=null这是完全不对的,这只会判断是否有list对象.如果为空,他也会执行if(list!= ...
- 八十四：redis之redis的集合、哈希操作
set集合操作 添加元素:sadd set value1 value2... 查看元素:smembers set 移除元素:srem set member 查看集合中的元素个数:scard set 获 ...
- 七十六：flask.Restful之flask-Restful插件的基本使用
安装:flask 0.8以上.python2.6或者3.3以上:pip install flask-restful 使用方法:1.从flask_restful中导入Api,来创建对象 2.写一个视图函 ...
- nodejs 中间件理解
中间件概念 在NodeJS中,中间件主要是指封装所有Http请求细节处理的方法.一次Http请求通常包含很多工作,如记录日志.ip过滤.查询字符串.请求体解析.Cookie处理.权限验证.参数验证.异 ...
- CentOS 6 系统基础配置
系统版本:CentOS 6.8 Minimal 采用最小化系统安装,许多组件默认是不安装的,通过手工安装一些常用工具包,让系统用起来更顺手. 1.设置机器名: # echo "NETWORK ...
- Docker入门（转载）
Docker入门 一.Docker 1.什么是容器? 容器就是将软件打包成标准化单元,用于开发.交付和部署.容器是轻量的.可执行的独立软件包 ,包含软件运行所需的所有内容:代码.运行时环境.系统工具. ...
- charles工具页面介绍
charles的主页面介绍 手机连上代理之后,每在手机上进行操作我们便会在charles上接收到请求.此时的charles页面将会变成如下密密麻麻的内容,故这节课我们来讲解一下Charles的主页面 ...
- windows客户端如果通过cmd窗口连接到远程linux服务器，可以使用telnet；
linux系统打开telnet端口的方法 2016-03-11 16:02:25 标签:linux telnet 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明. ...
- 虚拟机安装: vmware + ubuntu16.04
参考博客:https://blog.csdn.net/qq1326702940/article/details/82322079 这个博客讲的很详细,只要ubuntu版本相同,应该是一模一样. 注意点 ...
- python基础知识（字符串）
定义字符串 ' '单引号 " "双引号 只能用于单行 '" '"三引号 可以用于多行 拼接字符串使用 +号链接 字符串只能链接字符串其他类型字符串需要用s ...