JQuery 图片滚动或者div滚屏，适合多图轮播

多幅图片滚屏，效果如图：

纯手写代码，有空再做成闭包。

javascript部分：

var left=0,//移动的距离
move=1100,//滚屏的宽度
time=1000,//滚动的时间
count=0;//控制小圆点的标记
var inter;
$(function(){var mw=parseInt($('.mainlist').css('width'));$(".swaplist").html($(".mainlist").html());$(".swaplist").css({left:(3*move)+"px"});inter=setInterval(function(){startslider();},5000);$(".picbox").on("mouseenter",function(){setTimeout(function(){clearInterval(inter); },1000);});$(".picbox").on("mouseleave",function(){console.log("鼠标移出了");inter=setInterval(function(){startslider();},5000);});});
function startslider(){var ml=parseInt($('.mainlist').css('left'));var sl = parseInt($('.swaplist').css('left'));if(ml<=0&&ml>(0-3*move)){//正本滚动left=ml-move;$(".mainlist").animate({left:left+'px'},time);$(".swaplist").animate({left:(3*move+left)+"px"},time);}else {//副本滚动left=sl-move;$(".swaplist").animate({left:left+'px'},time);$(".mainlist").animate({left:(3*move+left)+"px"},time);}$(".circlebox li").each(function(){$(this).removeClass("licurrent");$(this).addClass("lidefault");});count++;$(".circlebox li").eq(count%3).removeClass("lidefault");$(".circlebox li").eq(count%3).addClass("licurrent");
}

CSS部分：

ul,li{ padding:0; margin:0;}
ul,li{ list-style:none;}
img{ border:none;}
a{ color:#6cf;}
a:hover{ color:#84B263;}
.box{ width:1100px; margin:0 auto; position:relative; overflow:hidden; _height:100%;margin-top:15px;border: solid 1px #f2f2f2;padding: 4px;}
.picbox{ width:5000px; height:200px; overflow:hidden; position:relative;}
.piclist{ height:200px;position:absolute; left:0px; top:0px}
.picbox ul{float: left;}
.piclist li{ margin-right:10px; float:left;width: 265px;height: 200px;}
.piclist li img{width:100%;}
.swaplist{ position:absolute; top:0px}
.og_prev,.og_next{ width:30px; height:50px; background:url(../images/icon.png) no-repeat; background:url(../images/icon_ie6.png) no-repeat\9; position:absolute; top:33px; z-index:99; cursor:pointer;filter:alpha(opacity=70); opacity:0.7;}
.og_prev{ background-position:0 -60px; left:4px;}
.og_next{ background-position:0 0; right:4px;}
#foot_bm a,p,p a{font-size:12px;color:#666;}.circlebox{width:90px;margin: 0 auto;text-align: center;clear: both;height: 20px;margin-top: 10px;}
.circlebox ul,.circlebox ul li{margin: 0px;padding: 0px;}
.circlebox ul li{float: left;width: 20px;height: 15px;margin-left: 10px;}
.licurrent{background: url(images/circlegb.png) no-repeat -27px 0px;}
.lidefault{background: url(images/circlegb.png) no-repeat 0 0;}

HTML部分：

<div class="box"><div class="picbox"><ul class="piclist mainlist"><volist name="likelist" id="vo"><li  style="background-image:url(__ROOT__/data/upload/{$vo.smeta});background-repeat: no-repeat;background-position:center center;  width:265px;height:200px;background-size: cover;"><!--这样显示图片，不会变形，并且会填充满每个li的--></li></volist></ul><ul class="piclist swaplist"></ul></div><div class="circlebox"><ul><li class="licurrent"></li><li class="lidefault"></li><li class="lidefault"></li></ul></div></div>

如果滚动不是3屏，除了修改上边的3，还要在这里修改li的数量。

JQuery 图片滚动或者div滚屏，适合多图轮播相关推荐

jQuery 图片滚动效果
2019独角兽企业重金招聘Python工程师标准>>> 使用了网上的一个JS插件,配置起来相当灵活好用,效果如下: 下面整理下使用的过程: 1.在插件网站http://www.gma ...
[置顶] Web开发百宝箱——提升网站档次的时尚 jQuery 图片滚动插件
这篇文章向大家推荐8款时尚的 jQuery 图片滚动插件.jQuery 是最流行和使用最广泛的 JavaScript 框架,它可以让帮助你在你的项目中加入一些很炫的图片滚动效果.希望这些插件对你有所帮 ...
jQuery焦点图轮播特效插件bxslider，使用说明及免费下载四川智汇蓝图整理带bxslider免费下载地址
这里分享一个方便实用的JQ 焦点图插件,它的特点简单易用,灵活方便通用性强:支持包含内容不HTML,视频,图片等.出众的兼容能力,完美兼容Firefox,Chrome,Safari,iOS,Andro ...
html自动滚屏效果,jQuery实现公告新闻自动滚屏效果实例代码
本文是小编参考网络上的一个小demo,自己做了下扩展,原来是向上滚动的,扩展了一个向下滚动的方法,具体实例代码如下所示: 滚屏实验 ul,li{margin:0;padding:0} #scrollD ...
置顶带滚动效果_前端面试：如何实现轮播图效果？
本文将实现如上所示的轮播图.源代码 (https://github.com/z1ming/AKJS/tree/master/%E8%BD%AE%E6%92%AD%E5%9B%BE%E6%95%88%E ...
html多图轮播淡入淡出js,原生JS实现图片轮播与淡入效果的简单实例
最近对css的兴趣提不起来,因为以前对图片轮播一直耿耿于怀苦于学艺不精,所以,花了点时间熟悉了一下js.然后一条道走到黑,用jquery和js写了一下轮播和图片淡入的效果.以后学习的路很长,希望自己在 ...
html5图片无限循环播放,原生js实现无限循环轮播图效果
知识要点 1.实现无限循环的原理: 以偏移的距离来判断是否跳回第一张和最后一张也可以利用循环判断图片的当前索引值 var newLeft=parseInt(list.style.left)+offs ...
java 图片手动切换_JavaScript学习案例之手动切换轮播图片
javascript学习案例之手动切换轮播图片效果图: 思路: 1.先做界面 1.1制作按钮及点击触发事件 1.2引入一张图片 2.书写css 2.1跳转p盒子的布局(宽.高.边框线.水平居中.文字 ...
layui的轮播图片自适应大小_如何使用LayUI实现网页轮播图
详细内容本篇文章介绍了使用LayUI实现网页轮播图的方法,具有一定的参考价值,希望对学习Layui的朋友有帮助!想要用layui写出来轮播图,需要先下载layui的文档,下载到电脑上就可以了,随便保 ...

JQuery 图片滚动或者div滚屏，适合多图轮播

JQuery 图片滚动或者div滚屏，适合多图轮播相关推荐

最新文章

热门文章