Heim > Web-Frontend > js-Tutorial > JS und JQ implementieren den Fokusdiagramm-Karusselleffekt

JS und JQ implementieren den Fokusdiagramm-Karusselleffekt

不言
Freigeben: 2018-07-05 17:15:22
Original
1790 Leute haben es durchsucht

这篇文章主要介绍了关于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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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

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

相关推荐:

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

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

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

Das obige ist der detaillierte Inhalt vonJS und JQ implementieren den Fokusdiagramm-Karusselleffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage