点击滚动图片JS部分代码以及css设置注意事项
下面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设置注意事项的更多相关文章
- 带左右箭头切换的自动滚动图片JS特效
效果图 按钮 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- 可以左右移动横向无缝滚动的JS图片展示代码
在酷站网站下的,具体路径忘了,稍微改了一下,让它看起来像组滑动 1)被引用的js文件ScrollPic.js ?){){i+=l.length;)I=document.cookie.length;o= ...
- (转载)无缝滚动图片的js和jquery两种写法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js鼠标滚轮滚动图片切换效果
效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...
- jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片(仿相册插件)
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...
- jquery图片无缝滚动代码左右 上下无缝滚动图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS点击img图片放大再次点击缩小JS实现 简单实用Ctrl+C+V就可以用
业务需要,从后台获取的图片列表,用img标签展示,用户需要查看大图.记录下来以便学习和参考.示例图如下: 放大之前: 放大之后: 点击后放大(由于图片高度超出了页面,需要通过overflow:auto ...
- js 如何判断鼠标点击事件还是js代码调用
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- 【XP-IE8】XP系统的IE8无法正常访问图片,按钮无反应,不执行JS脚本代码
环境: Windows XP ,自带的是IE6,另外安装的 IE8 . 状况: 使用IE8浏览内网网站,点击登录按钮,没有反应.滚动图片新闻不显示.但使用Chrome浏览器,一切正常,说明是IE8某处 ...
随机推荐
- 用Angular2+Express快速搭建博客
1. 写在前面 昨天花了1天的时间把自己的博客从以前的Express换成了Angular2+Express,遂记录于此.博客Demo在这里,你也可以点击这里查看完整代码. 第一次使用Angular2, ...
- 关于css+div布局的疑问 2017-03-19
第一次布局一个静态网页,发现许多细节都需要自己探索,出现诸如以下问题: 1.布局问题:经常出现一个div被挤出来?做到一半少一个div布局? 布局之前,要点打好框架,明确每个地方的高宽是多少,争取精确 ...
- [译]Selenium Python文档:四、元素定位
要定位一个页面中的元素有多中策略和方法.你可以根据实际情况选择其中最为合适的.Selenium为定位页面元素提供了下面的这些方法: find_element_by_id(使用id) find_elem ...
- ECMA script 6的新特性
简单介绍下ES6的新特性: (1)箭头操作符 :简化了函数的书写 (2)类的支持:引入了class关键字,对象的创建,继承更加直观,父类方法的调用,实例化,构造函数等概念更加形象化. (3)增强的对象 ...
- 《转载-两篇很好的文章整合》Android中自定义控件
两篇很好的文章,有相互借鉴的地方,整合到一起收藏 分别转载自:http://blog.csdn.net/xu_fu/article/details/7829721 http://www.cnblogs ...
- ORA-01994: GRANT failed: password file missing or disabled
1.错误现象 SQL> grant sysdba to test;grant sysdba to test*ERROR at line 1:ORA-01994: GRANT failed: pa ...
- Mesos+Zookeeper+Marathon+Docker分布式集群管理最佳实践
参考赵班长的unixhot以及马亮blog 笔者QQ:572891887 Linux架构交流群:471443208 1.1Mesos简介 Mesos是Apache下的开源分布式资源管理框架,它被称为分 ...
- CSS核心属性
学习目标 1.css浮动属性详解 2.Css文本属性 3.Css列表属性 4.Css背景属性 5.Css边框属性 一.Css浮动属性详解 无论多么复杂的布局,其基本出发点均是:"如何在一行显 ...
- 异步编程的两种模型,闭包回调,和Lua的coroutine,到底哪一种消耗更大
今天和人讨论了一下CPS变形为闭包回调(典型为C#和JS),以及Lua这种具有真正堆栈,可以yield和resume的coroutine,两种以同步的形式写异步处理逻辑的解决方案的优缺点.之后生出疑问 ...
- 4.Linux的文件搜索命令
1.文件搜索命令 which 语法:which [命令名称] 范例:$which ls 列出ls命令所在目录 [chanshuyi@localhost ~]$ which ls alias ls= ...