基于jquery实现点击左右按钮图片横向滚动

点击左右按钮图片横向滚动jquery，一次滚动四个，图片滚动完成，自动回到第一个版面：
效果图如下：



代码如下:

<!DOCTYPE html>
<html lange="en">
<head>
<title>点击左右按钮图片横向滚动</title>
<meta charset=utf-8" />
<style type="text/css">
* { margin:0; padding:0;}
body { font-size:12px;}
.box {height:66px; float:left; width:440px; overflow: hidden; position:relative; }
.box li { display:block; float:left; margin-left:5px; margin-right:5px; width:100px; height:70px;background:#BBB;font-size:50px;color:#ccc;line-height:66px;text-decoration:none;text-align:center; cursor:pointer;}
.box li:hover { color:#999; }
.box li.active { background-position:-174px 0; color:#555;cursor:default;}
a.prev, a.next {background:url(http://www.shengyijie.net/images/left_02.png) no-repeat 0 0; display:block;width:23px;height:43px; float:left; margin:15px 0 0 0; cursor:pointer;}
a.next { background-image:url(http://www.shengyijie.net/images/right_02.png)}
.scroll_list{ width:10000em; position:absolute; }
</style>
<!-- 引入jQuery -->
<script src="http://jt.875.cn/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var page= 1;
var i = 4;//每版四个图片
//向右滚动
$(".next").click(function(){ //点击事件
var v_wrap = $(this).parents(".scroll"); // 根据当前点击的元素获取到父元素
var v_show = v_wrap.find(".scroll_list"); //找到视频展示的区域
var v_cont = v_wrap.find(".box"); //找到视频展示区域的外围区域
var v_width = v_cont.width();
var len = v_show.find("li").length; //我的视频图片个数
var page_count = Math.ceil(len/i); //只要不是整数，就往大的方向取最小的整数
if(!v_show.is(":animated")){
if(page == page_count){
v_show.animate({left:'0px'},"slow");
page =1;
}else{
v_show.animate({left:'-='+v_width},"slow");
page++;
}
}
});
//向左滚动
$(".prev").click(function(){ //点击事件
var v_wrap = $(this).parents(".scroll"); // 根据当前点击的元素获取到父元素
var v_show = v_wrap.find(".scroll_list"); //找到视频展示的区域
var v_cont = v_wrap.find(".box"); //找到视频展示区域的外围区域
var v_width = v_cont.width();
var len = v_show.find("li").length; //我的视频图片个数
var page_count = Math.ceil(len/i); //只要不是整数，就往大的方向取最小的整数
if(!v_show.is(":animated")){
if(page == 1){
v_show.animate({left:'-='+ v_width*(page_count-1)},"slow");
page =page_count;
}else{
v_show.animate({left:'+='+ v_width},"slow");
page--;
}
}
});
});
</script>
</head>
<body>
<!-- 例子 -->
<div class="scroll" style="margin:0 auto;width:550px;">
<!-- "prev page" link -->
<a class="prev" href="#"></a>
<div class="box">
<div class="scroll_list">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
</ul>
</div>
</div>
<!-- "next page" link -->
<a class="next" href="#"></a>
</div>
</body>
</html>

赞 (0)

相关推荐

  • 利用jQuery简单实现产品展示图片左右滚动功能(示例代码)

    利用jQuery简单实现产品展示图片左右滚动功能(示例代码)

    最近要做一个产品展示功能,由于产品比较多,一屏展示不完,所以想要做一个通过点击进行翻页的效果,在网上找了几个都不大好用,最后只能自己动手写了. 效果如下所示: 原理比较简单:将要滚动显示的区域的CSS的override设为hidden,宽度设成一个比较大的值,如4000px,然后每次点击上一页或下一页的按钮时,计算当前页数,如果已经到了最后一页,则回到第一页,滚动是通过控制div的left属性实现的,需要两个div,外面的div的position设为retative,里面的DIV的positio

  • jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码

    jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码

    以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果.1.单行滚动效果 无标题文档 ul,li{margin:0;padding:0} #scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} #scrollDiv li{height:25px;padding-left:10px;} function AutoScroll(obj){ $(obj).find

  • jquery $.fn $.fx是什么意思有什么用

    $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效. 如扩展$.fn.abc() 那么你可以这样子:$("#div").abc(); 通常使用extend方法扩展,详细请看API. $.fx是指jquery的特效. 如果使用显示.滑动.淡入淡出.动画等. $.fx.off可以关闭动画,其实是直接显示结果. jquery的extend和fn.extend jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(object

  • jquery中$.fn和图片滚动效果实现的必备知识总结

    jquery中$.fn和图片滚动效果实现的必备知识总结

    前言 图片滚动效果相信对大家来说都不陌生,烂大街的效果图如下所示,js实现代码很短,不过如果想做的话,必须掌握jquery.IIFE.setInterval等基础以及$.fn用法: jquery中$.fn用法 $.fn是jquery的命名空间,如果对jquery源码有过学习,就不难发现源码中有如下代码: jquery.fn=jquery.prototype={ init:function(selector,context){ /* *code */ } } 所以说jquery.fn也就是jque

  • jQuery插件开发的两种方法及$.fn.extend的详解

    jQuery插件开发分为两种: 1 类级别 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery.extend(object); 复制代码 代码如下: $.extend({ add:function(a,b){return a+b;} , minus:function(a,b){return a-b;} }); 页面中调用: 复制代码 代码如下: var i = $.add(3,2); var j

  • 基于jQuery图片平滑连续滚动插件

    * 此插件要求运行在jQuery v1.3 或更高版本上 * 插件可以实现图片平滑向上或向左滚动 * 如果您需要更多的效果或在使用中本插件存在BUG,可以给在彦磊的博客上留言,彦磊将尽自己最大努力完善此插件 * 您留言前请先到:http://gmarwaha.com/jquery/jcarousellite/ 上面下载jcarousellite插件 * 来和彦磊图片平滑滚动的插件相互补充使用以获取更多的图片效果 * 彦磊图片平滑滚动插件只是对jcarousellite插件的补充 * * * 技术

  • 浅谈jquery中的each方法$.each、this.each、$.fn.each

    jquery.each 方法 方法一 $("img").each(function(i,elem){ // i 下标 从零开始, // elem == this // $(elem).toggleClass("example"); $(this).toggleClass("example"); }); 方法二 $.each([1,2,3,4],function(){ //$(this)==数组中的每一个数组(如果数组是对象,就是对象) }); 方

  • js jquery做的图片连续滚动代码

    核心代码如下,大家可以参考 复制代码 代码如下: <script src="/js/jquery.js"></script>  <script>  $(document).ready(function(){ $(".bannerbutton li").each(                       function(){                              $(this).click(        

  • 基于jQuery的图片左右无缝滚动插件

    在线演示:http://demo.jb51.net/js/2012/myslideLeftRight/打包下载:http://www.jb51.net/jiaoben/44973.html核心代码: 复制代码 代码如下: (function($){ $.fn.extend({ "slidelf":function(value){ value = $.extend({ "prev":"", "next":""

  • jQuery中$.fn的用法示例介绍

    $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效. 如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个jquery实例都可以引用这个方法了. 那么你可以这样子:$("#div").abc(); jQuery为开发插件提拱了两个方法,分别是: jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法. jQuery.fn.extend(object);给jQue

随机推荐