基于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 相关文章推荐
jQuery 行级解析读取XML文件(附源码)
Oct 12 Javascript
jquery 学习之一 对象访问
Nov 23 Javascript
JavaScript中对象介绍
Dec 31 Javascript
用原生js做单页应用
Jan 17 Javascript
20行js代码实现的贪吃蛇小游戏
Jun 20 Javascript
laravel5.4+vue+element简单搭建的示例代码
Aug 29 Javascript
js阻止默认右键的下拉菜单方法
Jan 02 Javascript
react-native 圆弧拖动进度条实现的示例代码
Apr 12 Javascript
Vue的生命周期操作示例
Sep 17 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
Nov 07 Javascript
Vue3 实现双盒子定位Overlay的示例
Dec 22 Vue.js
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
非常棒的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
php表单提交问题的解决方法
2011/04/12 PHP
CI框架(CodeIgniter)公共模型类定义与用法示例
2017/08/10 PHP
Jquery 快速构建可拖曳的购物车DragDrop
2009/11/30 Javascript
js 获取Listbox选择的值的代码
2010/04/15 Javascript
一些经常会用到的Javascript检测函数
2010/05/31 Javascript
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
2014/02/04 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
Vue.js路由组件vue-router使用方法详解
2016/12/02 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
2017/07/13 Javascript
微信小程序之数据缓存的实例详解
2017/09/29 Javascript
微信小程序如何获取用户信息
2018/01/26 Javascript
基于vue-resource jsonp跨域问题的解决方法
2018/02/03 Javascript
vue路由懒加载的实现方法
2018/03/12 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
2018/11/27 jQuery
详解基于原生JS验证表单组件xy-form
2019/08/20 Javascript
nodejs的安装使用与npm的介绍
2019/09/11 NodeJs
[49:54]Ti4 循环赛第三日 LGD vs Titan
2014/07/12 DOTA
[01:17:47]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[52:02]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第二场 2月26日
2021/03/11 DOTA
Python语言实现机器学习的K-近邻算法
2015/06/11 Python
PyQt5每天必学之组合框
2018/04/20 Python
如何利用Pyecharts可视化微信好友
2019/07/04 Python
不同浏览器对CSS3和HTML5的支持状况
2009/10/31 HTML / CSS
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
2013/01/09 HTML / CSS
美国知名的在线旅游服务网站:Priceline
2016/07/23 全球购物
英国领先的品牌珠宝和配件供应商:Acotis Jewellery
2018/03/07 全球购物
飞利浦西班牙官方网站:Philips西班牙
2020/02/17 全球购物
俄罗斯茶和咖啡网上商店:Tea.ru
2021/01/26 全球购物
Python里面如何拷贝一个对象
2014/02/17 面试题
自主招生自荐书
2013/11/29 职场文书
《两个铁球同时着地》教学反思
2014/02/13 职场文书
建筑专业毕业生自荐信
2014/05/25 职场文书
大学生第一学年自我鉴定
2014/09/12 职场文书
违反单位工作制度检讨书
2014/10/25 职场文书
Python语言内置数据类型
2022/02/24 Python