这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文主要介绍了 js 实现图片左右滚动效果的实例,具有很好的参考价值,下面跟着小编一起来看下吧
需求:页面显示教师信息列表,列表中每一条数据显示图片滚动插件,每张图片的长宽及长宽比例各不相同。
前提条件:美工把静态页面写好
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>
效果图:
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持 phperz!
(adsbygoogle = window.adsbygoogle || []).push({});
来源: http://www.phperz.com/article/17/0703/327244.html