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.先设 ...
随机推荐
- Docker安装ElasticSearch 版本7.1.1
一.Docker 部署 ElasticSearch 1.从仓库中查找所有ElasticSearch的镜像 [root@iZwz99dhxbd6xwly17tb3bZ app]# docker sear ...
- LC 712. Minimum ASCII Delete Sum for Two Strings
Given two strings s1, s2, find the lowest ASCII sum of deleted characters to make two strings equal. ...
- LC 656. Coin Path 【lock, Hard】
Given an array A (index starts at 1) consisting of N integers: A1, A2, ..., AN and an integer B. The ...
- Ceph 客户端的 RPM 包升级问题
问题 最近想把一个现有的 Ceph 客户端升级为最新的 M 版: [root@overcloud-ovscompute-0 ~]# rpm -qa | grep ceph puppet-ceph-2. ...
- 八十六：redis之RDB和AOF两种数据持久化机制
详见:http://redisdoc.com/persistence/index.html redis.conf RDB机制 改为5秒内1次 文件已生成 关闭RDB,注释掉3个save,重启redis ...
- Initializer for conditional binding must have Optional type, not 'String'
今天看到问Swift问题: Initializer for conditional binding must have Optional type, not 'String' 以前没遇到过这个问题, ...
- C基础知识(9)：输入输出、文件读写
输入输出 (1) getchar() & putchar() 函数: 读写字符. (2) scanf() 和 printf() 函数:根据提供的format来转换输入为其他数据类型,并根据提供 ...
- C# 跨线程更新 UI
Winforms 跨线程更新 UI 在 Winforms 中, 所有的控件都包含 InvokeRequired 属性, 如果我们要更新UI,通过它我们可以判断是否需要调用 [Begin]Invoke. ...
- Python浅拷贝与深拷贝（可变对象与不可变对象）
第一次遇到深拷贝和浅拷贝的问题是用python在一个for循环中对一个list赋值,使用的语句是 a = b 这个b会不断带入循环,每次计算得到,最后发现list乱七八糟的,后来才发现,python中 ...
- RedisTemplate5种数据结构操作
1 操作字符串 redisTemplate.opsForValue(); 2 操作hash redisTemplate.opsForHash(); 3 操作list redisTemplate.ops ...