当前位置：Gxlcms > JavaScript > JS与JQ实现焦点图轮播效果

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

时间：2021-07-01 10:21:17 帮助过：7人阅读

这篇文章主要介绍了关于JS与JQ实现焦点图轮播效果，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

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>
<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 style="margin-top:50px;">
    <div>
        <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></div>
    <div></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>

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

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

javascript原生封装淡入淡出效果的函数测试

利用jQuery实现WordPress中@的ID悬浮显示评论内容

jQuery实现可拖拽的许愿墙效果

以上就是JS与JQ实现焦点图轮播效果的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！