两排滚动js
2016-05-03 14:33
344 查看
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="images/hb_14.jpg" width="220" height="167" />
<p>尾气吸收塔</p>
</a>
<a href="#">
<img src="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;
}
<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="images/hb_14.jpg" width="220" height="167" />
<p>尾气吸收塔</p>
</a>
<a href="#">
<img src="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;
}
相关文章推荐
- split一些简单的分隔(js)
- 聊一聊JavaScript作用域和作用域链
- prefixfree.min.js插件的了解
- js解决列表中按钮重复点击重复提交的问题
- 小白谈谈对JS原型链的理解
- angular.js[2]
- JavaScript js闭包所用的场合以及优缺点
- 使用json协议传输二进制文件
- 解决js输出汉字乱码问题
- extjs 遍历树 根据子节点修改父节点图标
- 原生JS封装Ajax插件(同域&&jsonp跨域)
- jsp实现单刷时间显示,刷新显示时间不刷新页面
- 简单粗暴地理解js原型链--js面向对象编程
- 手机中的js事件
- js所有函数集合
- jsp
- C# litJson 使用方法
- JavaScript 模块插件程序之返回顶部插件
- JavaScript权威指南 第二章 词法结构
- mojo 接口返回键值对的json格式