大图轮播完整流程代码操作：

<style>
            * {
                margin: 0px;
                padding: 0px;
            }
            
            .stage {
                width: 500px;
                height: 300px;
                border: 5px solid black;
                margin: 200px;
                position: relative;
                overflow: hidden;
            }
            
            .to-left,
            .to-right {
                position: absolute;
                top: 0px;
                width: 50px;
                height: 300px;
                background-color: black;
                color: white;
                font-size: 30px;
                text-align: center;
                line-height: 300px;
                opacity: 0.3;
            }
            
            .to-left {
                left: 0px;
            }
            
            .to-right {
                right: 0px;
            }
            
            .to-left:hover,
            .to-right:hover {
                cursor: pointer;
                opacity: 0.5;
            }
            
            .banner {
                width: 3000px;
                height: 300px;
            }
            
            .items {
                float: left;
                width: 500px;
                height: 300px;
                background-color: blanchedalmond;
                font-size: 100px;
                text-align: center;
                line-height: 300px;
            }
        </style>
    </head>
<!--大图轮播特效-->
    <body>
        <div class="stage">
            <div class="to-left">
                <</div>
                    <div class="to-right">></div>
                    <div class="banner">
                        <div class="items">1</div>
                        <div class="items" style="">2</div>
                        <div class="items" style="">3</div>
                        <div class="items" style="">4</div>
                        <div class="items" style="">5</div>
                        <div class="items">1</div>
                    </div>
            </div>
    </body>

</html>
<script>
    var to_right = document.getElementsByClassName('to-right')[0];
    var to_left = document.getElementsByClassName('to-left')[0];
    var banner = document.getElementsByClassName('banner')[0];
    var arr = [];
    var count = 1;

    to_right.onclick = function() {
        toRight();
    }
    
    function toRight(){
        arr.push(window.setInterval("moveLeft()", 30));
    }
    
    to_left.onclick = function() {
        toLeft();
    }

    function toLeft(){
        arr.push(window.setInterval("moveRight()", 30));
    }
    
    function moveLeft() {
        if(count < 5) {
            if(banner.offsetLeft > count * (-500)) {
                banner.style.marginLeft = banner.offsetLeft - 20 + "px";
            } else {
                for(var x in arr) {
                    window.clearInterval(arr[x]);
                }
                count++;
            }
//    连接点
        }else{
            if(banner.offsetLeft > count * (-500)) {
                banner.style.marginLeft = banner.offsetLeft - 20 + "px";
            } else {
                for(var x in arr) {
                    window.clearInterval(arr[x]);
                }
                count = 1;
                banner.style.marginLeft = 0 + 'px';
            }
        }
    }
    
    function moveRight() {
        if(count-1 >0) {
            if(banner.offsetLeft < (count-2) * (-500)) {
                banner.style.marginLeft = banner.offsetLeft + 20 + "px";
            } else {
                for(var x in arr) {
                    window.clearInterval(arr[x]);
                }
                count--;
            }
        }
    }
    window.setInterval("toRight()",1750);
    

</script>

利用JS做网页特效——大图轮播的更多相关文章

  1. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

  2. js 实现淘宝无缝轮播图效果，可更改配置参数 带完整版解析代码[slider.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...

  3. [DBW]大图轮播，可通过两种方法实现

    通过在div中加入表格,实现大图轮播,代码如下: 整体的思路: 1.在div中嵌入表格,设置div的宽和高,设置成图片大小,确定其位置,将图片插入表格,超出div部分隐藏 2.在js中定义一个变量接受 ...

  4. JS封装动画框架,网易轮播图,旋转轮播图

    JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...

  5. bootstrap大图轮播手机端不能手指滑动解决办法

    网上看了很多解决办法,几乎本质都是一样的,都是引入一个滑动的js插件,加入一段js代码,即可生效,但是我试了hammer.js 和 touchSwipe.js 都不生效,也找不到原因是什么,目前在网上 ...

  6. 原生js和jquery实现图片轮播特效

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  7. 原生js和jquery实现图片轮播特效(转)

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  8. 纯原生JS大图轮播

    CSS部分: CSS: <style type="text/css"> #banner { position: relative; width: 500px; heig ...

  9. 使用jQuery做简单的图片轮播效果

      一.本特效主要用到的前端知识点 CSS中绝对定位(absolute)CSS实现垂直居中jQuery中简单的淡入淡出动画效果(fadeIn,fadeOut)定时器(setInterval,clear ...

随机推荐

  1. Server from ＵＲＬ

    在你做网页时,如果网页需要运行ActiveX或脚本,并且他们位于客户端以外的地方, 那么可以添加这个注释语句,IE当然不会不理他, IE会按照他指出的URL去找脚本的位置. 这句话的作用是让Inter ...

  2. 拥抱.NET Core系列：依赖注入（1）

    依赖注入时编程手段中解耦和封装的一个非常重要的手段,我本人已经到了没有DI无法编写项目的程度了,在.NET Framework中微软并没有在FCL中引入DI,虽然推出了"Unity" ...

  3. 如何在一个Eclipse同时启动两个Tomcat

    比如:有两个版本的tomcat,一个5.*,一个6.*,此时由于两个工程分别部署在两个版本的tomcat下,需要同时启动两个tomcat,以下是方法: 1.特别要注意: 不要设置CATALINA_HO ...

  4. mongoDB创建数据库用户

    运行mongo.exe >use demo //切换到要创建用户的数据库 >db.createUser({user: "admin",pwd: "admin& ...

  5. 从 RequireJs 源码剖析脚本加载原理

    引言 俗话说的好,不喜欢研究原理的程序员不是好的程序员,不喜欢读源码的程序员不是好的 jser.这两天看到了有关前端模块化的问题,才发现 JavaScript 社区为了前端工程化真是煞费苦心.今天研究 ...

  6. Merge使用

    Role r = new Role(); r.setName("TEST"); r.setDescription("123"); r.setLevel(2); ...

  7. U盘发现器

    U盘发现器 package com.lx.io; import java.io.File; import java.io.IOException; import java.util.ArrayList ...

  8. Android Bitmap 常见的几个操作：缩放，裁剪，旋转，偏移

    Android Bitmap 相关操作 常见的几个操作:缩放,裁剪,旋转,偏移      很多操作需要 Matrix 来支持:Matrix 通过矩阵来处理位图,计算出各个像素点的位置,从而把bitma ...

  9. Jenkins2 实现持续交付初次演练（MultiJob，Pipeline，Blue Ocean）

    背景 项目需要用到自动部署,但可获取外网的节点机器只有一台,那只能同过主节点机器进行构建完成然后分发至对应服务器进行启动更新. 目前已尝试过三种方式: 1.Pipeline-Trigger param ...

  10. 自然饱和度(Vibrance)算法的模拟实现及其SSE优化（附源码，可作为SSE图像入门，Vibrance算法也可用于简单的肤色调整）。

    Vibrance这个单词搜索翻译一般振动,抖动或者是响亮.活力,但是官方的词汇里还从来未出现过自然饱和度这个词,也不知道当时的Adobe中文翻译人员怎么会这样处理.但是我们看看PS对这个功能的解释: ...