jquery实现的4屏切换焦点图动态显示大图js特效代码

稿源：互联网 2018-09-03 20:13:27 点击： 9741 撤稿纠错

4屏切换焦点图动态显示大图特效代码

以下讨论的是和切换焦点图动态 4屏 jquery相关的jquery实现的4屏切换焦点图动态显示大图js特效代码教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>pic_jq</title>
    <style>
        *{ padding:0; margin:0; list-style:none; }
        .pic_js{ width:500px; margin:0 auto; overflow:hidden; border:1px solid #0066CC; position:relative; }
        .pic{ width:2000px; z-index:1; }
        .pic img{ display:block; width:500px; height:376px; cursor:pointer; }
        .pic li{ width:500px; height:376px; float:left; }
        .pic_nav{ position:absolute; bottom:3px; right:0px; z-index:100; }
        .pic_nav li{ float:left; cursor:pointer; width:40px; height:40px; line-height:40px; border:1px solid #069; margin-right:5px; text-align:center; background:#ff0; }
        .pic_nav li img{ width:100%; height:100%; }
        .pic_nav .current{ background:#03C; color:#FFF; border:1px solid #F90;}
    </style>
    <script type="text/javascript" src="http://www.alixixi.com/script/jquery-1.8.3.min.js"></script>
</head>

<body>
<div id="pic" class="pic_js">
    <ul id="big" class="pic">
        <li><img src="http://js.alixixi.com/UploadPic/2018-9/2018932011522072.jpg"/></li>
        <li><img src="http://js.alixixi.com/UploadPic/2018-9/20189320114758357.jpg"/></li>
        <li><img src="http://js.alixixi.com/UploadPic/2018-9/20189320115214394.jpg"/></li>
        <li><img src="http://js.alixixi.com/UploadPic/2018-9/20189320115753618.jpg"/></li>
    </ul>
    <ul id="icon" class="pic_nav">
        <li class="current"></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<script>
    var picNum = 0;
    var picWidth = 500;//图片的宽度
    var picSpeed = 1000;//图片切换速度
    var autoSpeed = 4000;//自动播放时间 3000毫秒（3秒）
    var big = $('#big');
    var li = $('#big li');
    var len = li.length;
    var icon = $('#icon li');
    var now = 0;
    var on = 'current';
    var timer = null;

    function play(){
        now ++;
        if(now >= len){
            now = 0;
        }
        act(now);
    }
    timer = setInterval(play, 2000);
    function act(n){
        big.animate({ marginLeft : - n * li.width() }, 'slow');
        icon.removeClass(on);
        icon.eq(n).addClass(on);
    }
    icon.click(function(){
        var idx = $(this).index();
        now = idx;
        act(now);
        clearInterval(timer);
    });

    icon.hover(function(){
        clearInterval(timer);
    }, function(){
        timer = setInterval(play, 2000);
    });

</script>

</body>
</html>

关于jquery实现的4屏切换焦点图动态显示大图js特效代码的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018090394128.shtml方便下次再访问哦。

·上一篇： 通用canvas代码实现的JS画圆圈动画特效代码
·下一篇： 通过CSS实现的圆角鼠标切换的折叠菜单特效代码

jquery实现的4屏切换焦点图动态显示大图js特效代码

文章分类LIST >>返回首页

最新游戏

最新新闻