简易图片自动轮播

根据前段时间学的大图轮播，自己做了一个简单的图片自动轮播

代码如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #body
            {
                width: 90%;
                border: 1px solid red;
                height: 1000px;
                margin: 0px auto;
            }
            #stage
            {
                width: 1000px;
                height: 500px;
                border: 10px solid black;
                position: absolute;
                left: 150px;
                top: 200px;
                overflow: hidden;
            }
            #left-btn
            {
                position: absolute;
                left: 0px;
                top:0px;
                height: 500px;
                width: 40px;
                background-color: black;
                color: white;
                opacity: 0.5;
                line-height: 500px;
                text-align: center;
                font-size: 30px;
                z-index: 999;
            }
            #right-btn
            {
                position: absolute;
                right: 0px;
                top:0px;
                height: 500px;
                width: 40px;
                background-color: black;
                color: white;
                opacity: 0.5;
                line-height: 500px;
                text-align: center;
                font-size: 30px;
                z-index: 999;
            }
            #left-btn:hover
            {
                cursor: pointer;
                opacity: 0.7;
            }
            #right-btn:hover
            {
                cursor: pointer;
                opacity: 0.7;
            }
            #ad-banner
            {
                height: 500px;
                width: 5000px;
                position: relative;
                background-color: blue;
            }
            .ad{
                width: 1000px;
                height: 500px;
                float: left;
                text-align: center;
                line-height: 500px;
                font-size: 100px;
            }
        </style>
    </head>
    <body>
        <div id="body">
            <div id="stage">
                <div id="left-btn"><</div>
                <div id="right-btn">></div>
                <div id="ad-banner">
                    <div class="ad" style="background-color: red">1</div>
                    <div class="ad" style="background-color: green">2</div>
                    <div class="ad" style="background-color: blue">3</div>
                    <div class="ad" style="background-color: pink">4</div>
                    <div class="ad" style="background-color: white">5</div>
                </div>
            </div>
        </div>
    </body>
</html>
<script>
var speed = 10;
var count = 1;
var banner = document.getElementById(‘ad-banner‘);
var arr = Array();
window.onload=function(){setInterval(‘change()‘,3000);}
function change()
{
arr.push(window.setInterval(‘moveLeft()‘,10));
}
function moveLeft()
{
var banner_left = banner.offsetLeft;
    if(count<5)
    {
        if(banner_left>(count*(-1000)))
        {
        banner.style.marginLeft = banner_left - speed + ‘px‘
        }
        else
        {
            for(var i in arr)
            {
                window.clearInterval(arr[i]);
            }

            if(count<5)
            {
            count++;

            }
         }
    }
    else if(count==5)
    {
        banner.style.marginLeft = banner_left + 4000 + ‘px‘;
                for(var i in arr) {
                        window.clearInterval(arr[i]);
                    }
                count=1
    }}

其中有个体验不好的地方是从最后一张到第一张速度太快，没有轮播效果。这个问题有待解决。

时间： 2024-10-15 21:50:55

简易图片自动轮播的相关文章

Viewpager图片自动轮播，网络图片加载，图片自动刷新

package com.teffy.viewpager; import java.util.ArrayList; import java.util.concurrent.Executors; import java.util.concurrent.ScheduledExecutorService; import java.util.concurrent.TimeUnit; import android.annotation.SuppressLint; import android.app.Act

ViewPager + Handler 实现的图片自动轮播

首先上图看效果我也是在网上看各种大牛们做的效果,很多都是自定义重写了一些控件来实现这个效果的.我把其中的一位大牛写的ViewPager的效果加上了Handler实现了自动轮播效果,在此做个笔记来以后温习使用! 自动轮播的核心代码如下: private final int AUTO_MSG = 1; private final int HANDLE_MSG = AUTO_MSG + 1; private static final int PHOTO_CHANGE_TIME = 1000;//定时

js实现图片自动轮播

今天有人问我这个问题,我就顺便把这个记下来,分享给大伙. 如图,就是图片自己轮播,并且图中中下方的白点也发生变化,图片到哪,白点就到哪,就直接上代码了 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www

ViewPager图片自动轮播加原点

Layout_Xml activity_main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_p

图片自动轮播（一）---2017-04-05

一张一换,其他的都隐藏着: 第一种:利用td表格: </head><style>*{ margin:0px; padding:0px;}#datu{ width:200px; height:100px; border: 1px solid #000; overflow:hidden; position:relative; margin: 50px 50px;}#aa{ position:relative; top:0px; left:0px; transition:0.5s;}&l

Wpf实现图片自动轮播自定义控件

近来,公司项目需要,需要写一个自定义控件,然后就有下面的控件产生.样式没有定义好,基本功能已经实现.1.创建为自定义控件的XAML页面.下面为后台代码 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading; using System.Windows; using System.Windows.Controls; using Syste

CSS3实现图片自动轮播效果

首先来看一下效果:(这部电影画风好温柔...) 1.先在<body>里把图片贴进来,每个li下面再给一个标题 1 <ul class="name"> 2 <li> 3 <span><img src="img/img01.jpg" alt="" /></span> 4 <div><h3>哈尔的移动城堡</h3></div> 5 &

ios 图片自动轮播

#import "NYViewController.h" #define kImageCount 5 @interface NYViewController () <UIScrollViewDelegate> @property (nonatomic, strong) UIScrollView *scrollView; @property (nonatomic, strong) UIPageControl *pageControl; @property (nonatomic

JavaScript 简易版自动轮播手动轮播菜鸟交流

本人刚刚接触前端,许多知识还不了解,以前经常到博客园查询自己需要的东西,现在也终于反客为主了.作为新手,所展示的东西也是浅显易懂,希望同是新手的伙伴们共同交流.共同进步,若是成功捕获一位大大,也请您赐教.不知道在这里能否有幸找到一位耐心点的师傅,我未来的师傅啊,快来这里啊~~ 不说废话了,直接上代码 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <t