ホームページ  >  記事  >  ウェブフロントエンド  >  JS と JQ はフォーカス チャートのカルーセル効果を実装します

JS と JQ はフォーカス チャートのカルーセル効果を実装します

不言
不言オリジナル
2018-07-05 17:15:221762ブラウズ

这篇文章主要介绍了关于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(&#39;container&#39;);            var list = document.getElementById(&#39;list&#39;);            var buttons = document.getElementById(&#39;buttons&#39;).getElementsByTagName(&#39;span&#39;);            var prev = document.getElementById(&#39;prev&#39;);            var next = document.getElementById(&#39;next&#39;);            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 + &#39;px&#39;;
                        setTimeout(go, inteval);
                    }                    else {
                        list.style.left = left + &#39;px&#39;;                        if(left>-200){
                            list.style.left = -600 * len + &#39;px&#39;;
                        }                        if(left<(-600 * len)) {
                            list.style.left = &#39;-600px&#39;;
                        }
                        animated = false;
                    }
                }
                go();
            }            function showButton() {                for (var i = 0; i < buttons.length ; i++) {                    if( buttons[i].className == &#39;on&#39;){
                        buttons[i].className = &#39;&#39;;                        break;
                    }
                }
                buttons[index - 1].className = &#39;on&#39;;
            }            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 == &#39;on&#39;) {                        return;
                    }                    var myIndex = parseInt(this.getAttribute(&#39;index&#39;));                    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 = $(&#39;#container&#39;);
            var list = $(&#39;#list&#39;);
            var buttons = $(&#39;#buttons span&#39;);
            var prev = $(&#39;#prev&#39;);
            var next = $(&#39;#next&#39;);
            var index = 1;
            var len = 5;
            var interval = 3000;
            var timer;


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

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

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

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

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

            buttons.each(function () {
                 $(this).bind(&#39;click&#39;, function () {
                     if (list.is(&#39;:animated&#39;) || $(this).attr(&#39;class&#39;)==&#39;on&#39;) {
                         return;
                     }
                     var myIndex = parseInt($(this).attr(&#39;index&#39;));
                     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(){
        $(&#39;.og_next&#39;).click();    
    },5000);
    /***不需要自动滚动,去掉即可***/
    linum = $(&#39;.mainlist li&#39;).length;//图片数量
    w = linum * 250;//ul宽度
    $(&#39;.piclist&#39;).css(&#39;width&#39;, w + &#39;px&#39;);//ul宽度
    $(&#39;.swaplist&#39;).html($(&#39;.mainlist&#39;).html());//复制内容
    
    $(&#39;.og_next&#39;).click(function(){
        
        if($(&#39;.swaplist,.mainlist&#39;).is(&#39;:animated&#39;)){
            $(&#39;.swaplist,.mainlist&#39;).stop(true,true);
        }
        
        if($(&#39;.mainlist li&#39;).length>4){//多于4张图片
            ml = parseInt($(&#39;.mainlist&#39;).css(&#39;left&#39;));//默认图片ul位置
            sl = parseInt($(&#39;.swaplist&#39;).css(&#39;left&#39;));//交换图片ul位置
            if(ml<=0 && ml>w*-1){//默认图片显示时
                $(&#39;.swaplist&#39;).css({left: &#39;1000px&#39;});//交换图片放在显示区域右侧
                $(&#39;.mainlist&#39;).animate({left: ml - 1000 + &#39;px&#39;},&#39;slow&#39;);//默认图片滚动                
                if(ml==(w-1000)*-1){//默认图片最后一屏时
                    $(&#39;.swaplist&#39;).animate({left: &#39;0px&#39;},&#39;slow&#39;);//交换图片滚动
                }
            }else{//交换图片显示时
                $(&#39;.mainlist&#39;).css({left: &#39;1000px&#39;})//默认图片放在显示区域右
                $(&#39;.swaplist&#39;).animate({left: sl - 1000 + &#39;px&#39;},&#39;slow&#39;);//交换图片滚动
                if(sl==(w-1000)*-1){//交换图片最后一屏时
                    $(&#39;.mainlist&#39;).animate({left: &#39;0px&#39;},&#39;slow&#39;);//默认图片滚动
                }
            }
        }
    })
    $(&#39;.og_prev&#39;).click(function(){
        
        if($(&#39;.swaplist,.mainlist&#39;).is(&#39;:animated&#39;)){
            $(&#39;.swaplist,.mainlist&#39;).stop(true,true);
        }
        
        if($(&#39;.mainlist li&#39;).length>4){
            ml = parseInt($(&#39;.mainlist&#39;).css(&#39;left&#39;));
            sl = parseInt($(&#39;.swaplist&#39;).css(&#39;left&#39;));
            if(ml<=0 && ml>w*-1){
                $(&#39;.swaplist&#39;).css({left: w * -1 + &#39;px&#39;});
                $(&#39;.mainlist&#39;).animate({left: ml + 1000 + &#39;px&#39;},&#39;slow&#39;);                
                if(ml==0){
                    $(&#39;.swaplist&#39;).animate({left: (w - 1000) * -1 + &#39;px&#39;},&#39;slow&#39;);
                }
            }else{
                $(&#39;.mainlist&#39;).css({left: (w - 1000) * -1 + &#39;px&#39;});
                $(&#39;.swaplist&#39;).animate({left: sl + 1000 + &#39;px&#39;},&#39;slow&#39;);
                if(sl==0){
                    $(&#39;.mainlist&#39;).animate({left: &#39;0px&#39;},&#39;slow&#39;);
                }
            }
        }
    })    
});

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

})


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

  如有错误,欢迎联系我改正,非常感谢!!!

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

相关推荐:

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

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

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

以上がJS と JQ はフォーカス チャートのカルーセル効果を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。