参考：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 实现横向轮播效果的更多相关文章

  1. html中使用JS实现图片轮播效果

    1.首先是效果图,要在网页中实现下图的轮播效果,有四张图片,每张图片有自己的标题,然后还有右下角的小方框,鼠标悬浮在小方框上,会切换到对应的图片中去. 2.先是HTML中的内容,最外层是轮播图整个的容 ...

  2. 原生JS实现幻灯片轮播效果

    在以往的认知中,一直以为用原生JS写轮播是件很难得事情,今天上班仿照网上的写了一个小demo.小试牛刀. 大致效果: html结构很简单,两个列表,一个代表图片列表,一个是右下角序号列表. <d ...

  3. 原生js实现图片轮播效果

    思路:设置父容器(一定宽度,一定高度,相对定位,子容器超出部分进行隐藏),子容器图片并排(浮动,绝对定位,每次点击进行相应的左或右偏移量) 1.html: <!DOCTYPE html> ...

  4. [Js]焦点图轮播效果

    一.所用到的知识点 1.DOM操作 2.定时器 3.事件运用 4.Js动画 5.函数递归 6.无限滚动大法 二.结构和样式 <div id="banner" class=&q ...

  5. 原生js重写《锋利的JS》之 轮播效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. JQuery简单实现图片轮播效果

    很多页面都需要用到界面轮播,但是用原生js相对来说比较复杂,用jQuery实现效果比较迅速,写个简单的demo 1.首先在HTML页面要放置轮播图案位置插入div,这里写了轮播图片数量为3张,所以定义 ...

  7. 针对淡入淡出的定时轮播效果js

    如果不使用jquery的fadeIn和fadeOut的接口和不适用animate情况下,如果要做用js实现淡入淡出轮播效果,我所想到的办法就是使用css3新特性transition(注意好兼容性). ...

  8. js的轮播效果

    图片的轮播效果!主要运用了元素的style样式属性,与 setInterval(); <!DOCTYPE html> <html> <head lang="en ...

  9. JS、JQ实现焦点图轮播效果

    JS实现焦点图轮播效果 效果图: 代码如下,复制即可使用: (不过里面的图片路径需要自己改成自己的图片路径,否则是没有图片显示的哦) <!DOCTYPE html> <html> ...

随机推荐

  1. HTML样式链接到外部样式表

    w3cschool链接:http://www.w3school.com.cn/html/html_css.asp <html> <head><link rel=" ...

  2. 计算几何——点线关系（叉积）poj2318

    #include<iostream> #include<cstring> #include<cstdio> #include<algorithm> #i ...

  3. 记录一次hexo托管到coding失败，页面总是404，可是相同的代码托管到github是没问题的。

    文章目录 问题描述: 问题原因: 问题解决 2019.1.23 问题,coding又挂了. 弃疗 个人博客:https://mmmmmm.me 源码:https://github.com/dataiy ...

  4. 正则表达式r和re

    # coding:utf-8 import re print 'a\ws' print r'a\nb' # r'': 一般用在正则表达式中,称为原始字符串,作用是将Python语法中的反斜杠转义给 取 ...

  5. Facebook分布式框架—Thrift介绍。

    Thrift介绍 Thrift是一个分布式RPC框架,用来进行可扩展且跨语言的服务的开发.它结合了功能强大的软件堆栈和代码生成引擎,以构建在 C++, Java, Python, PHP, Ruby, ...

  6. USB电扇无刷电机改装

    现在USB电扇已经很常见了,网上随便可以低价买到.里面的电机分为有刷和无刷两种.我拆过的有刷USB电扇都非常劣质,里面的电机貌似是旧DVD机的拆机货:而无刷也有优劣之分,有的硅钢片非常少,铜线也细.这 ...

  7. 第二周课堂笔记2th

    ---恢复内容开始--- 1. 2.索引取单个值 取多个值叫切片, 切片:取多个值 从左到右取值: 原则:顾头不顾尾 1, a[0:3] abc 2, a[-5:-2] abc 3, a[0:-2] ...

  8. Python数据格式化

    Python有两种格式化字符串的方式,使用%或者使用内置format()函数. 使用%格式化字符串 在Python中使用%来格式化字符串,用法和效果类似于C语言中的%.格式为:%特定的转换类型 %da ...

  9. 动软DbHelperSQL

    using System; using System.Collections; using System.Data; using System.Data.SqlClient; using System ...

  10. mysql主从跳过错误

    mysql主从复制,经常会遇到错误而导致slave端复制中断,这个时候一般就需要人工干预,跳过错误才能继续 跳过错误有两种方式: 1.跳过指定数量的事务 mysql>stop slave;  m ...