基于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 相关文章推荐
如何在标题栏显示框架内页面的标题
Feb 03 Javascript
JavaScript面向对象编程
Mar 02 Javascript
Javascript 读后台cookie代码
Sep 15 Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
Jun 21 Javascript
JQuery中html()方法使用不当带来的陷阱
Apr 07 Javascript
基于javascript的Form表单验证
Dec 29 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
Nov 27 Javascript
Angular4的输入属性与输出属性实例详解
Nov 29 Javascript
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
探索浏览器页面关闭window.close()的使用详解
Aug 21 Javascript
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
详解TS数字分隔符和更严格的类属性检查
May 06 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后台程序与Javascript的两种交互方式
2009/10/25 PHP
处理php自动反斜杠的函数代码
2010/01/05 PHP
在PHP模板引擎smarty生成随机数的方法和math函数详解
2014/04/24 PHP
异步加载技术实现当滚动条到最底部的瀑布流效果
2014/09/16 PHP
php中的单引号、双引号和转义字符详解
2017/02/16 PHP
PHP使用PDO操作sqlite数据库应用案例
2019/03/07 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
2019/03/30 PHP
谷歌浏览器 insertCell与appendChild的区别
2009/02/12 Javascript
使用js实现雪花飘落效果
2013/08/26 Javascript
基于jQuery实现点击弹出层实例代码
2016/01/01 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
2016/10/30 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
2018/03/16 Javascript
详解auto-vue-file:一个自动创建vue组件的包
2019/04/26 Javascript
使用Python来编写HTTP服务器的超级指南
2016/02/18 Python
Python编程判断这天是这一年第几天的方法示例
2017/04/18 Python
django创建自定义模板处理器的实例详解
2017/08/14 Python
python编程线性回归代码示例
2017/12/07 Python
使用Python处理Excel表格的简单方法
2018/06/07 Python
对pandas中Series的map函数详解
2018/07/25 Python
python绘制已知点的坐标的直线实例
2019/07/04 Python
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
iPython pylab模式启动方式
2020/04/24 Python
金讯Java笔试题目
2013/06/18 面试题
给定一个时间点,希望得到其他时间点
2013/11/07 面试题
毕业生求职简历中的自我评价
2013/10/18 职场文书
教育学专业实习生的自我鉴定
2013/11/26 职场文书
公司前台辞职报告
2014/01/19 职场文书
教师节促销方案
2014/03/22 职场文书
大学生演讲稿
2014/04/25 职场文书
优秀家长自荐材料
2014/08/26 职场文书
房屋登记授权委托书范本
2014/10/09 职场文书
小学生作文批改评语
2014/12/25 职场文书
村干部任职承诺书
2015/01/21 职场文书
Python代码,能玩30多款童年游戏!这些有几个是你玩过的
2021/04/27 Python
vue实现简单数据双向绑定
2021/04/28 Vue.js
详解Mysql和Oracle之间的误区
2021/05/18 MySQL