下面js代码可以实现8张图片点击左右按钮后切换的过渡动画效果

var pslul11=document.getElementById('pslul11')
var pslspan1=document.getElementById('pslspan1')
var pslspan2=document.getElementById('pslspan2')
var p=0
pslspan2.onclick=function dd1(){
if (p<7) {p+=1}
pslul11.style.marginLeft='-180'*p+'px';
pslul11.style.transition='margin-left 0.8s ease';
}
pslspan1.onclick=function dd2(){
if (p>0) {p-=1}
pslul11.style.marginLeft='-180'*(p)+'px';
pslul11.style.transition='margin-left 0.8s ease';
}

在设置css属性时,为了美观调了很久才调好,浪费了很多时间,下面是总结的css设置注意部分:

动画所在层用一个宽度与动画显示宽度相同的父元素包裹,左右按钮放置在父元素外

点击滚动图片JS部分代码以及css设置注意事项的更多相关文章

  1. 带左右箭头切换的自动滚动图片JS特效

    效果图 按钮 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  2. 可以左右移动横向无缝滚动的JS图片展示代码

    在酷站网站下的,具体路径忘了,稍微改了一下,让它看起来像组滑动 1)被引用的js文件ScrollPic.js ?){){i+=l.length;)I=document.cookie.length;o= ...

  3. (转载)无缝滚动图片的js和jquery两种写法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  5. jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片(仿相册插件)

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...

  6. jquery图片无缝滚动代码左右 上下无缝滚动图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. JS点击img图片放大再次点击缩小JS实现 简单实用Ctrl+C+V就可以用

    业务需要,从后台获取的图片列表,用img标签展示,用户需要查看大图.记录下来以便学习和参考.示例图如下: 放大之前: 放大之后: 点击后放大(由于图片高度超出了页面,需要通过overflow:auto ...

  8. js 如何判断鼠标点击事件还是js代码调用

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  9. 【XP-IE8】XP系统的IE8无法正常访问图片,按钮无反应,不执行JS脚本代码

    环境: Windows XP ,自带的是IE6,另外安装的 IE8 . 状况: 使用IE8浏览内网网站,点击登录按钮,没有反应.滚动图片新闻不显示.但使用Chrome浏览器,一切正常,说明是IE8某处 ...

随机推荐

  1. Calender设置固定时间遇到的问题

    在使用Calender获取实例,设置成UTC时区时,发现比我们常规的月份多了一个月: 示例代码如下: Calendar calendar = Calendar.getInstance(TimeZone ...

  2. idea调试SpringMvc, 出现:java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListener错误的解决办法

    有时,使用idea开发SpringMvc发现调试时出现以下错误: 12-Mar-2017 12:08:02.345 严重 [RMI TCP Connection(2)-127.0.0.1] org.a ...

  3. 第一次"正经面试"之发现自己的缺陷和不足

    1:初试之校园招聘~~~ 如果你细心,可能发现了"正经面试"加了双引号,说起这次面试(昨天面的技术试),要从上礼拜六,距今已经一礼拜了吧.现在这个时候校园招聘已经蠢蠢欲动了吧,(说 ...

  4. SolrCloud的介绍

    SolrCloud(solr云)是Solr提供的分布式搜索方案. 当你需要大规模,容错,分布式索引和检索能力时使用 SolrCloud. 当索引量很大,搜索请求并发很高时,同样需要使用SolrClou ...

  5. ios 个推推送集成

    个推推送总结: 个推第三方平台官网地址:http://www.getui.com/cn/index.html 首先去官网注册账号,创建应用,应用的配置信息,创建APNs推送证书上传 P12证书(开发对 ...

  6. Mac系统安装nginx+rtmp模块

    1.安装命令 ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install) ...

  7. 解读web服务器与php的工作原理

    最近决定重读php手册(好吧,其实之前也没怎么读,尴尬脸),既然是重读,那就从php的安装开始咯,然后被手册中出现的各种新词搞懵逼了,什么cgi.fastcgi.sapi.fpm,苍天啊,这些都是什么 ...

  8. day001-html知识点总结(-)块级。行内元素区分

    -.行内元素和块级元素的区别与转换: 区别: 1.从形式上看,在标准文档流中,行内元素会水平方向呈线性排列,而块级元素会各占一行,垂着方向排列. 2.在结构使用上,块级元素可以包含行内元素和块级元素, ...

  9. ArrayList和List主要区别 就是ArrayList类型不安全。

    什么是不安全? 1:List大家都知道初始化的时候需要定义其类型,例如 List<int> listTest = new List<int>():而ArrayList,例如:A ...

  10. LVS + keepalived(DR) 实战

    一.LVS体系结构 使用LVS架设的服务器集群系统有三个部分组成:最前端的负载均衡层,用Load Balancer表示,中间的服务器群组层,用Server Array表示,最底端的数据共享存储层,用S ...