js+css3实现多行图片点击(自动)左右无缝轮播特效
/*效果图*/
HTML: <div class="scroll">
<div class="picbox">
<ul class="piclist mainlist">
<li class="goodlist">
<a class="scrolling_picture"><img src="data:images/timg.jpg" class="pics" /></a>
<a class="title">安全联盟信誉企业</a>
</li>
<li class="goodlist">
<a class="scrolling_picture"><img src="data:images/timg1.jpg" class="pics" /></a>
<a class="title">安全联盟信誉企业</a>
</li>
<li class="goodlist">
<a class="scrolling_picture"><img src="data:images/timg2.jpg" class="pics" /></a>
<a class="title">安全联盟信誉企业</a>
</li>
<li class="goodlist">
<a class="scrolling_picture"><img src="data:images/timg3.jpg" class="pics" /></a>
<a class="title">安全联盟信誉企业</a>
</li>
<li class="goodlist">
<a class="scrolling_picture"><img src="data:images/timg4.jpg" class="pics" /></a>
<a class="title">安全联盟信誉企业</a>
</li>
<li class="goodlist">
<a class="scrolling_picture"><img src="data:images/timg5.jpg" class="pics" /></a>
<a class="title">安全联盟信誉企业</a>
</li>
<li class="goodlist">
<a class="scrolling_picture"><img src="data:images/timg.jpg" class="pics" /></a>
<a class="title">安全联盟信誉企业</a>
</li>
<li class="goodlist">
<a class="scrolling_picture"><img src="data:images/timg1.jpg" class="pics" /></a>
<a class="title">安全联盟信誉企业</a>
</li>
</ul>
<ul class="piclist swaplist"></ul>
</div>
<div class="og_prev"></div>
<div class="og_next"></div>
</div>
CSS:
* {
margin:0;
padding:0;
list-style:none;
}
body {
font-size:12px;
}
a {
text-decoration:none;
}
.scroll {
width:760px;
margin:0 auto;
position:relative;
overflow:hidden;
}
.picbox {
width:730px;
height:340px;
background:#fff;
border:1px solid #DED7D1;
overflow:hidden;
position:relative;
margin:15px;
}
.picbox ul {
height:285px;
padding-top:5px;
}
.piclist {
position:absolute;
left:0px;
top:0px;
}
.piclist li.goodlist {
width:221px;
margin:10px 0;
padding:0px 5px;
margin-right:-1px;
float:left;
padding-left: 20px;
}
.piclist li.goodlist img {
width:100%;
height:120px;
}
.swaplist {
position:absolute;
left:-3000px;
top:0px;
}
.og_prev, .og_next {
width:30px;
height:60px;
background:url(../images/btn.png) no-repeat;
position:absolute;
top:152px;
z-index:99;
cursor:pointer;
}
.og_prev {
background-position:0 0;
left:0px;
}
.og_prev:hover {
background-position:0 -60px;
}
.og_next {
background-position:-30px 0;
right:0px;
}
.og_next:hover {
background-position:-30px -60px;
}
.goodlist img.pics {
width:85px;
height:135px;
float:left;
background:#fff url(../images/loading.gif) center center no-repeat;
}
.title {
width:100%;
height:22px;
line-height:22px;
display:block;
color:#363636;
text-align: center;
margin-top: 10px;
}
.scrolling_picture{overflow:hidden; display:block;width:90%;}
JS:
$(function(){
linum = $('.mainlist li').length;//图片数量
w = linum/2 * 232;//ul宽度
$('.piclist').css('width', w + 'px');//ul宽度
$('.swaplist').html($('.mainlist').html());//复制内容
$('.og_next').click(function(){
if($('.swaplist,.mainlist').is(':animated')){
$('.swaplist,.mainlist').stop(true,true);
}
if($('.mainlist li').length>4){//多于4张图片
ml = parseInt($('.mainlist').css('left'));//默认图片ul位置
sl = parseInt($('.swaplist').css('left'));//交换图片ul位置
if(ml<=0 && ml>w*-1){//默认图片显示时
$('.swaplist').css({left: '928px'});//交换图片放在显示区域右侧
$('.mainlist').animate({left: ml - 928 + 'px'},'slow');//默认图片滚动
if(ml==(w-928)*-1){//默认图片最后一屏时
$('.swaplist').animate({left: '0px'},'slow');//交换图片滚动
}
}else{//交换图片显示时
$('.mainlist').css({left: '928px'})//默认图片放在显示区域右
$('.swaplist').animate({left: sl - 928 + 'px'},'slow');//交换图片滚动
if(sl==(w-928)*-1){//交换图片最后一屏时
$('.mainlist').animate({left: '0px'},'slow');//默认图片滚动
}
}
}
})
$('.og_prev').click(function(){
if($('.swaplist,.mainlist').is(':animated')){
$('.swaplist,.mainlist').stop(true,true);
}
if($('.mainlist li').length>4){
ml = parseInt($('.mainlist').css('left'));
sl = parseInt($('.swaplist').css('left'));
if(ml<=0 && ml>w*-1){
$('.swaplist').css({left: w * -1 + 'px'});
$('.mainlist').animate({left: ml + 928 + 'px'},'slow');
if(ml==0){
$('.swaplist').animate({left: (w - 928) * -1 + 'px'},'slow');
}
}else{
$('.mainlist').css({left: (w - 928) * -1 + 'px'});
$('.swaplist').animate({left: sl + 928 + 'px'},'slow');
if(sl==0){
$('.mainlist').animate({left: '0px'},'slow');
}
}
}
});
});
js+css3实现多行图片点击(自动)左右无缝轮播特效的更多相关文章
- react使用swiper,解决添加点击事件首位图片点击失效,解决轮播按钮被覆盖问题
JS部分 createSwiper1() { var option = { // slidesPerView: 5, slidesPerView: 3, centeredSlides:true, }; ...
- js实现多行图片点击(自动)左右无缝轮播特效
/*效果图*/ HTML: <div class="scroll"> <div class="picbox"> ...
- 分别用css3、JS实现图片简单的无缝轮播功效
本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个i ...
- 原生js和jquery实现图片轮播特效
本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...
- 原生js和jquery实现图片轮播特效(转)
本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...
- js和jquery实现图片无缝轮播的不同写法
多掌握一种方法总是会有好处的,学习编程就要多思考,举一反三 下面写一下实现图片自动播放的代码,由于学习的是javascript,代码量很大,所以又学习了jquery库的操作,非常简便 还有非常有逼格的 ...
- js实现图片无缝轮播
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
- JQuery制作基础的无缝轮播与左右点击效果
在网页中我们想要的无缝轮播左右循环有好多好多中,这是我第一个轮播效果,也是最基础的,和大家分享一下,对于初学者希望你们能有所借鉴,对于大神我想让你们尽情的虐我给我宝贵的意见. 这个是我要的效果 进入正 ...
随机推荐
- dp复习 背包[礼物]
[问题描述]人生赢家老王在网上认识了一个妹纸,然后妹纸的生日到了,为了表示自己的心意,他决定送她礼物.可是她喜爱的东西特别多,然而他的钱数有限,因此他想知道当他花一定钱数后剩余钱数无法再购买任何一件剩 ...
- django渲染高阶
08.16自我总结 django渲染高阶 一.利用母版渲染 1.创建母版文件 如:stamper.html <!DOCTYPE html> <html lang="en&q ...
- 流包装器实现WebShell免杀
说明: 本文首发自 https://www.secpulse.com/archives/73391.html ,转载请注明出处. 前言 本文是看PHP使用流包装器实现WebShell有感,权当做个笔记 ...
- Luogu P2297 刷图 DP
题目背景 loidc,LOI中的传说级哲♂学家,曾经创造一天内入坑maxlongint个弃坑0x7fffffff个的神奇纪录.目前,loidc最喜欢的游戏就是地下城与勇♂士. 题目描述 Loidc是一 ...
- (22)ASP.NET Core EF创建模型(索引、备用键、继承、支持字段)
1.索引 索引是跨多个数据存储区的常见概念.尽管它们在数据存储中的实现可能会有所不同,但也可用于基于列(或一组列)更高效地进行查找. 1.1约定 按照约定,将在用作外键的每个属性(或一组属性)中创建索 ...
- 共轭梯度法求解协同过滤中的 ALS
协同过滤是一类基于用户行为数据的推荐方法,主要是利用已有用户群体过去的行为或意见来预测当前用户的偏好,进而为其产生推荐.能用于协同过滤的算法很多,大致可分为:基于最近邻推荐和基于模型的推荐.其中基于最 ...
- 使用unittest,if __name__ == '__main__':里代码不执行的解决办法
参考:https://www.cnblogs.com/hanmk/p/8656574.html
- Sentinel Getting Started And Integration of Spring Cloud Alibaba Tutorials
原文链接:Sentinel Getting Started And Integration of Spring Cloud Alibaba Tutorials Sentinel Getting Sta ...
- 徐明星系列之徐明星创办的OK资本成为RnF金融有限公司的锚定投资者
12月17日,由区块链专家徐明星创办的OK集团的投资部门OK资本宣布,它将成为RnF金融有限公司的锚定投资者.OK集团成立于2012年,创始人徐明星是前豆丁网CTO,从豆丁网离职后,徐明星创办了OK集 ...
- 用深度优先搜索(DFS)解决多数图论问题
前言 本文大概是作者对图论大部分内容的分析和总结吧,\(\text{OI}\)和语文能力有限,且部分说明和推导可能有错误和不足,希望能指出. 创作本文是为了提供彼此学习交流的机会,也算是作者在忙碌的中 ...