zoukankan      html  css  js  c++  java
  • 13-----轮播实现(各种)

    无缝轮播实现(比较考验逻辑思维)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            ul{
                list-style: none;
            }
            .slider-list{
    
                width: 580px;
                overflow: hidden;
                margin: 100px auto;
                position: relative;
            }
            .slider-list .slider-wrapper{
                height: 470px;
            }
            .slider-wrapper ul{
                height: 100%;
    
                position: relative;
    
            }
            .slider-wrapper ul li{
                float: left;
                width: 590px;
                height: 470px;
    
            }
            .slider-wrapper ul li a{
                display: block;
                width: 100%;
                height: 100%;
            }
             .focus-img{
                width: 590px;
                height: 470px;
            }
            button{
                position: absolute;
                width: 24px;
                height: 40px;
                top: 50%;
                line-height: 40px;
                text-align: center;
                background-color: rgba(0,0,0,.2);
                color: white;
                font-size: 30px;
                border: 0;
                outline: none;
                cursor: pointer;
                z-index: 99;
            }
            button.next{
                right: 0;
            }
            button.prev{
                left: 0;
            }
            .slider-index{
                position: absolute;
                bottom: 10px;
                left:250px;
                z-index: 2;
    
            }
            .slider-index span{
                display: inline-block;
                width: 10px;
                height: 10px;
                border: 2px solid red;
                border-radius: 50%;
            }
            .slider-index span.active{
                background-color: orange;
            }
    
        </style>
    </head>
    <body>
        <div class="slider-list">
            <div class="slider-wrapper">
                <ul>
                    
                </ul>
            </div>
            <button class="next">></button>
            <button class="prev"><</button>
            <div class="slider-index">
                <span class="active"></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>    
            </div>
        </div>
        <script type="text/javascript" src="jquery-3.3.1.js"></script>
        <script type="text/javascript">
            
            $(function(){
                // 1.获取本地图片数据 590*470
                var imgArr = ['./5.jpg','./1.jpg','./2.jpg','./3.jpg','./4.jpg','./5.jpg','./1.jpg'];
    
                // 获取图片的宽度
                var imgWidth = 590;
                var len = $('span').length;
    
                // 2.遍历数据 将图片添加到ul中
                for(let i = 0;i < imgArr.length;i++){
                    let width = i*imgWidth;
                    $(`<li>
                        <a href="javascript:;">
                            <img src=${imgArr[i]} alt=${i}>
                        </a>
                    </li>`).appendTo('.slider-wrapper ul').addClass('slider-item')    
    
                }
                
    
                // 设置图片的类名
                $('img').addClass('focus-img');
                // 设置父盒子的总宽度
                $('.slider-wrapper').width((imgArr.length+1)*imgWidth);
                $('.slider-wrapper ul').width((imgArr.length+1)*imgWidth);
    
    
                // 初始化 
                // 默认显示第一张图片
                init();
                function init(){
                     $("ul").css("left",-imgWidth);
                }
    
                
                // 下一张
                $('button.next').click(function(event) {
                    
                    next();
                });
    
                // 控制图片显示第几张
                var count  = 1;
                function next(){
    
                    if (count ==len+1) {
                        count  = 2;
                        $("ul").css("left",-imgWidth);
                    }else{
                        count++;
                    }
                    $('.slider-wrapper ul').stop().animate({left:-count*imgWidth},200);
    
                    
                    // 控制轮播图索引改变颜色
                    if (count>len) {
                        $("span").eq(0).addClass("active").siblings("span").removeClass("active");
                    }else{
    
                     $("span").eq(count-1).addClass("active").siblings("span").removeClass("active");
                    }
                    
                }
    
                // 给小圆圈添加点击事件
    
                $('span').click(function(){
                      //自己的样式
                                $(this).addClass("active").siblings("span").removeClass("active");
                                 count = $(this).index()+1;
                                $("ul").animate({"left":-count*imgWidth},200);
                })
    
                setInterval(next,2000);
                
    
            })
        </script>
    </body>
    </html>

    模仿京东轮播图效果

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            ul,ol{ list-style: none;}
            .wrapper{
                width: 580px;
                height: 240px;
                margin: 100px auto;
                /*overflow: hidden;*/
                position: relative;
            }
            .wrapper ul{
                width: 100%;
                height: 240px;
                overflow: hidden;
    
            }
            .wrapper ul li{
                float: left;
                width: 580px;
                height: 240px;
            }
            ol{
                position: absolute;
                right: 0;
                bottom: 10px;
                width: 190px;
            }
            ol li{
                float: left;
                width: 20px;
                height: 20px;
                margin: 0 5px;
                text-align: center;
                border-radius: 50%;
                cursor: pointer;
                background-color: #abc;
            }
            ol li.current{
                background-color: pink;
            }
        </style>
        <script type="text/javascript" src="./jquery-3.3.1.js"></script>
        <script type="text/javascript">
            $(function () {
                // 根据ol下li的索引号,匹配ul下相对应li的索引号
                $(".wrapper ol li").mouseenter(function () {
                    $(this).addClass("current").siblings().removeClass("current");
                    $(".wrapper ul li").eq($(this).index()).stop().fadeIn("fast").siblings().stop().fadeOut();
                });
            });
        </script>
    </head>
    <body>
        <div class="wrapper">
            <ul>
                <li><img src="./1.jpg" alt=""/></li>
                <li><img src="./2.jpg" alt=""/></li>
                <li><img src="./3.jpg" alt=""/></li>
                <li><img src="./4.jpg" alt=""/></li>
                <li><img src="./5.jpg" alt=""/></li>
    
                
            </ul>
            <ol>
                <li class="current">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ol>
        </div>
    </body>
    </html>
  • 相关阅读:
    086 01 Android 零基础入门 02 Java面向对象 01 Java面向对象基础 03 面向对象基础总结 01 面向对象基础(类和对象)总结
    085 01 Android 零基础入门 02 Java面向对象 01 Java面向对象基础 02 构造方法介绍 04 构造方法调用
    jQuery UI组件库Kendo UI使用技巧小分享
    Kendo UI ListView模板功能,让Web开发更轻松
    UI组件套包DevExpress ASP.NET Core v20.2新版亮点:全新的查询生成器
    Devexpress WinForms最新版开发.NET环境配置Visual Studo和SQL Server对应版本
    全新的桌面应用数据可视化呈现方式,Sankey Diagram控件你了解多少?
    java中的递归方法
    连接数据库查询 将查询结果写入exce文件中
    java连接mysql数据查询数据
  • 原文地址:https://www.cnblogs.com/edeny/p/9318464.html
Copyright © 2011-2022 走看看