当前位置：移动技术网 > IT编程>开发语言>JavaScript > JS、JQ实现焦点图轮播效果

JS、JQ实现焦点图轮播效果

2018年07月03日 | 移动技术网IT编程 | 我要评论

JS实现焦点图轮播效果

效果图：

代码如下，复制即可使用：

(不过里面的图片路径需要自己改成自己的图片路径，否则是没有图片显示的哦)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JS实现焦点图轮播效果</title>
    <style type="text/css">
        *{ margin: 0; padding: 0; text-decoration: none;}
        body { padding: 20px;}
        #container { width: 600px; height: 400px; border: 3px solid #333; overflow: hidden; position: relative;}
        #list { width: 4200px; height: 400px; position: absolute; z-index: 1;}
        #list img { float: left;}
        #buttons { position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 250px;}
        #buttons span { cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px;}
        #buttons .on {  background: orangered;}
        .arrow { cursor: pointer; display: none; line-height: 39px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 40px;  position: absolute; z-index: 2; top: 180px; background-color: RGBA(0,0,0,.3); color: #fff;}
        .arrow:hover { background-color: RGBA(0,0,0,.7);}
        #container:hover .arrow { display: block;}
        #prev { left: 20px;}
        #next { right: 20px;}
    </style>
    <script type="text/javascript">

        window.onload = function () {
            var container = document.getElementById('container');
            var list = document.getElementById('list');
            var buttons = document.getElementById('buttons').getElementsByTagName('span');
            var prev = document.getElementById('prev');
            var next = document.getElementById('next');
            var index = 1;
            var len = 5;
            var animated = false;
            var interval = 3000;
            var timer;


            function animate (offset) {
                if (offset == 0) {
                    return;
                }
                animated = true;
                var time = 300;
                var inteval = 10;
                var speed = offset/(time/inteval);
                var left = parseInt(list.style.left) + offset;

                var go = function (){
                    if ( (speed > 0 && parseInt(list.style.left) < left) || (speed < 0 && parseInt(list.style.left) > left)) {
                        list.style.left = parseInt(list.style.left) + speed + 'px';
                        setTimeout(go, inteval);
                    }
                    else {
                        list.style.left = left + 'px';
                        if(left>-200){
                            list.style.left = -600 * len + 'px';
                        }
                        if(left<(-600 * len)) {
                            list.style.left = '-600px';
                        }
                        animated = false;
                    }
                }
                go();
            }

            function showButton() {
                for (var i = 0; i < buttons.length ; i++) {
                    if( buttons[i].className == 'on'){
                        buttons[i].className = '';
                        break;
                    }
                }
                buttons[index - 1].className = 'on';
            }

            function play() {
                timer = setTimeout(function () {
                    next.onclick();
                    play();
                }, interval);
            }
            function stop() {
                clearTimeout(timer);
            }

            next.onclick = function () {
                if (animated) {
                    return;
                }
                if (index == 5) {
                    index = 1;
                }
                else {
                    index += 1;
                }
                animate(-600);
                showButton();
            }
            prev.onclick = function () {
                if (animated) {
                    return;
                }
                if (index == 1) {
                    index = 5;
                }
                else {
                    index -= 1;
                }
                animate(600);
                showButton();
            }

            for (var i = 0; i < buttons.length; i++) {
                buttons[i].onclick = function () {
                    if (animated) {
                        return;
                    }
                    if(this.className == 'on') {
                        return;
                    }
                    var myIndex = parseInt(this.getAttribute('index'));
                    var offset = -600 * (myIndex - index);

                    animate(offset);
                    index = myIndex;
                    showButton();
                }
            }

            container.onmouseover = stop;
            container.onmouseout = play;

            play();

        }
    </script>
</head>
<body>

<div id="container">
    <div id="list" style="left: -600px;">
　　　　 <!-- 放最后的一张图片 -图片需要改为自己的图片路径 -->
        <img src="img/5.jpg" alt="1"/>
        <img src="img/1.jpg" alt="1"/>
        <img src="img/2.jpg" alt="2"/>
        <img src="img/3.jpg" alt="3"/>
        <img src="img/4.jpg" alt="4"/>
        <img src="img/5.jpg" alt="5"/>
 　　　　<!-- 放第一张的图片 -->
　　 　　<img src="img/1.jpg" alt="5"/>
    </div>
    <div id="buttons">
        <span index="1" class="on"></span>
        <span index="2"></span>
        <span index="3"></span>
        <span index="4"></span>
        <span index="5"></span>
    </div>
    <a href="javascript:;" id="prev" class="arrow">&lt;</a>
    <a href="javascript:;" id="next" class="arrow">&gt;</a>
</div>

</body>
</html>

JQ实现焦点图轮播效果（一）

效果图：

图片素材：

代码如下，复制即可使用：

（不过里面的JQ路径和图片路径需要自己改成自己的JQ路径和图片路径，否则是没有效果显示的哦）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JQ实现焦点图轮播效果（一）</title>
    <style type="text/css">
        *{ margin: 0; padding: 0; text-decoration: none;}
        body { padding: 20px;}
        #container { width: 600px; height: 400px; border: 3px solid #333; overflow: hidden; position: relative;}
        #list { width: 4200px; height: 400px; position: absolute; z-index: 1;}
        #list img { float: left;}
        #buttons { position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 250px;}
        #buttons span { cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px;}
        #buttons .on {  background: orangered;}
        .arrow { cursor: pointer; display: none; line-height: 39px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 40px;  position: absolute; z-index: 2; top: 180px; background-color: RGBA(0,0,0,.3); color: #fff;}
        .arrow:hover { background-color: RGBA(0,0,0,.7);}
        #container:hover .arrow { display: block;}
        #prev { left: 20px;}
        #next { right: 20px;}
    </style>

　　 <!-- 此处需要改为自己的JQ路径 -->

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript">

        $(function () {
            var container = $('#container');
            var list = $('#list');
            var buttons = $('#buttons span');
            var prev = $('#prev');
            var next = $('#next');
            var index = 1;
            var len = 5;
            var interval = 3000;
            var timer;


            function animate (offset) {
                var left = parseInt(list.css('left')) + offset;
                if (offset>0) {
                    offset = '+=' + offset;
                }
                else {
                    offset = '-=' + Math.abs(offset);
                }
                list.animate({'left': offset}, 300, function () {
                    if(left > -200){
                        list.css('left', -600 * len);
                    }
                    if(left < (-600 * len)) {
                        list.css('left', -600);
                    }
                });
            }

            function showButton() {
                buttons.eq(index-1).addClass('on').siblings().removeClass('on');
            }

            function play() {
                timer = setTimeout(function () {
                    next.trigger('click');
                    play();
                }, interval);
            }
            function stop() {
                clearTimeout(timer);
            }

            next.bind('click', function () {
                if (list.is(':animated')) {
                    return;
                }
                if (index == 5) {
                    index = 1;
                }
                else {
                    index += 1;
                }
                animate(-600);
                showButton();
            });

            prev.bind('click', function () {
                if (list.is(':animated')) {
                    return;
                }
                if (index == 1) {
                    index = 5;
                }
                else {
                    index -= 1;
                }
                animate(600);
                showButton();
            });

            buttons.each(function () {
                 $(this).bind('click', function () {
                     if (list.is(':animated') || $(this).attr('class')=='on') {
                         return;
                     }
                     var myIndex = parseInt($(this).attr('index'));
                     var offset = -600 * (myIndex - index);

                     animate(offset);
                     index = myIndex;
                     showButton();
                 })
            });

            container.hover(stop, play);

            play();

        });
    </script>
</head>
<body>

<div id="container">
    <div id="list" style="left: -600px;">
        <!-- 放最后的一张图片 -此处需要改为自己的图片路径 -->
        <img src="img/5.jpg" alt="1"/>
        <img src="img/1.jpg" alt="1"/>
        <img src="img/2.jpg" alt="2"/>
        <img src="img/3.jpg" alt="3"/>
        <img src="img/4.jpg" alt="4"/>
        <img src="img/5.jpg" alt="5"/>
         <!-- 放第一张的图片 -->
        <img src="img/1.jpg" alt="5"/>
    </div>
    <div id="buttons">
        <span index="1" class="on"></span>
        <span index="2"></span>
        <span index="3"></span>
        <span index="4"></span>
        <span index="5"></span>
    </div>
    <a href="javascript:;" id="prev" class="arrow">&lt;</a>
    <a href="javascript:;" id="next" class="arrow">&gt;</a>
</div>

</body>
</html>

JQ实现焦点图轮播效果（二）

效果图：

图片素材：

、、、

左右按钮素材：，左右按钮 IE6版本素材：

代码如下，复制即可使用：

（不过里面的JQ路径和图片路径需要自己改成自己的JQ路径和图片路径，否则是没有效果显示的哦）

（适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQ实现焦点图轮播效果（二）</title>

　　<!-- 此处需要改为自己的JQ路径 -->

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <style>
        /* CSS Document */
        body,ul,li{ padding:0; margin:0;}
        ul,li{ list-style:none;}
        img{ border:none;}
        a{ color:#6cf;}
        a:hover{ color:#84B263;}
        .box{ width:980px; margin:0 auto; position:relative; overflow:hidden; _height:100%;}
        .picbox{ width:980px; height:115px; overflow:hidden; position:relative;}
        .piclist{ height:115px;position:absolute; left:0px; top:0px}
        .piclist li{ background:#eee; margin-right:20px; padding:5px; float:left;}
        .swaplist{ position:absolute; left:-3000px; top:0px}

　　　　　/*这里需要改成自己的图片路径*/

        .og_prev,.og_next{ width:30px; height:50px; background:url(../images/icon.png) no-repeat; background:url(../images/icon_ie6.png) no-repeat\9; position:absolute; top:33px; z-index:99; cursor:pointer;filter:alpha(opacity=70); opacity:0.7;}
        .og_prev{ background-position:0 -60px; left:4px;}
        .og_next{ background-position:0 0; right:4px;}

    </style>
</head>
<body>
<div class="box" style="margin-top:50px;">
    <div class="picbox">
        <ul class="piclist mainlist">

　　　　　　　　<!-- 此处需要改为自己的图片路径 -->

            <li><a href="#" target="_blank"><img src="images/1.jpg" width="220" height="105" /></a></li>
            <li><a href="#" target="_blank"><img src="images/2.jpg" /></a></li>
            <li><a href="#" target="_blank"><img src="images/3.jpg" /></a></li>
            <li><a href="#" target="_blank"><img src="images/4.jpg" /></a></li>
            <li><a href="#" target="_blank"><img src="images/1.jpg" /></a></li>
            <li><a href="#" target="_blank"><img src="images/2.jpg" /></a></li>
            <li><a href="#" target="_blank"><img src="images/3.jpg" /></a></li>
            <li><a href="#" target="_blank"><img src="images/4.jpg" /></a></li>
        </ul>
        <ul class="piclist swaplist"></ul>
    </div>
    <div class="og_prev"></div>
    <div class="og_next"></div>
</div>
<script>
// JavaScript Document
$(document).ready(function(e) {
    /***不需要自动滚动，去掉即可***/
    time = window.setInterval(function(){
        $('.og_next').click();    
    },5000);
    /***不需要自动滚动，去掉即可***/
    linum = $('.mainlist li').length;//图片数量
    w = linum * 250;//ul宽度
    $('.piclist').css('width', w + 'px');//ul宽度
    $('.swaplist').html($('.mainlist').html());//复制内容
    
    $('.og_next').click(function(){
        
        if($('.swaplist,.mainlist').is(':animated')){
            $('.swaplist,.mainlist').stop(true,true);
        }
        
        if($('.mainlist li').length>4){//多于4张图片
            ml = parseInt($('.mainlist').css('left'));//默认图片ul位置
            sl = parseInt($('.swaplist').css('left'));//交换图片ul位置
            if(ml<=0 && ml>w*-1){//默认图片显示时
                $('.swaplist').css({left: '1000px'});//交换图片放在显示区域右侧
                $('.mainlist').animate({left: ml - 1000 + 'px'},'slow');//默认图片滚动                
                if(ml==(w-1000)*-1){//默认图片最后一屏时
                    $('.swaplist').animate({left: '0px'},'slow');//交换图片滚动
                }
            }else{//交换图片显示时
                $('.mainlist').css({left: '1000px'})//默认图片放在显示区域右
                $('.swaplist').animate({left: sl - 1000 + 'px'},'slow');//交换图片滚动
                if(sl==(w-1000)*-1){//交换图片最后一屏时
                    $('.mainlist').animate({left: '0px'},'slow');//默认图片滚动
                }
            }
        }
    })
    $('.og_prev').click(function(){
        
        if($('.swaplist,.mainlist').is(':animated')){
            $('.swaplist,.mainlist').stop(true,true);
        }
        
        if($('.mainlist li').length>4){
            ml = parseInt($('.mainlist').css('left'));
            sl = parseInt($('.swaplist').css('left'));
            if(ml<=0 && ml>w*-1){
                $('.swaplist').css({left: w * -1 + 'px'});
                $('.mainlist').animate({left: ml + 1000 + 'px'},'slow');                
                if(ml==0){
                    $('.swaplist').animate({left: (w - 1000) * -1 + 'px'},'slow');
                }
            }else{
                $('.mainlist').css({left: (w - 1000) * -1 + 'px'});
                $('.swaplist').animate({left: sl + 1000 + 'px'},'slow');
                if(sl==0){
                    $('.mainlist').animate({left: '0px'},'slow');
                }
            }
        }
    })    
});

$(document).ready(function(){
    $('.og_prev,.og_next').hover(function(){
            $(this).fadeTo('fast',1);
        },function(){
            $(this).fadeTo('fast',0.7);
    })

})


</script>
</body>
</html>

如有错误，欢迎联系我改正，非常感谢！！！

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

小白测试系列:badboy默认浏览器修改

badboy使用的浏览器为系统默认浏览器，如果需要更换浏览器，直接修改系统默认浏览器即可，这里推荐用最liuma... [阅读全文]
nginx网站安全漏洞修复

前言：公司项目交付之前甲方进行了安全漏洞的扫描。大部分漏洞都是因为nginx响应没有加上仿攻击的响应头。记录一下... [阅读全文]
信息收集--绕过CDN寻找真实IP

0x01 验证目标是否存在CDN1、使用世界各地ping服务，如果地址不唯一，多半是用了CDN下例是我常使用的在... [阅读全文]
TCP和UDP的优缺点及区别

TCP的优点：可靠，稳定 TCP的可靠体现在TCP在传递数据之前，会有三次握手来建立连接，而且在数据传递时，有... [阅读全文]
MFC的静态库.lib、动态库.dll（包含引入库.lib）以及Unicode库示例

以vs2012为标准。转自：http://technet.microsoft.com/zh-cn/library... [阅读全文]
CTF 刷题记录（一）白云新闻搜索（手动与自动化SQL注入）

题目给出的靶机如下：解题思路首先判断这是考察哪个知识点，只有一个输入框，题目中又说到入侵，首先考虑sql注入，下... [阅读全文]
Node.js 深度调试方法解析

在 node.js 项目开发过程中，随着项目的发展，调用关系越来越复杂，调试工具的重要性日益凸显。node(v6.3+)集成了方便好用 v8 inspect 调... [阅读全文]
javascript如何使用函数random来实现课堂随机点名方法详解

如何使用函数random来实现课堂随机点名1.最初的样子如下2.点击开始点名，上面一行的文字变成名字，名字在不停的变化，开始点名变成停止点名，如下3.点击停止点... [阅读全文]
从0到1学习JavaScript编写贪吃蛇游戏

本文实例为大家分享了javascript编写贪吃蛇游戏的具体代码，供大家参考，具体内容如下游戏截图1.画出游戏界面var c=document.geteleme... [阅读全文]
js编写简易的计算器

本文实例为大家分享了js编写简易计算器的具体代码，供大家参考，具体内容如下使用绑定时间触发加减乘除加：减：乘：除：源代码：<body> 第一个数... [阅读全文]

网友评论


验证码：

JS、JQ实现焦点图轮播效果

2018年07月03日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论