老母再也不用担忧本身用jq拼接DOM拼接的一团糟了,基于Swiper落成活动端页面图片轮播效果

写在前头

说来也很巧,
早上再做二个页面,再普通可是的分页列表,作者恐怕像今后同等,基于MVC遭受下,作者健康用PagedList.MVC
AJAX做无刷新分页,那时候难点就来了,列表数据中有个轮播图用到了slides.js插件,轮播图也采用了分页,数据第一页轮播图页码能健康使用,数据列表翻到第二页则轮播图的页码就无法符合规律使用,实际上PagedList.MVC自带的体制文件已经和slides.j自带的体裁文件冲突,作者还极其修改了slides.js的体制文件,然并无卵用,让郁闷飞一会。。。

运用Swiper开荒活动端页面,轻便实现图片的轮播。

基于JQuery达成图片轮播效果(主题图),jquery宗旨

和煦写了二个纯jq格局的横向轮播主题图,可点击小圆点只怕左右开关进行切换,属于定宽类型。改成自适应宽度的也简单,将css里面包车型地铁bannerCon宽度改为百分比,再在js里面将ul和li的上涨的幅度跟随父级容器的上涨的幅度变化就能够,必要用到$(window).resize。

匹配到IE6+以上浏览器,有轮播速度和切换间隔五个参数可以改。

功能图如下:

www.5929.com 1

Html代码如下:

<html>
<head>
 <meta charset="utf-8">
 <title>banner图</title>
 <link href="css/style.css" rel="stylesheet"/>
 <script src="js/jquery-1.9.1.min.js"></script>
 <script src="js/common.js"></script>
</head>
<body>
 <div class="wrap">
  <div class="banner">
   <div class="bannerCon">
    <ul class="imgList">
     <li><a href="#"><img src="images/banner01.jpg" alt="www.5929.com 2"/></a></li>
     <li><a href="#"><img src="images/banner02.jpg" alt="www.5929.com 3"/></a></li>
     <li><a href="#"><img src="images/banner03.jpg" alt="www.5929.com 4"/></a></li>
    </ul>
    <ul class="btnList clearfix">
     <li class="cur"></li>
     <li></li>
     <li></li>
    </ul>
    < 
    > 
   </div>
  </div>
 </div>
</body>
</html>

Css样式如下:

@charset "utf-8";
/* 简单reset */
body, p, ul, ol, li {
  margin: 0;
  padding: 0;
}
ul, ol {
  list-style: none;
}
img { border:none; }
a,button{ outline: none; }
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
} 
/* 具体样式 */
.banner {
  position: relative;
  height: 400px;
  overflow: hidden;
}
.banner .bannerCon {
  position: absolute;
  top: 0;
  left: 50%;
  width: 800px;
  height: 400px;
  margin-left: -400px;
  overflow: hidden;
}
.bannerCon .imgList {
  position: absolute;
  top: 0;
  left: 0;
  width: 99999px;
  height: 400px;
}
.bannerCon .imgList li {
  float: left;
  width: 800px;
  height: 400px;
}
.bannerCon .imgList li a {
  position: relative;
  display: block;
  height: 100%;
}
.bannerCon .imgList li img {
  width: 800px;
  height: 400px;
}
.bannerCon .pre-nex {
  display: none;
  position: absolute;
  top: 50%;
  width: 40px;
  height: 60px;
  margin-top: -40px;
  font: bold 40px/60px Simsun;
  color: #ccc;
  text-align: center;
  border:none;
  background: rgba(0,0,0,.30);
  filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#4c000000, endColorStr=#4c000000);
  cursor: pointer;
  z-index: 3;
}
.bannerCon .pre-nex.show { display: inline-block; }
.bannerCon .prev { left: 13%; }
.bannerCon .next { right: 13%; }
.bannerCon .btnList {
  position: absolute;
  left: 0;
  bottom: 20px;
  width: 100%;
  height: 12px;
  text-align:center;
  z-index: 2;
  _overflow: hidden;
}
.bannerCon .btnList li { display: inline; }
.bannerCon .btnList li span {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 5px;
  border-radius: 6px;
  background-color:#14829e;
  cursor: pointer;
}
.bannerCon .btnList li.cur span { background-color: #f30; }

Js代码如下:

//加载在文本读取之后的js语句 开始 =============================================================
  function Scroll(obj,speed,interval){  //父级容器,轮播速度,切换间隔
    $("."+obj).each(function(){
      var $box = $(this),
      $imgUl = $box.children(".imgList"),
      $imgLi = $imgUl.children("li"),
      $btnUl = $box.children(".btnList"),
      $btnLi = $btnUl.children("li"),
      $btnPreNex = $box.children(".pre-nex"),
      $btnPre = $box.children(".prev"),
      $btnNex = $box.children(".next"),
      n = $imgLi.length,
      width = $imgLi.width(),
      left = parseFloat($imgUl.css("left")),
      k = 0,
      Player;
      $imgUl.css("width",n*width);
      function scroll(){        //轮播事件
        $imgUl.stop().animate({left:-width},speed,function(){
          k += 1;
          $imgUl.css("left",0);
          $imgUl.children("li:first").appendTo($(this));
          $btnLi.removeClass('cur');
          if(k >= n){
            k = 0;
          }
          $btnUl.children("li").eq(k).addClass('cur');      
        });
      }
      $btnLi.click(function(){     //小圆点点击事件
        var index = $btnLi.index(this);  
        $(this).addClass('cur').siblings("li").removeClass('cur');
        if(index >= k){
          var dif = index-k;
          left = -dif*width;
          $imgUl.stop().animate({left:left},speed,function(){
            $imgUl.css("left",0);
            $imgUl.children("li:lt("+dif+")").appendTo($imgUl);  
          });
        }
        else{
          var j = n-(k-index);
          $imgUl.css("left",(index-k)*width);
          $imgUl.children("li:lt("+j+")").appendTo($imgUl);
          $imgUl.stop().animate({left:0},speed);  
        }
        k = index;
      });  
      $btnPreNex.click(function(){   //左右按钮点击事件
        var index = $btnLi.index(this);    
        if($(this).hasClass('next')){
          if(!$imgUl.is(":animated")){
            k += 1;
            $imgUl.animate({left:-width},speed,function(){
              $imgUl.css("left",0);
              $imgUl.children("li:first").appendTo($(this));
              if(k >= n){
                k = 0;
              }
              $btnUl.children("li").removeClass('cur').eq(k).addClass('cur');
            });
          }
        }
        else {
          if(!$imgUl.is(":animated")){
            k += -1;
            $imgUl.css("left",-width);
            $imgUl.children("li:last").prependTo($imgUl);
            $imgUl.stop().animate({left:0},speed);
            if(k < 0){
              k = n-1;
            }
            $btnUl.children("li").removeClass('cur').eq(k).addClass('cur');
          }
        }
      });    
      $box.hover(           //鼠标移入、移出事件
        function(){
          clearInterval(Player);
          $btnPreNex.addClass('show');
        },
        function(){
          Player = setInterval(function(){scroll()},interval);
          $btnPreNex.removeClass('show');
        }
        );
      Player = setInterval(function(){scroll()},interval);
    });
  }  
  $(function () {              //读取轮播事件
    Scroll("bannerCon",600,4000);
  });    

专一加载一下jq库,笔者用的是1.9.1的,其实1.7+的都没难点的。

上述正是本文的全体内容,希望能够帮助大家。

老母再也不用担忧本身用jq拼接DOM拼接的一团糟了,基于Swiper落成活动端页面图片轮播效果。1、基于MVC PagedList.MVC的分页写法

var currentPage = 1;        $(function () {            //工具栏绑定页码            currentPage = $('.pagination li.active').text();            currentPage = $('.pagination li.active').text();            $.on('click', '.pagination li:not(".active")', function  {                var txtnum = $.text();                if (parseInt > 0) {                    DoSearch;                } else if (txtnum == '»') {                    DoSearch(parseInt(currentPage) + 1);                } else if (txtnum == '«') {                    DoSearch(parseInt(currentPage) - 1);                } else if (txtnum == '««') {                    DoSearch;                } else if (txtnum == '»»') {                    var pagenum = $.find.attr.replace(/[^\d]+/gi, '');                    DoSearch;                }                return false;            });        });//列表复合查询条件 function DoSearch {         var item = {};         if  {            item.pageIndex = page;          }          PostData;        }//重点就是这个方法,用于AJAX分页效果,主要是利用页面携带的数据来循环替换function PostData {         $.post('/Home/Index?rdm=' + Math.random(), objdata, function  {               //1、替换页面内列表数据                $(".contentajax").html.find(".contentajax").html;               //2、替换页码                $(".ajaxpage").html.find(".ajaxpage").html;                currentPage = $('.pagination li.active', $.text();        }); }

  

swiper

你也许感兴趣的篇章:

  • 基于JQuery的贯彻图片轮播效果(核心图)
  • 老母再也不用担忧本身用jq拼接DOM拼接的一团糟了,基于Swiper落成活动端页面图片轮播效果。听说jquery的图纸轮播 tab切换组件
  • 12款杰出的漂亮的女子型—jquery图片轮播插件—前端开采必备
  • jQuery图片轮播的现实性实现
  • 采取jquery写的左右轮播图特效
  • JQuery 图片滚动轮播示例代码
  • jQuery插件slicebox完成3D动画图片轮播切换特效
  • jQuery插件slides完成无缝轮播图特效
  • 原生js和jquery达成图片轮播特效
  • www.5929.com ,原生js和jquery实现图片轮播淡入淡出效果

本身写了三个纯jq情势的横向轮播宗旨图,可点击小圆点也许左右开关进行切换,属于定宽…

2、郁闷时在园子里看看壹位恋人发的jq分页插件

www.5929.com 5

3、效果图

www.5929.com 6

www.5929.com 7

1.珍视蕴含模块:

4、 理论再华丽仍旧要用coding来实行并开掘js模版插件

本人根据那位爱人文章中写到的用法以及查看API写了个demo,发掘前后相继没有报错正是从未多少,他提到remote参数中蕴涵3个事件:beforeSend、success、complete,注释中写到在success中管理后台重临的多少,也正是个json串,json串中必得带有数据总的数量(total或count)。
小编在demo中看到那八个事件不起来成效,不理解那位伙计自身施行了未曾,于是小编翻看插件源码,发掘源码中唯有三个callback事件,在此随处理回来的数码,OK,化解了数据重回难点。

上边难题又来了,由于是分页,还算是比较健康的急需,那么此时小编就发现,日常的做法必将是一贯在callback中foreach,各个拼接字符串、单引号、双引号。
笔者拼着拼着和煦就拼不下去了,笔者随即看这么些插件的DEMO,该插件的pageIndex是从0起始,好些个插件都以从1早先,所以基于linq的分页一般都如此写:((pageIndex-1)*pageSize),那假诺是0的话就不要减了。
在API的花花世界二个定义吸引了自己的眼球:怎样表现重返的多寡,介绍一款jq模版插件,只需定义展现模版,一行js化解数据表现。其实js模版倒不是何等不熟悉,只是原先没去用过,觉的拼凑jq就很牛气了,没悟出那么些模版这么大的魔力。
何况一定水平上那个模版的思量就好像Angularjs的数码操作格局一样。

纠结了那半天小编又重新把DEMO写了一次,消除。
DEMO虽简单,然则带给笔者的拿走却异常的大,
笔者会重构大家的体系,并且拓展前台尝试这种措施。

swiper:指滑动、切换(整个滑动对象,不经常特指滑块释放后如故正向移动直到贴合边缘的经过(过渡))
container:指容器(swiper的容器里面富含滑动快(slide)的会师(wrapper)、分页器(pagination)、前进按键等)
wrapper:指包蕴(触控的靶子,可触摸区域,移动的块的集纳,过渡时会随slide切换产生位移)
slider:指滑块(切换的块中的多少个,可以满含文字、图片、html成分或其它叁个swiper
pagination:指分页器(提示slide的数目和当下移动的slide)
active:指活动的,激活的(可视的(visible)slide是运动的,当可视slide不唯有一个时,默许最左侧这几个活动的)
callback:指回调函数(在少数情状下接触)

5、关键地方管理代码

 1 @{ 2     ViewBag.Title = "Index"; 3     Layout = "~/Views/Shared/_Layout.cshtml"; 4 } 5 <style> 6     h2 7     { 8         margin-left:80px; 9     }10 </style>11 <link href="~/Content/bootstrap.css" rel="stylesheet" />12 <link href="~/Content/jquery.pagination.css" rel="stylesheet" />13 <h2>jq Pagination and js Template</h2>14 <div class="container">15     <table id="rsTable" class="table table-striped">16         <thead>17             <tr>18                 <th>ID</th>19                 <th>Name</th>20                 <th>Price</th>21             </tr>22         </thead>23         <tbody id="rsbody">24 25         </tbody>26 27     </table>28     <div id="pager" class="m-pagination"></div>29 </div>30 31 <script src="~/Scripts/jsrender.min.js"></script>32 <script src="~/Scripts/jquery.pagination-1.2.1.js"></script>33 <script type="text/javascript">34     $(function () {35 36         $("#pager").page({37             remote: {38                 url: '/Home/AjaxList', //请求地址39                 param: {},             //请求参数40                 callback: function  {41                     //回调函数,处理返回值42                     var modelList = data.modelList;43                     $("#rsbody").empty().html($("#trTmpl").render(modelList));44                 },45                 pageIndexName: 'pageIndex',46                 pageSizeName: 'pageSize',47                 totalName: 'total'48             },49             pageSize: 350         });51     });52 </script>53 <script type="text/x-jsrender" id="trTmpl">54     <tr>55        <td>{{:ID}}</td>56        <td>{{:Name}}</td>57        <td>{{:Price}}</td>58     </tr>59 </script>

 public ActionResult Index()        {            return View();        }        public JsonResult AjaxList()        {            int pageIndex = Convert.ToInt16(Request["pageIndex"]);            int pageSize = Convert.ToInt16(Request["pageSize"]);            IList<Product> list = new List<Product>()            {                new Product{ID=1,Name="iphone6 plus",Price=6999},                new Product{ID=2,Name="iphone6",Price=4999},                new Product{ID=3,Name="MX5",Price=1799},                new Product{ID=4,Name="MEILAN NOTE",Price=799},                new Product{ID=5,Name="XIAOMI 2S",Price=1299}            };            IList<Product> modelList = list.Skip(pageIndex * pageSize).Take.ToList();            int count = list.Count;            var strJson = new JsonResult();            strJson.Data = new            {                modelList=modelList,                total=count            };            strJson.JsonRequestBehavior = JsonRequestBehavior.AllowGet;            return strJson;        }

2.轻巧的轮播,如下所示:

总结

就算是做了个分页的demo,可是在选拔这么些分页插件的经过中,却开采了js模版插件这几个好东西,写法简洁况且页面jq也简要十分的多。
之前还写过一片基于MVC Angularjs分页。多多比较,依照本身索要选拔。

下载链接: 访问密码 4d30

<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="UTF-8"> 
 <title></title> 
 <link rel="stylesheet" href="swiper-3.2.7.min.css" rel="external nofollow" > 
 <script type="text/javascript" src="jquery-1.7.1.js"></script> 
 <script type="text/javascript" src="swiper-3.2.7.min.js"></script> 
</head> 
<body> 
<div class="swiper-container"style="width: 38%;"><!--swiper容器[可以随意更改该容器的样式--> 
 <div class="swiper-wrapper"> 
 <div class="swiper-slide"><img src="Walks-poster.png"></div> 
 <div class="swiper-slide"><img src="Walks-poster.png"></div> 
 <div class="swiper-slide"><img src="Walks-poster.png"></div> 
 </div> 
 <div class="swiper-pagination" style="width: 100px;float: right"></div><!--分页器-->、 
 <div class="swiper-button-prev"></div><!--前进按钮--> 
 <div class="swiper-button-next"></div><!--后退按钮--> 
</div> 

<script type="text/javascript"> 
 var mySwiper = new Swiper(".swiper-container",{ 
 direction:"horizontal",/*横向滑动*/ 
 loop:true,/*形成环路(即:可以从最后一张图跳转到第一张图*/ 
 pagination:".swiper-pagination",/*分页器*/ 
 prevButton:".swiper-button-prev",/*前进按钮*/ 
 nextButton:".swiper-button-next",/*后退按钮*/ 
 autoplay:3000/*每隔3秒自动播放*/ 
 }) 
</script> 
</body> 
</html> 

3.js中别的参数:

var mySwiper = new Swiper(".swiper-container",{ 
 effect:"coverflow",/*轮播的效果:(1)fade:淡入淡出;(2)cube:立方体;(3)coverflow:立体照片*/ 
 slidesPerView:3,/*网格分布:1为在容器区域出现一张图;2:在容器区域出现两张图;3:在容器区域出现三张图*/ 
 centeredSlides:true,/*默认第一块居左,设置为true后则是居中显示*/ 
 coverflow:{ 
  rotate:30,/*3d旋转角度设置为30度*/ 
  stretch:10,/*每个slide之间的拉伸值,值越大靠得越近*/ 
  depth:60,/*位置深度,值越大离Z轴越远,看起来越小*/ 
  modifier:2, 
  slideshadows:true/*开启阴影*/ 
 } 
 }) 

注意:在使用swiper前,要引入swiper.css和swiper.js以及jQuery
切切实实可参看网站:点击张开链接

以上正是本文的全体内容,希望对大家的上学抱有扶助,也可望我们多多支持脚本之家。

你也许感兴趣的篇章:

  • 微信小程序
    swiper组件轮播图详解及实例
  • jQuery自适应轮播图插件Swiper用法示例
  • 听别人说vue.js轮播组件vue-awesome-swiper完毕轮播图
  • 微信小程序
    轮播图swiper详解及实例(源码下载)
  • 老大卓绝的JS图片轮播插件Swiper的用法
  • Angularjs中应用轮播图指令swiper
  • Swiper完成轮播图效果
  • vue轮播图插件vue-awesome-swiper的应用代码实例
  • JS中Swiper的运用和轮播图效果
  • swiper移动端轮播插件(触碰图片之后甘休轮播)

Leave a Comment.