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 相关文章推荐
jqGrid日期格式的判断示例代码(开始日期与结束日期)
Nov 08 Javascript
JS可以控制样式的名称写法一览
Jan 16 Javascript
AngularJS 应用身份认证的技巧总结
Nov 07 Javascript
基于jQuery实现表格的排序
Dec 02 Javascript
Angular排序实例详解
Jun 28 Javascript
基于Vue的移动端图片裁剪组件功能
Nov 28 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
Sep 10 Javascript
webpack file-loader和url-loader的区别
Jan 15 Javascript
vue如何截取字符串
May 06 Javascript
vue分页器组件编写方法详解
Jun 28 Javascript
JS数组方法reduce的用法实例分析
Mar 03 Javascript
详解Vue2的diff算法
Jan 06 Vue.js
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
香妃
2021/03/03 冲泡冲煮
PHP5 面向对象程序设计
2008/02/13 PHP
php设计模式 Singleton(单例模式)
2011/06/26 PHP
windows server 2008/2012安装php iis7 mysql环境搭建教程
2016/06/30 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
学习jquery之一
2007/04/27 Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
2011/04/06 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
2011/05/12 Javascript
IE6浏览器下resize事件被执行了多次解决方法
2012/12/11 Javascript
Javascript单元测试框架QUnitjs详细介绍
2014/05/08 Javascript
javascript实现切换td中的值
2014/12/05 Javascript
在JavaScript中操作时间之getMonth()方法的使用
2015/06/10 Javascript
jquery实现无刷新验证码的简单实例
2016/05/19 Javascript
JavaScript简单实现弹出拖拽窗口(一)
2016/06/17 Javascript
AngularJS中过滤器的使用与自定义实例代码
2016/09/17 Javascript
JavaScript 闭包详细介绍
2016/09/28 Javascript
安装Node.js并启动本地服务的操作教程
2018/05/12 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
2018/07/10 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
2019/02/18 Javascript
Python中的Numpy入门教程
2014/04/26 Python
Python中类的继承代码实例
2014/10/28 Python
开始着手第一个Django项目
2015/07/15 Python
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
Python 3.x读写csv文件中数字的方法示例
2017/08/29 Python
详解Python函数式编程—高阶函数
2019/03/29 Python
python 判断linux进程,并杀死进程的实现方法
2019/07/01 Python
Django 批量插入数据的实现方法
2020/01/12 Python
Centos7下源码安装Python3 及shell 脚本自动安装Python3的教程
2020/03/07 Python
什么是python的函数体
2020/06/19 Python
python字典的值可以修改吗
2020/06/29 Python
Abbacino官网:包、钱包和女士配饰
2019/04/15 全球购物
波兰电子产品购物网站:Vobis
2019/05/26 全球购物
母亲七十大寿答谢词
2014/01/18 职场文书
创卫工作总结2015
2015/04/22 职场文书
西部计划志愿者工作总结
2015/08/11 职场文书
Android Flutter实现图片滑动切换效果
2022/04/07 Java/Android