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 相关文章推荐
javascript中巧用“闭包”实现程序的暂停执行功能
Apr 04 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
Jul 08 Javascript
完善的jquery处理机制
Feb 21 Javascript
基于javascript实现九宫格大转盘效果
May 28 Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 Javascript
微信小程序 progress组件详解及实例代码
Oct 25 Javascript
vue中的非父子间的通讯问题简单的实例代码
Jul 19 Javascript
AngularJS 打开新的标签页实现代码
Sep 07 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
vue与bootstrap实现简单用户信息添加删除功能
Feb 15 Javascript
JavaScript实现矩形块大小任意缩放
Aug 25 Javascript
vant 中van-list的用法说明
Nov 11 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设计模式 Factory(工厂模式)
2011/06/26 PHP
跟我学Laravel之请求(Request)的生命周期
2014/10/15 PHP
javascript对象的property和prototype是这样一种关系
2007/03/24 Javascript
基于jquery的仿百度的鼠标移入图片抖动效果
2010/09/17 Javascript
JQueryEasyUI datagrid框架的进阶使用
2013/04/08 Javascript
jquery实现输入框动态增减的实例代码
2013/07/14 Javascript
html的DOM中Event对象onblur事件用法实例
2015/01/21 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
2016/01/05 Javascript
js判断登陆用户名及密码是否为空的简单实例
2016/05/16 Javascript
Vue响应式原理详解
2017/04/18 Javascript
关于vue.extend和vue.component的区别浅析
2017/08/16 Javascript
解决循环中setTimeout执行顺序的问题
2018/06/20 Javascript
Vue.extend实现挂载到实例上的方法
2019/05/01 Javascript
详解Vue之事件处理
2020/07/10 Javascript
Vue-resource安装过程及使用方法解析
2020/07/21 Javascript
[05:48]DOTA2英雄梦之声vol21 屠夫
2014/06/20 DOTA
python实现的二叉树算法和kmp算法实例
2014/04/25 Python
Python中的map、reduce和filter浅析
2014/04/26 Python
Django+Ajax+jQuery实现网页动态更新的实例
2018/05/28 Python
python实现UDP协议下的文件传输
2020/03/20 Python
python中shell执行知识点
2020/05/06 Python
Python 使用双重循环打印图形菱形操作
2020/08/09 Python
python Scrapy爬虫框架的使用
2021/01/21 Python
基于PyTorch中view的用法说明
2021/03/03 Python
HTML5不支持frameset的两种解决方法
2016/11/14 HTML / CSS
中国汽车租赁行业头部企业:一嗨租车
2019/05/16 全球购物
教师队伍管理制度
2014/01/14 职场文书
税务会计岗位职责
2014/02/18 职场文书
就业推荐表自我鉴定
2014/03/21 职场文书
给校长的建议书300字
2014/05/16 职场文书
2014年公路养护工作总结
2014/12/04 职场文书
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL
Redis调用Lua脚本及使用场景快速掌握
2022/03/16 Redis
Golang 字符串的常见操作
2022/04/19 Golang
MySQL数据库 安全管理
2022/05/06 MySQL
详解flex:1什么意思
2022/07/23 HTML / CSS