基于javascript实现图片切换效果


Posted in Javascript onApril 17, 2016

本文实例为大家分享了js实现图片切换效果,供大家参考,具体内容如下
用js实现点击按钮,图片切换的效果:

<div class="box" id="box">
    <div class="img_box" id="img_box">
      <img src="../raw/b1.jpg" class="image" >
      <img src="../raw/b2.jpg" class="image" >
      <img src="../raw/b3.jpg" class="image" >
      <img src="../raw/b4.jpg" class="image" >
    </div>
    <div id="left" class="switch"></div>
    <div id="right" class="switch"></div>
  </div>

结构:用一个固定宽高的div来做最外层的容器,设置overflow为hidden,

然后内层img_box设置宽度为四倍box的宽度,高度相同,也就是说img_box里面盛放四张img,但是可见的只有一张,下面的两个div,left和right是充当按钮实现点击切换图片,切换图片也就是改变img_box的left属性,所以img_box应该设置position为absolute,为了方便起见,box的position设置为relation,这样img_box就是相对box进行定位了。四张图片设置float为left,宽度和高度与box相同.

CSS代码:

*{
  margin: 0;
  padding: 0;
}
.box{
  width: 800px;
  height: 400px;
  margin: 20px auto;
  position: relative;
  overflow: hidden;
}
.img_box{
  height: 400px;
  width: 3200px;
  position: absolute;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
}
img{
  width: 800px;
  height: 400px;
  float: left;
}
.switch{
  width: 200px;
  height: 100%;
  position: absolute;

}
#left{
  left: 0px;
  top: 0px;
  background: -moz-linear-gradient(left, rgba(84, 84, 84, 0.50), rgba(20%,20%,20%,0));
  background: -webkit-linear-gradient(left, rgba(84, 84, 84, 0.50), rgba(20%,20%,20%,0));
}
#right{
  right:0px;
  top: 0px;
  background: -moz-linear-gradient(left, rgba(20%,20%,20%,0), rgba(84, 84, 84,0.5));
  background: -webkit-linear-gradient(left, rgba(20%,20%,20%,0), rgba(84, 84, 84,0.5));
}
#left:hover{
  background: -moz-linear-gradient(left, rgba(0, 0, 0,0.5), rgba(20%,20%,20%,0));
  background: -webkit-linear-gradient(left, rgba(0, 0, 0,0.5), rgba(20%,20%,20%,0));
}
#right:hover{
  background: -moz-linear-gradient(left, rgba(20%,20%,20%,0), rgba(0, 0, 0,0.5));
  background: -webkit-linear-gradient(left, rgba(20%,20%,20%,0), rgba(0, 0, 0,0.5));
}

left和right用到了背景颜色和透明度渐变的属性,只添加了火狐浏览器和webkit浏览器,另外现在有的IE浏览器是IE和webkit双内核如360安全浏览器

background: -moz-linear-gradient(left, rgba(84, 84, 84, 0.50), rgba(20%,20%,20%,0));

background: -webkit-linear-gradient(left, rgba(84, 84, 84, 0.50), rgba(20%,20%,20%,0));

为了实现切换的时候平滑过渡,所以添加了transition属性:

-moz-transition: 0.5s;

-webkit-transition: 0.5s;

js代码:

var box;
var count=1;
window.onload=function(){
  box=document.getElementById("img_box");
  var left=document.getElementById("left");
  var right=document.getElementById("right");
  left.addEventListener("click",_left);
  right.addEventListener("click",_right);
  document.body.addEventListener("mouseover",demo);
}
function _right(){
  var dis=0;
  if(count<4){
    dis=count*800;
  }else{
    dis=0;
    count=0;
  }
  box.style.left="-"+dis+"px";
  count+=1;
}
function _left(event){
  var dis=0;
  if(count>1){
    dis=(2-count)*800;
  }else{
    dis=-3*800;
    count=5;
  }
  box.style.left=dis+"px";
  count-=1;
}

用全局变量count来记录当前显示的第几张图片,当点击切换按钮的时候根据count来计算应该显示第几张照片,然后计算并设置img_box的left属性即可。

以上就是为大家介绍的js实现图片切换效果的代码,希望能够帮助大家实现图片切换效果。

Javascript 相关文章推荐
浅谈Javascript嵌套函数及闭包
Nov 09 Javascript
一个JavaScript递归实现反转数组字符串的实例
Oct 14 Javascript
innerHTML在IE中报错解决方案
Dec 15 Javascript
AngularJS入门教程之多视图切换用法示例
Nov 02 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 Javascript
Popup弹出框添加数据实现方法
Oct 27 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
May 08 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
Jul 18 Javascript
JavaScript动态添加数据到表单并提交的几种方式
Jun 26 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
Jul 05 Javascript
解决layui checkbox 提交多个值的问题
Sep 02 Javascript
vue实现拖拽效果
Dec 23 Javascript
非常棒的jQuery图片轮播效果
Apr 17 #Javascript
jQuery实现的倒计时效果实例小结
Apr 16 #Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
Apr 16 #Javascript
jQuery实现无限往下滚动效果代码
Apr 16 #Javascript
jQuery遍历json的方法分析
Apr 16 #Javascript
jquery对dom节点的操作【推荐】
Apr 15 #Javascript
Jquery attr()方法 属性赋值和属性获取详解
Apr 15 #Javascript
You might like
全国FM电台频率大全 - 16 河南省
2020/03/11 无线电
不用数据库的多用户文件自由上传投票系统(2)
2006/10/09 PHP
PHP 递归效率分析
2009/11/24 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
js获取单选框或复选框值及操作
2012/12/18 Javascript
子页向父页传值示例
2013/11/27 Javascript
如何动态的导入js文件具体该怎么实现
2014/01/14 Javascript
Node.js(安装,启动,测试)
2014/06/09 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
2015/08/22 Javascript
JS实现动态生成表格并提交表格数据向后端
2020/11/25 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
2016/08/11 Javascript
JS二叉树的简单实现方法示例
2017/04/05 Javascript
webpack 2的react开发配置实例代码
2017/07/28 Javascript
vue.js中实现登录控制的方法示例
2018/04/23 Javascript
原生JS实现简单的无缝自动轮播效果
2018/09/26 Javascript
vuex的module模块用法示例
2018/11/12 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
2019/04/28 Javascript
websocket4.0+typescript 实现热更新的方法
2019/08/14 Javascript
JS removeAttribute()方法实现删除元素的某个属性
2021/01/11 Javascript
Python实现曲线点抽稀算法的示例
2017/10/12 Python
python用户评论标签匹配的解决方法
2018/05/31 Python
python实现输入数字的连续加减方法
2018/06/22 Python
django 微信网页授权登陆的实现
2019/07/30 Python
关于Python核心框架tornado的异步协程的2种方法详解
2019/08/28 Python
Pytorch 实现计算分类器准确率(总分类及子分类)
2020/01/18 Python
pytorch torchvision.ImageFolder的用法介绍
2020/02/20 Python
python中二分查找法的实现方法
2020/12/06 Python
纯CSS3实现表单验证效果(非常不错)
2017/01/18 HTML / CSS
一款html5 canvas实现的图片玻璃碎片特效
2014/09/11 HTML / CSS
实习自我鉴定模板
2013/09/28 职场文书
出国考察邀请函
2014/01/21 职场文书
关于成绩下滑的自我检讨书
2014/09/20 职场文书
小学音乐课教学反思
2016/02/18 职场文书
微信小程序和php的登录实现
2021/04/01 PHP
深入理解Vue的数据响应式
2021/05/15 Vue.js
Mysql中 unique列插入重复值该怎么解决呢
2021/05/26 MySQL