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 相关文章推荐
js利用与或运算符优先级实现if else条件判断表达式
Apr 15 Javascript
jQuery中实现动画效果的基本操作介绍
Apr 16 Javascript
使用jQuery实现验证上传图片的格式与大小
Dec 03 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
Dec 08 Javascript
JavaScript中的闭包
Feb 24 Javascript
angular实现商品筛选功能
Feb 01 Javascript
ajax请求+vue.js渲染+页面加载的示例
Feb 11 Javascript
微信小程序block的使用教程
Apr 01 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
Aug 17 Javascript
详解angular2.x创建项目入门指令
Oct 11 Javascript
Vue实现计算器计算效果
Aug 17 Javascript
原生JS实现音乐播放器
Jan 26 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中替换换行符的几种方法小结
2012/10/15 PHP
深入php define()函数以及defined()函数的用法详解
2013/06/05 PHP
smarty中js的调用方法示例
2014/10/27 PHP
php.ini中date.timezone设置详解
2016/11/20 PHP
用PHP的反射实现委托模式的讲解
2019/03/22 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
php反射学习之依赖注入示例
2019/06/14 PHP
actionscript与javascript的区别
2011/05/25 Javascript
JS 各种网页尺寸判断实例方法
2013/04/18 Javascript
Dom 学习总结以及实例的使用介绍
2013/04/24 Javascript
JS获取农历日期具体实例
2013/11/14 Javascript
AngularJS指令用法详解
2016/11/02 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
2016/11/07 Javascript
JavaScript实现滑动导航栏效果
2017/08/30 Javascript
JavaScript中Object值合并方法详解
2017/12/22 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
JavaScript接口实现方法实例分析
2020/05/16 Javascript
在vue中使用回调函数,this调用无效的解决
2020/08/11 Javascript
vue单元格多列合并的实现
2020/11/26 Vue.js
[02:05]2014DOTA2西雅图邀请赛 老队长全明星大猜想谁不服就按进显示器
2014/07/08 DOTA
Python爬虫番外篇之Cookie和Session详解
2017/12/27 Python
详谈pandas中agg函数和apply函数的区别
2018/04/20 Python
keras 特征图可视化实例(中间层)
2020/01/24 Python
Python爬虫之Selenium下拉框处理的实现
2020/12/04 Python
美国玛丽莎收藏奢华时尚商店:Marissa Collections
2016/11/21 全球购物
.NET笔试题(20个问题)
2016/02/02 面试题
PHP使用Redis队列执行定时任务实例讲解
2021/03/24 PHP
有针对性的求职自荐信
2013/11/14 职场文书
小区停车场管理制度
2014/01/27 职场文书
晚会主持词开场白
2014/03/17 职场文书
小学班干部竞选演讲稿
2014/04/24 职场文书
公司担保书范文
2014/05/21 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
会议简报格式范文
2015/07/20 职场文书
全民创业工作总结
2015/08/13 职场文书
python中if和elif的区别介绍
2021/11/07 Python