基于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中number转换成string介绍
Dec 31 Javascript
js显示文本框提示文字的方法
May 07 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
Mar 06 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
Mar 14 Javascript
angular.js实现购物车功能
Oct 23 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
Jan 26 Javascript
ES6之模版字符串的具体使用
May 17 Javascript
vue完成项目后,打包成静态文件的方法
Sep 03 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
Jan 28 Javascript
vue实现移动端图片上传功能
Dec 23 Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 10 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
Jun 11 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
PHP分页显示制作详细讲解
2006/10/09 PHP
ajax完美实现两个网页 分页功能的实例代码
2013/04/16 PHP
Laravel 5.0 发布 新版本特性详解
2015/02/10 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
Javascript自定义排序 node运行 实例
2013/06/05 Javascript
js 弹出框只弹一次(二次修改之后的)
2013/11/26 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
2014/03/03 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
2015/12/25 Javascript
jQuery使用经验小技巧(推荐)
2016/05/31 Javascript
AngularJS优雅的自定义指令
2016/07/01 Javascript
Vue.js每天必学之数据双向绑定
2016/09/05 Javascript
JQuery PHP图片在线裁剪实例
2020/07/27 Javascript
jQuery实现立体式数字动态增加(animate方法)
2016/12/21 Javascript
jQuery实现大图轮播
2017/02/13 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
2018/01/02 jQuery
微信小程序实现城市列表选择
2018/06/05 Javascript
VUE DOM加载后执行自定义事件的方法
2018/09/07 Javascript
JavaScript格式化json和xml的方法示例
2019/01/22 Javascript
layui 富文本编辑器和textarea值的相互传递方法
2019/09/18 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
2020/10/24 Javascript
[02:34]2016完美“圣”典风云人物:BurNIng专访
2016/12/10 DOTA
python操作MySQL数据库具体方法
2013/10/28 Python
介绍Python中的一些高级编程技巧
2015/04/02 Python
Python检测数据类型的方法总结
2019/05/20 Python
pandas DataFrame索引行列的实现
2019/06/04 Python
Django框架 信号调度原理解析
2019/09/04 Python
python绘制规则网络图形实例
2019/12/09 Python
bareMinerals官网:矿物质化妆品和护肤品
2018/02/04 全球购物
lookfantastic荷兰:在线购买奢华护肤、护发和化妆品
2018/11/27 全球购物
百度软件工程师职位
2013/02/14 面试题
面试后感谢信怎么写
2014/02/01 职场文书
员工考核评语大全
2014/04/26 职场文书
电台编导求职信
2014/05/06 职场文书
体育教育毕业生自荐信
2014/06/29 职场文书
离婚财产分隔协议书
2014/10/23 职场文书
中学生检讨书1000字
2014/10/28 职场文书