js实现图片左右滚动效果


Posted in Javascript onFebruary 27, 2017

需求:页面显示教师信息列表,列表中每一条数据显示图片滚动插件,每张图片的长宽及长宽比例各不相同。

前提条件:美工把静态页面写好

HTML代码:

@using Models;
@{
 List<cms_content> teacherList = ViewData["teacherList"] as List<cms_content>; //春雨树频道
 PagerModel pager = ViewData["pager"] as PagerModel;
}
<div class="teacherteam_box">
 <h1>教师团队</h1>
 @foreach (cms_content teacher in teacherList)
 {
  <div class="teacher_box">
   <div class="teacher_img fl">
    <img src="~/Theme/images/t1.png" />
   </div>
   <div class="teacher_infor fl">
    <h2>@teacher.title</h2>
    <p>
     @teacher.description
    </p>
    <div class="products_box">
     <div class="products_pre">
      <img src="~/Theme/images/left.png" />
     </div>
     <div class="products_next">
      <img src="~/Theme/images/right.png" />
     </div>
     <div class="div-imgbox">
      <ul>
       @foreach (Tuple<string, string> item in teacher.imgList)
       {
        <li>
         <img alt="@item.Item1" src="@item.Item2" />
        </li>
       }
      </ul>
     </div>
    </div>
   </div>
   <div class="clear"></div>
  </div>
 }
 <div class="page_box">
  <span>共@(pager.totalRows)条信息</span>
  <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="teacherPage(this,1)">首页</a>
  <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="teacherPage(this,2)">上一页</a>
  <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><i>@pager.page</i><b>/@pager.pageCount</b>页</a>
  <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="teacherPage(this,3)">下一页</a>
  <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="teacherPage(this,4)">尾页</a>
 </div>
</div>

JS代码:

<script type="text/javascript">
 var _lock = false;
 $(function () {
  teacherPage(null, null);
 });//end $
 //教师团队
 //flag=1首页,2上一页,3下一页,4尾页
 function teacherPage(obj, flag) {
  var totalPage = 1;
  var page = 1;
  if (obj) {
   page = parseInt($(obj).parent().find("i").text());
   totalPage = parseInt($(obj).parent().find("b").text().replace("/", ""));
  }
  if (flag == 1) { page = 1; }
  if (flag == 2 && page > 1) { page = page - 1; }
  if (flag == 3 && page < totalPage) { page = page + 1; }
  if (flag == 4) { page = totalPage; }
  $.ajax({
   type: "GET",
   url: "@Url.Content("~/")home/teachers?t=" + new Date().valueOf(),
   data: { page: page },
   success: function (data) {
    $('#teachers').html(data);
    sliderImg();
   }
  });
 }
 //滚动图片
 function sliderImg() {
  $(".products_next").click(function () {
   if (_lock) return;
   _lock = true;
   var ul = $(this).parent().find("ul");
   if (!canSlider(ul)) { _lock = false; return; }
   var liFirst = ul.find("li:first");
   var margin = liFirst.width() + 15;
   var speed = margin * 3;
   liFirst.animate({
    marginLeft: 0 - margin
   }, speed);
   setTimeout(function () {
    liFirst.remove();
    ul.append("<li>" + liFirst.html() + "</li>");
    _lock = false;
   }, speed);
  });
  $(".products_pre").click(function () {
   if (_lock) return;
   _lock = true;
   var ul = $(this).parent().find("ul");
   if (!canSlider(ul)) { _lock = false; return; }
   var liLast = ul.find("li:last");
   var margin = liLast.width() + 15;
   var speed = margin * 3;
   ul.prepend("<li style='margin-left:-" + margin + "px; '>" + liLast.html() + "</li>");
   var liFirst = ul.find("li:first");
   liFirst.animate({
    marginLeft: 0
   }, speed);
   setTimeout(function () {
    liLast.remove();
    _lock = false;
   }, speed);
  });
 }
 //判断图片是否可以滚动
 function canSlider(ul) {
  var width = 0;
  ul.find("li").each(function () {
   var li = $(this);
   width = width + li.width() + 15;
  });
  if (width <= 710) {
   return false;
  }
  return true;
 }
</script>

效果图:

js实现图片左右滚动效果

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Mootools 1.2教程 设置和获取样式表属性
Sep 15 Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
Jun 30 Javascript
理解JavaScript中的对象 推荐
Jan 09 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
Dec 18 Javascript
JavaScript:Date类型全面解析
May 19 Javascript
springMVC结合AjaxForm上传文件
Jul 12 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
Oct 10 Javascript
使用 bootstrap modal遇到的问题小结
Nov 09 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
Sep 05 Javascript
vue代码分割的实现(codesplit)
Nov 13 Javascript
nvm、nrm、npm 安装和使用详解(小结)
Jan 17 Javascript
JS 基本概念详细介绍
Oct 16 Javascript
jquery横向纵向鼠标滚轮全屏切换
Feb 27 #Javascript
原生js实现旋转木马轮播图效果
Feb 27 #Javascript
jQuery实现弹窗居中效果类似alert()
Feb 27 #Javascript
js实现简单的手风琴效果
Feb 27 #Javascript
jquery实现弹窗功能(窗口居中显示)
Feb 27 #Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
Feb 27 #Javascript
jQuery实现简单弹窗遮罩效果
Feb 27 #Javascript
You might like
创建数据库php代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
php读取mysql中文数据出现乱码的解决方法
2013/08/16 PHP
php获取指定日期之间的各个周和月的起止时间
2014/11/24 PHP
PHP获取毫秒级时间戳的方法
2015/04/15 PHP
php将数组存储为文本文件方法汇总
2015/10/28 PHP
PHP使用preg_split()分割特殊字符(元字符等)的方法分析
2017/02/04 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
JS延迟加载加快页面打开速度示例代码
2013/12/30 Javascript
将数字转换成大写的人民币表达式的js函数
2014/09/21 Javascript
Windows系统中安装nodejs图文教程
2015/02/28 NodeJs
JavaScript和JQuery的鼠标mouse事件冒泡处理
2015/06/19 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
FullCalendar日历插件应用之数据展现(一)
2015/12/23 Javascript
jquery制做精致的倒计时特效
2016/06/13 Javascript
浅谈VUE监听窗口变化事件的问题
2018/02/24 Javascript
ng-events类似ionic中Events的angular全局事件
2018/09/05 Javascript
如何制作一个Node命令行图像识别工具
2018/12/12 Javascript
浅谈python中截取字符函数strip,lstrip,rstrip
2015/07/17 Python
Python reduce()函数的用法小结
2017/11/15 Python
Python模拟脉冲星伪信号频率实例代码
2018/01/03 Python
python使用TensorFlow进行图像处理的方法
2018/02/28 Python
python使用xlsxwriter实现有向无环图到Excel的转换
2018/12/12 Python
pandas 选取行和列数据的方法详解
2019/08/08 Python
浅谈优化Django ORM中的性能问题
2020/07/09 Python
HomeAway澳大利亚:预订你的度假屋,公寓、度假村、别墅等
2019/02/20 全球购物
Java里面Pass by value和Pass by Reference是什么意思
2016/05/02 面试题
毕业生个人的求职信范文
2013/12/03 职场文书
幼儿园教师自我鉴定
2014/03/20 职场文书
法院反腐倡廉心得体会
2014/09/09 职场文书
农村党支部书记司法四风问题对照检查材料
2014/09/26 职场文书
干部年终考核评语
2015/01/04 职场文书
品质保证书格式
2015/02/28 职场文书
2015年度个人工作总结报告
2015/10/24 职场文书
导游词之铁岭象牙山
2019/12/06 职场文书
详解PHP服务器如何在有限的资源里最大提升并发能力
2021/05/25 PHP
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技