首页 / JAVASCRIPT / JS与JQ实现焦点图轮播效果

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JS与JQ实现焦点图轮播效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含11962字，纯文字阅读大概需要18分钟。

内容图文

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

JS实现焦点图轮播效果

效果图：

JS与JQ实现焦点图轮播效果 - 文章图片

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

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

 <!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实现焦点图轮播效果（一）

效果图：

JS与JQ实现焦点图轮播效果 - 文章图片

图片素材：

JS与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实现焦点图轮播效果（二）

效果图：

JS与JQ实现焦点图轮播效果 - 文章图片

图片素材：

JS与JQ实现焦点图轮播效果 - 文章图片、、、

左右按钮素材： JS与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中文网！

内容总结

以上是互联网集市为您收集整理的JS与JQ实现焦点图轮播效果全部内容，希望文章能够帮你解决JS与JQ实现焦点图轮播效果所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/285879.html

来源：【匿名】

【上一篇】利用javascript判断浏览器类型【下一篇】javascript 怎么调用php方法

更多 ►

【JS与JQ实现焦点图轮播效果】教程文章相关的互联网学习教程文章

原生JavaScript 全特效微博发布面板效果实现【代码】【图】

javaScript实现微博发布面板效果.采用的js知识有：正则表达式区分中英文字节、随机数生成等函数淡入淡出、缓冲运动。闪动等动画函数onfocus、onblur、oninput、onpropertychange等事件动态添加元素，获取设置动态属性基本思路：当内容为空时，发布按钮为灰色，点击时候文本框会闪动，输入文字会提示还可以输入多少文字，超出会提示，且不能发布，要注意的是，判断文本框内容的长度，不能直接来，因为英文属于一个字节，中文占两个，...

JavaScript 30天每日效果图

JavaScript 30天每日效果图在Github上看到了wesbos的一个Javascript30天挑战的repo，旨在使用纯JS来进行练习，不允许使用任何其他的库和框架，该挑战共30天，我会在这里复现这30天遇到的挑战与问题，将其教程化、视频化分享给大家。day01-day03第01天第02天第03天650) this.width=650;" src="http://oslwafb71.bkt.clouddn.com/small0.jpg" />650) this.width=650;" src="http://oslwafb71.bkt.clouddn.com/small1.jpg" />650) t...

JavaScript实战（带收放动画效果的导航菜单）【代码】【图】

虽然有很多插件可用，但为了共同提高，我做了一系列JavaScript实战系列的实例，分享给大家，前辈们若有好的建议，请务必指出，免得误人子弟啊！（原创文章，转摘请注明：苏服：http://www.cnblogs.com/susufufu/p/5768402.html ）今天是第一战：带收放动画效果的菜单，效果如下图：（样式有点丑(-^-)）动画效果：鼠标hover改变所有目标的背景和字体颜色，鼠标移动到‘首页导航’，显示下面的分组菜单，分组菜单有子菜单，点击可缩...

原生JavaScript实现对象的混合与克隆效果，带完整版解析代码[helpers.js]【代码】

前言：????????本人纯小白一个，有很多地方理解的没有各位大牛那么透彻，如有错误，请各位大牛指出斧正！小生感激不尽。????????本篇文章为您分析一下原生JS的混合与克隆对象混合页面中如下需求var obj1 = {x: 1,y: "a" }var obj2 = {x: "b",o: 6 }<div style="background-color: rgba(0,255,255,0.5)";>页面上有两个对象我们要把这两个对象混合成一个形成如下结构：

JavaScript实现移动端轮播图效果【代码】

功能描述：自动无缝轮播图片，底部小圆点跟图片保持一致；手指左右移动轮播图，移动距离大于50px播放下一张（或上一张），小于50px则回弹具体功能实现：1.定时器自动轮播图片先声明一个index=0用来存图片索引；添加一个定时器，每隔两秒调用一次，每调用一次定时器（图片播放一次）index就加一；通过transform（变形）属性和transition（过渡）属性实现图片的轮播。1var index = 0; 2var timer = setInterval(function() { 3 ...

原生js拖拽效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title><style> *{ margin:0; padding:0; } #box{ width:100px; height:100px; background: red; position: absolute; left:0; top:0; cursor: move; }</style><body> <div id="box"></div></body></html><script> var oBox=document.getElementById(‘box‘); oBox.onmousedown=function(e){ ...

js实现图片轮播效果【代码】

感觉这一周学的东西中，本菜鸡觉得轮播效果是最炫酷的哈哈哈。要好好的纪念下这个东西，以后忘了再来这边看看！超赞，当自己做出这个效果的时候，很有成就感的(ノω<。)ノ))☆.。<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> #div1{ width: 192px; height: 120px; border: 1px solid gray; margin: 0 auto; ov...

JavaScript连载33-点击查看大图效果以及闭包初步【代码】【图】

一、点击图片显示大图代码<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>D33_1_SwitchIcon</title><style>#box{border:1px solid #cccccc;width:360px;height:70px;padding-top:360px;margin:100px auto;background:url("img/img_05.png") no-repeat;}ul{display:flex;justify-content:center;align-items: center;cursor:pointer;list-style: none;}img{width: 250px;}</style> </head> <body><div id="b...

Js 拖动效果【代码】

<!DOCTYPE html><html><head><meta charset="utf8"><title>js拖拽效果</title><style type="text/css">#div1 {width : 200px;height: 200px;position: absolute;background: #99dd33;cursor: move;}</style></head><body><div id="div1"></div></body><script type="text/javascript">window.onload =function() {var disX = disY =0; // 鼠标距离div的左距离和上距离var div1 = document.getElementById(...

JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)

转自《JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)》：http://www.jb51.net/article/73157.htm 这篇文章主要介绍了JS实现漂亮的窗口拖拽效果,具有可改变大小、最大化、最小化、关闭等功能,以完整实例形式较为详细的分析了JavaScript操作窗口的大小改变、还原及关闭等功能的相关实现技巧,需要的朋友可以参考下本文实例讲述了JS实现漂亮的窗口拖拽效果。分享给大家供大家参考。具体如下：这是一款漂亮的JS窗口拖拽...

【温故而知新】Javascript时间效果（显示当前时间、显示当前日期、显示页面停留时间、倒计时）【代码】

1.显示当前时间<body onload="showtime()"><div>当前时间： <span id="clock"></span ></div><script type="application/javascript">function showtime()//创建函数{var nowTime =new Date();//创建时间对象实例var hours = nowTime.getHours();//获取当前小时数var minutes = nowTime.getMinutes();//获取当前分钟数var seconds = nowTime.getSeconds();//获取当前秒数var timer =""+((hours>12)?hours-12:hours);//将小时数质赋...

JS瀑布流效果-布局【代码】

JS瀑布流效果-布局<!DOCTYPE html><html><head><meta charset="utf-8"/><title>JS瀑布流效果-布局</title><style>* {margin: 0px;padding: 0px;}#container {position: relative;}.box {padding: 5px;float: left;}.box_img {padding: 5px;border: 1px solid #cccccc;box-shadow: 0 0 5px #ccc;border-radius: 5px;}.box_img img {width: 150px;height: auto;}</style></head><body><div id="container"><div class="box"><div cla...

基于JS和JQuery实现的两种时钟效果（7）【代码】【图】

项目应用-布局钟表支架和页面图片在前面实现两种时钟的效果，将前面用到的知识整合于一小项目中用到的素材：由于这张截取的素材太大，我就不放在该位置了项目页面初始布局效果：初始布局代码： 1 <!DOCTYPE html>2 <html>3 <head>4 <meta charset="UTF-8">5 <title></title>6 <style>7 *{8 margin:0px ;9 padding: 0px; 10 } 11 ...

js实现图片的大小自适应效果【代码】

需求是传过来一个图片，根据外层div的大小自动进行缩放效果。function ShowSecondImg(v) {var rate, newX, newY,newW, newH = 0; //表示图片相对窗口的缩放比例var imgW, imgH;var centerW = $(window).width() - $("#alarmQueue").width() - $("#presInfo").width() - 40;var centerH = $(window).height() - $("#detailedInfor").height()-148;$("#imgBoxs").find("#second").remove();var img = $(‘<img/>‘, { src: v.First...

JavaScript实现动画效果【代码】

说到JavaScript实现动画效果，不得不想到两个函数，setTimeout和setInterval。　　 setTimeout的常用的使用方法为 setTimeout(callback, delay)，setInterval常用的使用方法为setInterval(callback, delay)　　两者的区别setTimeout(function repeat(){/* Some Long block of code... */setTimeout(repeat, 10) }, 10) setInterval(function(){/* Some Long block of code... */ }, 10)这两个函数看起来功能似乎是相同的，但实际上...

首页 / JAVASCRIPT / JS与JQ实现焦点图轮播效果

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

内容导读

内容图文

内容总结

内容备注

内容手机端

【JS与JQ实现焦点图轮播效果】教程文章相关的互联网学习教程文章

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程