两排滚动js
html:
<div class="mr_frbox">
<div class="showtitle">
<span>产品展示</span>
<span class="show-right">News</span>
</div>
<div class="og_prev prev"></div>
<div class="mr_frUl">
<ul class="showlist">
<li>
<a href="#">
<img src="data:images/hb_14.jpg" width="220" height="167" />
<p>尾气吸收塔</p>
</a>
<a href="#">
<img src="data:images/hb_14.jpg" width="220" height="167" />
<p>尾气吸收塔</p>
</a>
</li>
</ul>
</div>
<div class="og_next next"></div>
</div>
js
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.SuperSlide2.js"></script>
css
/* scroll */
/* .scroll{position:relative;}
.picbox{background:#fff;position:relative;}
.goodlist p{text-align:center;} */
/* scroll */
.scroll{width:1100px;margin:0 auto;position:relative;overflow:hidden;}
.picbox{height:600px;background:#fff;overflow:hidden;position:relative;margin:15px;}
.picbox ul{height:285px;padding-top:5px;}
.piclist{position:absolute;left:0px;top:0px;}
.swaplist{position:absolute;left:-3000px;top:0px;}
.swaplist{
clear:both;
display:block;
margin-top:40px;
}
.swaplist li{
height:169px;
border:1px solid #ccc;
float:left;
margin-right:32px;
margin-left:18px;
margin-bottom:50px;
}
/* btn */
.mr_frUl{
/* margin-left:12px; */
}
.mr_frbox{
position:relative;
}
.showtitle{
margin-bottom:50px;
}
.showlist a img{
border:1px solid #ccc;
width:222px;
height:169px;
}
.showlist p{
height:32px;
line-height:32px;
margin-bottom:30px;
text-align:center;
}
.prev{
background:url('../images/bt_03.jpg') center no-repeat;
width:18px;
height:41px;
cursor: pointer;
position:absolute;
left:0px;
top:278px;
z-index:9999;
}
.next{
background:url('../images/bt_05.jpg') center no-repeat;
width:18px;
height:41px;
cursor: pointer;
position:absolute;
right:0px;
top:278px;
z-index:9999;
}
.tempWrap{
width:1100px !important;
}
两排滚动js的更多相关文章
- 移动手机端H5无缝间歇平滑向上滚动js代码
在没结合css3的transform实现平滑过渡前,我都是用的jquery的animate方法,此方法在PC端基本看不出来有稍微卡顿的现象,但是在性能不高的手机上使用该方法,就会有明显的卡顿现象,不够 ...
- jQuery图片无缝滚动JS代码ul/li结构
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 获取网页URL地址及参数等的两种方法(js和C#)
转:获取网页URL地址及参数等的两种方法(js和C#) 一 js 先看一个示例 用javascript获取url网址信息 <script type="text/javascript&q ...
- 不间断图片滚动JS
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-05-07) MSClass是一款通用不间断滚动JS封装类,几乎支持目前所有流行风格的图片或文字滚动,横向/竖向/连续/间断 ...
- 12个高矮不同的人,排成两排(catalan数)
问题描述: 12个高矮不同的人,排成两排,每排必须是从矮到高排列,而且第二排比对应的第一排的人高,问排列方式有多少种? 这个笔试题,很YD,因为把某个递归关系隐藏得很深. 问题分析: 我们先把这12个 ...
- MapReduce:将下面的两排数字先按第一排排序,然后再按第二排排序,要求顺序排序
MapReduce:将下面的两排数字先按第一排排序,然后再按第二排排序,要求顺序排序 文件如下: 这个案例主要考察我们对排序的理解,我们可以这样做: 代码如下(由于水平有限,不保证完全正确,如果发现错 ...
- Comet OJ - 2019国庆欢乐赛 C题 两排房子
###题目链接### 题目大意:这里有横着的两排房子,给你每个房子的左端点和右端点.若两排房子中分别有两个房子 x y ,他们在横坐标上有重叠部分(端点重叠也算),则被称为 “对门” 关系. 问你总共 ...
- div随页面滚动遇顶固定的两种方法(js&jQuery)
一.遇顶固定的例子 我一直以为是某个div或层随屏幕滚动,遇顶则固定,离开浏览器顶部又还原这样的例子其实不少,其实它的名字叫“层的智能浮动效果”.目前我们在国内的商业网站上就常常看到这样的效果了.例如 ...
- js 两个滚动事件相互影响
document.addEventListener('scroll', function(event) { if (event.target.id === 't_r_content') { // or ...
随机推荐
- JS实现上下左右四方向无间隙滚动
想必大家都注意到<marquee>的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出< marquee>,不管怎么做,都略显麻烦.下面说一下这个相对简单的实现思路: ...
- [iOS经典面试题]用变量a给出下面的定义
用变量a给出下面的定义 a)一个整型数(An integer) b) 一个指向整型数的指针(A pointer to an integer) c) 一个指向指针的的指针,它指向的指针是指 ...
- cookiecutter-flask生成的框架里边自带了一个CRUDMixin类
单元测试的必要性 之前曾经写过一篇讲单元测试的,正好最近也在实践和摸索.我似乎有种洁癖,就是我会严格遵守流程性的东西,比如测试,注释和文档等.目前就职的公司在我接手项目的时候是没有一行单元测试的,我挺 ...
- Everything文件名实时搜索||解决局域网文件共享问题
内容概要:Everything中文版下载地址及使用.用Everything轻松解决局域网文件共享问题.Everything语言设置问题 另:Everything只支持NTFS格式的磁盘(工作原理的缘故 ...
- IOS第四天(6:答题区按钮点击和乱序)
#pragma mark - 答题区按钮点击方法 - (void)answerClick:(UIButton *)button { // 1. 如果按钮没有字,直接返回 ) return; // 2. ...
- 【产品更新】EVC8013 硬件更新!
EVC8013 三合一磁耦合隔离转换器(USB转RS-232 / RS-485 / RS-422 ),迎来一次硬件大幅度升级,升级不加价! 本次升级主要有以下几个方面: 1.采用第二代金升阳 3000 ...
- java.lang.NoClassDefFoundError: org/apache/commons/lang/exception/NestableRuntim [问题点数:40分,结帖人wangxiaohua_001]
14:56:10.093 WARN!! Error for /butterfly/plugins/zhonghang/UsefulData/save_usefuldata.bshjava.lang.N ...
- Javascript 笔记与总结(2-15)结构、样式、行为分离
[例] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- buffer overflow
Computer Systems A Programmer's Perspective Second Edition We have seen that C does not perform any ...
- MetaWeblog 同时管理51cto,csdn,sina,163,oschina,cnblogs等博客
我们技术人一般都会有自己的一个博客,用于记录一些技术笔记,也期望自己的笔记文章可以让更多人知道. 如何让更多人知道自己的博客? 搜索引擎收录,用户通过关键词搜索可能会进入 内容运营,但是一般技术人为了 ...