下面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. Entity Framework — ( Database First )

    什么是Entity Framework Entity Framework是微软以 ADO.NET 为基础所发展出来的对象关系对应 (O/R Mapping) 解决方案.将数据存储从域对象自动映射到关系 ...

  2. 用C写一个web服务器(二) I/O多路复用之epoll

    .container { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px } .conta ...

  3. iOS开发之类扩展

    在以往写代码时,我们经常是把声明写在.h文件中,把实现写在.m文件中,但是在实际开发中,如果把声明写在.h文件中会暴露程序很多属性(成员变量.成员变量的get和set方法),为了安全考虑,引入了类扩展 ...

  4. python运用中文注释时报错解决方法

    写了一段简单的代码,不知 为什么总是报错,后来上网查了一下才知道原因,当用中文进行注释时需要添加如下代码:# coding=utf-8          (注意:该段代码必须放在最前面才能有用,并且 ...

  5. inux的进程-进程的概念和fork创建进程

    一.  什么是进程? 初学者,可能认为程序或者一段代码就是一个进程.其实这样说是很不全面的,进程简单的说就是一个个条件. 1.需要一个代码 2.需要运行这个代码环境和资源 从下面的一段代码,我们来分析 ...

  6. [SinGuLaRiTy] 数论基础

    [SinGuLaRiTy-1004] Copyright (c) SinGuLaRiTy 2017 . All Rights Reserved. 整除: 设a,b为整数,且a不为0,如果存在一个整数q ...

  7. Java版权信息之Jautodoc

    Java项目开发中,常常需要在编码文件上面加上一些版权声明或者类注释,如果文件很多,手工去添加或者修改,会很麻烦.可以利用工具满足我们的要求.一.版权声明可以使用Jautodoc.将jautodoc的 ...

  8. html结合js实现简单的树状目录

    最近在学jsp,期末了要做项目,需要用到树状目录,百度了很多,都没有找到想要的答案,最后自己折腾了半天,才搞定. 下面我就来分享一下怎么实现一个简单的树状目录: 1. 下载jquery-treevie ...

  9. boostrap---btn

    bootstrap入门教程,按钮.按钮风格.下拉菜单等 本教程演示: bootstrap框架的按钮.按钮大小.按钮风格.按钮组.下拉菜单制作等. 使用的版本:Bootstrap v2.3.2 . 下面 ...

  10. JavaWeb总结(二)—HttpServletResponse对象

    Web服务器收到客户端的http请求,会针对每一次的请求,分别创建一个用于代表请求的request对象和response对象.我们要获取客户端提交的数据,只需要找request对象.要向客户端输出数据 ...