jQuery制作简洁的图片轮播效果_jquery-js教程-PHP中文网

jQuery制作简洁的图片轮播效果_jquery

php中文网

发布： 2016-05-16 16:05:45

原创

1057人浏览过

演示图：

核心代码：

phpscup轻量级cms系统1.1 beta GBK

PHPSCUP是一套追求简洁易用很务实的系统！PHPSCUP能满足大多数的初级企业网站用户。系统内置企业简介模块、新闻模块、产品模块、人才模块、在线留言模块、单篇文章模块、友情链接模块、单篇文章模块、图片轮播模块、下载模块。遵循SEO标准，通过模板或者定制为企业提供专业的营销型网站,该系统采用PHP+MySQL组合开发，具备安全、高效、稳定等基本特性。主要功能特色体现在：权限分配：权限分配功能非常

查看详情

$(document).ready(function(){
  var $iBox = $('.imgBox'),
    $iNum = $('.imgNum'), //缓存优化
    indexImg = 1,     //初始下标
    totalImg = 4,     //图片总数量
    imgSize = 300,     //图片尺寸 宽度
    moveTime = 1100,    //切换动画时间
    setTime = 2500,    //中间暂停时间
    clc = null;
 
  function moveImg(){
    if(indexImg != totalImg){
      $iBox.animate({
        left: -(indexImg*imgSize) + 'px'
      }, moveTime);
      $iNum.removeClass('mark-color')
        .eq(indexImg)
        .addClass('mark-color');
      indexImg++;
    }
    else{
      indexImg = 1;
      $iNum.removeClass('mark-color')
        .eq(indexImg - 1)
        .addClass('mark-color');
      $iBox.animate({
        left: 0
      }, moveTime);
    }
  }
  $iNum.hover(function(){
    $iBox.stop();          //结束当前动画
    clearInterval(clc);       //暂停循环
    $iNum.removeClass('mark-color');
    $(this).addClass('mark-color');
    indexImg = $(this).index();
    $iBox.animate({
      left: -(indexImg*imgSize) + 'px'
    }, 500);
  },function(){
    clc = setInterval(moveImg, setTime);
  });
 
  clc = setInterval(moveImg, setTime);
});

登录后复制

以上所述就是本文的全部内容了，希望大家能够喜欢。