jQuery自动或手动图片切换效果

前端之家收集整理的这篇文章主要介绍了jQuery自动或手动图片切换效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

学习JS的时候本来积攒了很多有趣的小例子,但是苦于没有找到一些好的平台来展示这些JS效果。今天发现了RunJS这个分享代码的平台,迫不及待得想跟大家分享

在浏览各大商城网站的时候,或者某些网站的首页,都会展示与本网站相关的一些实时切换的图片, 本文就给大家分享一个用jQuery实现图片自动切换的例子。

主页核心代码(Default.aspx):

<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> jQuery实现<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>切换
jquer实现图片切换
  • CSS代码(tupianqiehuan.css):

    Box.runjs.cn/uploads/rs/475/xaqlrnnr/sprite.png) no-repeat 0 0;cursor:pointer;} #focus .pre{left:0;} #focus .next{right:0;background-position:right top;}

    JS代码(tupianqiehuan.js):

    获取焦点图的宽度(显示面积) var len = $("#focus ul li").length; //获取焦点图个数 var index = 0; var picTimer;

    //以下代码添加数字按钮和按钮后的半透明条,还有上一页下一页两个按钮
    var btn = "

    ";
    for(var i=0; i < len; i++) {
    btn += "";
    }
    btn += "
    ";
    $("#focus").append(btn);
    $("#focus .btnBg").css("opacity",0.5);

    //为小按钮添加鼠标滑入事件,以显示相应的内容
    $("#focus .btn span").css("opacity",0.4).mouSEOver(function() {
    index = $("#focus .btn span").index(this);
    showPics(index);
    }).eq(0).trigger("mouSEOver");

    //上一页下一页按钮透明度处理
    $("#focus .preNext").css("opacity",0.2).hover(function() {
    $(this).stop(true,false).animate({"opacity":"0.5"},300);
    },function() {
    $(this).stop(true,false).animate({"opacity":"0.2"},300);
    });

    //上一页按钮
    $("#focus .pre").click(function() {
    index -= 1;
    if(index == -1) {index = len - 1;}
    showPics(index);
    });

    //下一页按钮
    $("#focus .next").click(function() {
    index += 1;
    if(index == len) {index = 0;}
    showPics(index);
    });

    //本例为左右滚动,即所有li元素都是在同一排向左浮动,所以这里需要计算出外围ul元素的宽度
    $("#focus ul").css("width",sWidth * (len));

    //鼠标滑上焦点图时停止自动播放,滑出时开始自动播放
    $("#focus").hover(function() {
    clearInterval(picTimer);
    },function() {
    picTimer = setInterval(function() {
    showPics(index);
    index++;
    if(index == len) {index = 0;}
    },4000); //此4000代表自动播放的间隔,单位:毫秒
    }).trigger("mouseleave");

    //显示图片函数,根据接收的index值显示相应的内容
    function showPics(index) { //普通切换
    var nowLeft = -index*sWidth; //根据index值计算ul元素的left值
    $("#focus ul").stop(true,false).animate({"left":nowLeft},300); //通过animate()调整ul元素滚动到计算出的position
    $("#focus .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300);//为当前的按钮切换到选中的效果
    }
    });

    具体效果可以参看 nofollow" target="_blank" href="http://sandBox.runjs.cn/show/bvapfknb">效果演示

    这里先给大家一个开胃菜,后面会抽时间简单说一下如何在 RunJS上发布自己的小程序以及使用RunJS的一些小技巧。

    原文链接:https://www.f2er.com/jquery/35876.html

    猜你在找的jQuery相关文章