js 实现横向轮播效果

Posted linjiangxian

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js 实现横向轮播效果相关的知识,希望对你有一定的参考价值。

参考:https://www.cnblogs.com/LIUYANZUO/p/5679753.html

 

html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>js横向轮播</title>
        <style type="text/css">
            body 
                margin: 0;
            

            #container 
                position: relative;
                width: 100%;
                height: 300px;
                overflow: hidden;
                z-index: -1;
            

            #list 
                position: absolute;
                width: 4200px;
                height: 300px;
            

            #list .img 
                float: left;
                /* width: 375px; */
                height: 300px;
            
        </style>
    </head>
    <body>
        <div id="container">
            <div id="list"></div>
        </div>
    </body>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        window.onload = function() 
            var container = document.getElementById(‘container‘),
                list = document.getElementById(‘list‘),
                index = 1;
            $(‘#list‘).css(‘left‘, -screen.width + ‘px‘);
            var timer;
            var imgList = [
                        src: ‘img/1.jpg‘
                    ,
                    
                        src: ‘img/2.jpg‘
                    ,
                    
                        src: ‘img/3.jpg‘
                    ,
                    
                        src: ‘img/4.jpg‘
                    ,
                    
                        src: ‘img/5.jpg‘
                    
                ],
                l = imgList.length - 1,
                len = imgList.length,
                w = screen.width,
                string = ‘‘;
            string = makeStr(imgList, l);
            $(‘#list‘).append(string);
            var j = 0;
            while (j < imgList.length) 
                string = makeStr(imgList, j);
                $(‘#list‘).append(string);
                j++;
            
            string = makeStr(imgList, 0);
            $(‘#list‘).append(string);
            $(‘#list .img‘).css(‘width‘, screen.width + ‘px‘);

            function makeStr(arr, i) 
                string = "<div class=‘img‘ style=‘background:url(" +
                    arr[i].src + ") no-repeat;background-size:100%‘/></div>";
                return string;
            

            function animate(offset) 
                var newLeft = parseInt(list.style.left) + offset;
                list.style.left = newLeft + ‘px‘;
                if (newLeft > -w) 
                    list.style.left = w * len + ‘px‘;
                
                if (newLeft < -w * len) 
                    list.style.left = -w + ‘px‘;
                
            

            function play() 
                timer = setInterval(function() 
                    start();
                , 2000)
            

            function start() 
                index += 1;
                if (index > len) 
                    index = 1
                
                animate(-w);
            ;

            function stop() 
                clearInterval(timer);
            
            if (imgList.length > 1) 
                play();
            
        
    </script>
</html>

 

以上是关于js 实现横向轮播效果的主要内容,如果未能解决你的问题,请参考以下文章

js 实现图片无限横向滚动效果

利用轮播原理结合hammer.js实现简洁的滑屏功能

原生DOM方法实现,多个图片的横向左右轮播

Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条

2 行 JS 代码实现页面横向滚动特效

如何用js实现一个横向滚动新闻?补充里已附图。求详细代码,不要太复杂的。最好使用div不要用table