Js图片点击切换轮播实现代码_javascript技巧

来源:脚本之家  责任编辑:小易  

网上有很多图片轮播的插件,你说的这种是最基本的,主要在于图片切换时的效果,去找找,总有你合适的,而且用法都是很简单的,比如一些jquery插件,$("#turnAuto").turnning(config);就可实现了,这里的turnning只是个例子www.zgxue.com防采集请勿采集本网。

图片点击切换

本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法。分享给大家供大家参考。具体如下: 运行效果如下: 完整实例代码点击此处本站下载。使用方法案例: 1 2 3 4 5 6 7

<!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="images/1.jpg" id="img1" /> <button id="pre">上一张</button> <button id="next">下一张</button> </div> </body></html>

是onclick不是onclock 还有把bian(count)改成bian()

实现效果

轮播

<!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="images/1.jpg" /> </li> <li> <img src="images/2.jpg" /> </li> <li> <img src="images/3.jpg" /> </li> <li> <img src="images/4.jpg" /> </li> <li> <img src="images/5.jpg" /> </li> <li> <img src="images/1.jpg" /> </li> </ul> <div id="navDiv"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></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); };

实现效果

你这个遮盖的方法,还不如换成一个img通过更改src的值来切换图片内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • js图片轮播手动切换特效
  • 原生js实现图片轮播切换效果
  • bootstrap 最常用的js插件系列总结(图片轮播、标签切换等)
  • 原生js实现图片层叠轮播切换效果
  • js图片轮播手动切换效果
  • js支持键盘控制的左右切换立体式图片轮播效果代码分享
  • js实现支持手机滑动切换的轮播图片效果实例
  • javascript实现图片自动和可控的轮播切换特效
  • javascript基本算法汇总
  • 基于bootstrap table组件实现多层表头的实例代码
  • js实现商品抛物线加入购物车特效
  • js抛物线动画实例制作
  • js实现动态生成html table表格的方法分析
  • bootstrap table动态加载数据示例代码
  • javascript实现垂直滚动条效果
  • 通过实例讲解js如何防抖动
  • javascript代码复用模式实例分析
  • javascript创建对象的3种方法
  • 我的js代码实现图片点击切换一下(图片左移一张),为什么不行啊?
  • 图片中圆的按钮点击它切换到另一张图片不点击它自动切换JS代码请问怎么写
  • 谁能写一个:点击就能切换图片的CSS+js的样式代码,就是一块内容里有好多张图片,图片右下角有数字能更换
  • 我是小白。。最近写一个图片轮播特效的代码,html和css部分都已经写好了,而js部分怎么也不会写
  • 图片上有文字的轮播怎样实现点击圆点切换图片时文字不重叠
  • 怎么用js实现点击切换图片背景,一共7张图
  • 手机或触摸屏点击切换图片,怎么修改代码,以实现滑动切换图片。
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptjs图片轮播手动切换特效原生js实现图片轮播切换效果bootstrap 最常用的js插件系列总结(图片轮播、标签切换等)原生js实现图片层叠轮播切换效果js图片轮播手动切换效果js支持键盘控制的左右切换立体式图片轮播效果代码分享js实现支持手机滑动切换的轮播图片效果实例javascript实现图片自动和可控的轮播切换特效javascript基本算法汇总基于bootstrap table组件实现多层表头的实例代码js实现商品抛物线加入购物车特效js抛物线动画实例制作js实现动态生成html table表格的方法分析bootstrap table动态加载数据示例代码javascript实现垂直滚动条效果通过实例讲解js如何防抖动javascript代码复用模式实例分析javascript创建对象的3种方法js刷新页面方法大全js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js打开新窗口的2种方式js数组与字符串的相互转换方法js删除数组里的某个元素方法js设置cookie、读取cookie、删除js 将json字符串转换为json对象的javascript深入理解js闭包javascript 判断用户输入的邮箱及手机格式layer.js open 隐藏滚动条的例子layer页面跳转,获取html子节点元素的值方如何防止回车(enter)键提交表单原生js实现回复评论功能用js限制网页只在微信浏览器中打开(或者只ie下动态加态js文件的方法layui之table checkbox初始化时选中对应选javascript中的数组特性介绍javascript引用类型array实例分析
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved