常见问题当前位置:鸿宇娱乐 > 常见问题 > >

jQuery实现的图片分组切换焦点图插件

  

[jQuery,焦点图]jQuery实现的图片分组切换焦点图插件

  

这是一款基于jQuery的图片切换焦点图插件,这款jQuery焦点图插件的特点是图片可以分组切换,也就是说一次可以切换多张图片,相比其他焦点图插件,它能节省更多的空间,可以向用户展示更多的图片,非常实用。

  

  

  

  

实现的代码。

  

  

html代码:  

  

代码如下:

  
  
  
  

  
  上一组下一组

  
  
  
  
      
      
  •   
      HTML5资源教程
  •   
      
  •   
      HTML5资源教程
  •   
      
  •   
      HTML5资源教程
  •   
      
  •   
      HTML5资源教程
  •   
      
  •   
      HTML5资源教程
  •   
      
  •   
      HTML5资源教程
  •   
      
  •   
      HTML5资源教程
  •   
      
  •   
      HTML5资源教程
  •   
      
  •   
      HTML5资源教程
  •   
      
  •   
      HTML5资源教程
  •   
      
  •   
      HTML5资源教程
  •   
      
  •   
      HTML5资源教程
  •   
      
  •   
      HTML5资源教程
  •   
      
  •   
      HTML5资源教程
  •   
      
  •   
      HTML5资源教程
  •   
    鸿宇娱乐  
  •   
      HTML5资源教程
  •   
      
  •   
      HTML5资源教程
  •   
      
  •   
      HTML5资源教程
  •   
      
  •   
      HTML5资源教程
  •   
      
  •   
      HTML5资源教程
  •   
      
  
  
  
  
  
  
  

  

js代码:  

  

代码如下:

  
  $(function () {  
  var $number = Math.ceil($('.scroll ul li').length / 4); //获取滚动几屏个数  
  var margin = 10; //设置图片间距  
  var $w = $('.scroll li').width() + margin; // 一屏图片的宽度  
  var $width = $w * $number * 2; //设置ul宽度  
  var pre = $('.device .pre');  
  var next = $('.device .next');  
  if ($number == 1) { pre.hide(); next.hide(); }  
  $('.scroll ul').width($width);  
  var num = 0;  
  function autoscroll() {  
  num++;  
  if ($number == 1) { return false }  
  if (num == $number) {  
  num = 0;  
  }  
  var distance = -2 * $w * num;  
  $('.scroll ul').stop().animate({ left: distance });  
  }  
  var scrollChange = setInterval(autoscroll, 8000);  
  //鼠标悬停,暂停滚动  
  $(".scroll ul,.pre,.next").mouseover(function () {  
  $('.scroll ul').stop()  
  clearInterval(scrollChange);  
  });  
  // 鼠标移走,滚动继续  
  $('.scroll ul,.pre,.next').mouseout(function () {  
  scrollChange = setInterval(autoscroll, 8000);  
  });  
  //下一组  
  next.click(function () {  
  num++;  
  if (num >= $number) { num = 0 }  
  var leftdis = -2 * $w * num;  
  $('.scroll ul').stop().animate({ left: leftdis });  
  });  
  //上一组  
  pre.click(function () {  
  num--;  
  if (num < 0) { num = $number - 1 }  
  var rightdis = -2 * $w * num;  
  $('.scroll ul').stop().animate({ left: rightdis });  
  });  
  });  
  
  

(责任编辑:admin)

上一篇:微信小程序 开发之全局配置

下一篇:没有了

推荐内容

客户服务热线

010-400-12345

在线客服