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.先设 ...
随机推荐
- Redis 持久化配置（兼论瞎翻译的问题）
redis.conf 文件中配置 save 默认配置项: save save save 查了好几个地方都是这么说的: 第一句的意思:15分钟内修改了一个键就保存??? 往 Redis 里加了一个值,重 ...
- Java split(".") 和 split("\\.")
Java split(".") 和 split("\\.") 问题描述 使用 . 分解 IP 的各个段,并打印,如:192.168.10.123,分解为 192 ...
- Tushare金融大数据入门
Tushare金融大数据社区,是一个免费提供各类金融数据和区块链数据的平台 ,旨在助力智能投资与创新型投资. 积分 数据千万条,积分第一条 目前,提供的数据包含股票.基金.期货.债券.外汇.行业大数据 ...
- python批量执行shell命令
[root@master ~]# cat a.py #!/usr/bin/python # -*- coding:UTF- -*- import subprocess def fun(): subpr ...
- Ubuntu16版本中安装MongoDB
https://docs.mongodb.com/manual/tutorial/install-mongodb-on-linux/ //授权 https://docs.mongodb.com/man ...
- ubuntu安装dockers过程：
1. 先对系统进行更新 1.1 apt-get upgrade 1.2 去中国关于dockers的网站 http://get.daocloud.io/ 1.3 安装docker curl -sSL h ...
- Python3 Selenium自动化web测试 ==> 第二节 页面元素的定位方法 <上>
前置步骤: 上一篇的Python单元测试框架unittest,我认为相当于功能测试测试用例设计中的用例模板,在自动化用例的设计过程中,可以封装一个模板,在新建用例的时候,把需要测试的步骤添加上去即可: ...
- C#编程 Excel操作
使用OLEDB操作Excel,关于OLEDB介绍参考http://www.cnblogs.com/moss_tan_jun/archive/2012/07/28/2612889.html 连接字符串: ...
- GPL，BSD，Apache三个开源协定的大体联系及区别
开源许可证GPL.BSD.MIT.Mozilla.Apache和LGPL的区别 以下是上述协议的简单介绍: BSD开源协议 BSD开源协议是一个给于使用者很大自由的协议.基本上使用者可以"为 ...
- python+selenium显示等待、隐式等待和强制等待的区别
在实际使用selenium或者appium时,等待下个等待定位的元素出现,特别是web端加载的过程,都需要用到等待,而等待方式的设置是保证脚本稳定有效运行的一个非常重要的手段,在selenium中(a ...