jquery图片新闻多组图片轮播

jquery图片新闻多组图片轮播

jQuery点击缩略图切换大图,缩略图若是很多的话,支持分页,左右按钮滚动,点击大图左右按钮,到一定数量,缩略图会跟着滚动。

淘建站为您提供更多_图片代码_图片轮播_缩略图_滚动,在此特别感谢您对我们的支持与厚爱!

查看演示

演示不了,点击反馈

加入收藏

下载 474 次

打赏作者

觉得不错,可打赏下作者

下载资源

免费共享

特别说明:本站资源来自网友发布分享,仅供学习与参考,请勿用于商业用途,若有侵权请联系删除(272966172@qq.com)。

//mouseover效果
function liMouseOn() {
    $(".scrolltab .ulBigPic li").attr("class", "");
    for (var i = 0; i < $(".scrolltab .ulBigPic li").length; i++) {
        (function(j) {
            $(".scrolltab .ulBigPic li:eq(" + j + ")").mouseover(function() {
                if ($(".scrolltab").attr("class") == "dSmallList" || $(".scrolltab").attr("class") == "dMiddleList") {
                    if ($(this).attr("class") != "liSelected") {
                        $(this).attr("class", "liSelected");
                    }
                }
            });
            $(".scrolltab .ulBigPic li:eq(" + j + ")").mouseout(function() {
                if ($(".scrolltab").attr("class") == "dSmallList" || $(".scrolltab").attr("class") == "dMiddleList") {
                    if ($(this).attr("class") == "liSelected") {
                        $(this).attr("class", "");
                    }
                }
            });
        })(i);
    }
}

//定义当前、之前、之后要显示图片的排位
var curPic = 0, nextPic = -1, prePic = -1;
preShowPic = -1;
var allPic = $(".scrolltab .ulBigPic li").length;
//初始化当前、之前、之后要显示图片的排位

function numInit(num) {
    if (num == "init") {
        if (allPic > 1) {
            nextPic = curPic + 1;
            prePic = allPic - 1;
        } else if (allPic == 1) {
            nextPic = 0;
            prePic = 0;
        }
        $(".scrolltab .ulBigPic li:eq(" + curPic + ")").attr("class", "liSelected");
    } else if (num == "plus") {
        preShowPic = curPic;
        prePic = curPic;
        curPic = nextPic;
        if (curPic < (allPic - 1)) {
            nextPic = curPic + 1;
        } else if (curPic == (allPic - 1)) {
            nextPic = 0;
        }
        $(".scrolltab .ulBigPic li:eq(" + curPic + ")").attr("class", "liSelected");
        if (preShowPic != curPic) {
            $(".scrolltab .ulBigPic li:eq(" + preShowPic + ")").attr("class", "");
        }
    } else if (num == "minus") {
        preShowPic = curPic;
        nextPic = curPic;
        curPic = prePic;
        if (curPic > 0) {
            prePic = curPic - 1;
        } else if (curPic == 0 && allPic > 1) {
            prePic = allPic - 1;
        }
        $(".scrolltab .ulBigPic li:eq(" + curPic + ")").attr("class", "liSelected");
        if (preShowPic != curPic) {
            $(".scrolltab .ulBigPic li:eq(" + preShowPic + ")").attr("class", "");
        }
    } else {
        preShowPic = curPic;
        curPic = num;
        if (curPic == (allPic - 1)) {
            nextPic = 0;
            if (allPic > 1) {
                prePic = curPic - 1;
            } else if (allPic == 1) {
                prePic = 0;
            }
        } else if (curPic == 0) {
            prePic = allPic - 1;
            if (allPic > 1) {
                nextPic = 1;
            } else if (allPic == 1) {
                nextPic = 0;
            }
        } else {
            nextPic = curPic + 1;
            prePic = curPic - 1;
        }
        $(".scrolltab .ulBigPic li:eq(" + curPic + ")").attr("class", "liSelected");
        if (preShowPic != curPic) {
            $(".scrolltab .ulBigPic li:eq(" + preShowPic + ")").attr("class", "");
        }
    }
    //alert("curPic="+curPic+"/nextPic="+nextPic+"/prePic="+prePic+"/preShowPic="+preShowPic);
}

//大图左右按钮初始化
function btnAInit() {
    if (allPic < 2) {
        $("#sLeftBtnA").attr("class", "sLeftBtnABan");
        $("#sRightBtnA").attr("class", "sRightBtnABan");
    } else {
        if (curPic == 0) {
            $("#sLeftBtnA").attr("class", "sLeftBtnABan");
            $("#sRightBtnA").attr("class", "sRightBtnA");
        } else if (curPic == (allPic - 1)) {
            $("#sLeftBtnA").attr("class", "sLeftBtnA");
            $("#sRightBtnA").attr("class", "sRightBtnABan");
        } else {
            $("#sLeftBtnA").attr("class", "sLeftBtnA");
            $("#sRightBtnA").attr("class", "sRightBtnA");
        }
    }
}

//小图左右按钮初始化
function btnBInitA() {
    if (allPic > 6) {
        $("#sRightBtnB").attr("class", "sRightBtnB");
    }
}

声明:本资料由淘建站会员提供,如转载注明来源,资料来源淘建站免费素材库:https://www.taojz.cn/texiao/920.html
jquery图片新闻多组图片轮播 希望对你有帮助,感谢您的支持!
  • jquery图片自滚动瀑布流效果

    jquery图片自滚动瀑布流效果

  • jquery柔韧性的图片滑动瀑布流布局

    jquery柔韧性的图片滑动瀑布流布局

  • jquery仿堆糖网瀑布流布局单排图片自动滚动

    jquery仿堆糖网瀑布流布局单排图片自动滚动

  • jquery 瀑布流实例最流行瀑布流图片展示

    jquery 瀑布流实例最流行瀑布流图片展示

  • jquery masonry瀑布流插件制作图片瀑布流布局代码

    jquery masonry瀑布流插件制作图片瀑布流布局代码

  • js精彩图片瀑布流布局

    js精彩图片瀑布流布局

  • jquery Masonry 方砖石布局插件制作无限滚动页面

    jquery Masonry 方砖石布局插件制作无限滚动页面

  • html5 modernizr图片瀑布流布局点击弹出图片滑动预览

    html5 modernizr图片瀑布流布局点击弹出图片滑动预览

  • jquery网页向导插件可自动滚动页面步骤引导操作

    jquery网页向导插件可自动滚动页面步骤引导操作

  • jQuery仿淘宝商品播放视频页面滚动悬浮视频播放效果

    jQuery仿淘宝商品播放视频页面滚动悬浮视频播放效果

  • marquee.js演示三种不同的文字滚动效果

    marquee.js演示三种不同的文字滚动效果

  • jQuery平滑滚动到页面指定位置

    jQuery平滑滚动到页面指定位置

  • 留言(0)
    头像
     阿里云限量代金券,戳我领取
    1 2