例题:大图轮播

大图轮播

图片轮播

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <style type="text/css">
            #tu{
                width:700px;
                height:500px;
                float:left;
                }
            .img{
                display:none;}

        </style>
    </head>

    <body>
        <div id="tu">
            <img class="img" style="display:block" src="9d9376fa-b035-4bf3-9b95-0e2cd92f386e.jpg" width="700" height="500" />
            <img class="img" src="44ab5520-41e9-4bd7-bd0e-ea6dde13b89b.jpg" width="700" height="500" />
            <img class="img" src="77ecb4e3-1de5-4a4f-b165-400c59a71433.jpg" width="700" height="500" />
            <img class="img" src="32680e0e-45e3-45e5-8ccf-f5faa452c22a.jpg" width="700" height="500" />
            <img class="img" src="2184009b-c1d9-4376-8ac9-e396016efc56.jpg" width="700" height="500" />
        </div>
    </body>

    <script type="text/javascript">
        window.setInterval("Huan()",1000);
        var sy = 0;
        function Huan()
        {
            var img = document.getElementsByClassName("img");
            sy++;
            if(sy>=img.length)
            {
                sy = 0;
            }
            for(var i=0;i<img.length;i++)
            {
                img[i].style.display = "none";
            }
            img[sy].style.display = "block";

        }

    </script>
</html>

加入原点

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <style type="text/css">
            #tu{
                width:700px;
                height:500px;
                float:left;
                }
            .img{
                display:none;}
            #yuandian{
                width:500px;
                height:20px;
                margin-top:450px;
                margin-left:-200px;
                float:left;}
            .dian{
                width:20px;
                height:20px;
                border:5px solid red;
                border-radius:50%;
                float:left;
                margin-left:10px;
                }
        </style>
    </head>

    <body>
        <div id="tu">
            <img class="img" style="display:block" src="9d9376fa-b035-4bf3-9b95-0e2cd92f386e.jpg" width="700" height="500" />
            <img class="img" src="44ab5520-41e9-4bd7-bd0e-ea6dde13b89b.jpg" width="700" height="500" />
            <img class="img" src="77ecb4e3-1de5-4a4f-b165-400c59a71433.jpg" width="700" height="500" />
            <img class="img" src="32680e0e-45e3-45e5-8ccf-f5faa452c22a.jpg" width="700" height="500" />
            <img class="img" src="2184009b-c1d9-4376-8ac9-e396016efc56.jpg" width="700" height="500" />
        </div>
        <div id="yuandian">
            <div sy="0" class="dian" style="border-color:blue"></div>
            <div sy="1" class="dian"></div>
            <div sy="2" class="dian"></div>
            <div sy="3" class="dian"></div>
            <div sy="4" class="dian"></div>

        </div>
    </body>

    <script type="text/javascript">
        window.setInterval("Huan()",1000);
        var sy = 0;
        function Huan()
        {
            var img = document.getElementsByClassName("img");
            sy++;
            if(sy>=img.length)
            {
                sy = 0;
            }
            for(var i=0;i<img.length;i++)
            {
                img[i].style.display = "none";
            }
            img[sy].style.display = "block";

            var d = document.getElementsByClassName("dian");
            for(var j=0;j<d.length;j++)
            {
                if(d[j].getAttribute("sy")==sy)
                {
                    d[j].style.borderColor = "blue";
                }
                else
                {
                    d[j].style.borderColor = "red";
                }
            }
        }

    </script>
</html>

原文地址:https://www.cnblogs.com/r6688/p/8832951.html

时间: 2024-11-06 07:20:03

例题:大图轮播的相关文章

大图轮播

之前有整理过用js做的大图轮播,相对来说看起来比较繁琐,今天来写一些用bootstrap做的大图轮播,看起来非常简单: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 简单的轮播(Carousel)插件</title> <link rel="stylesheet" href="h

JS对于导航栏、下拉菜单以及选项卡的切换操作、大图轮播(主要练习对于样式表的操作)

1.导航拦以及下拉菜单 css样式表代码 .div1 { width: 100px; height: 30px; background-color: red; float: left; margin-right: 10px; } .div1-div { width: 100%; height: 400px; background-color: green; margin-top: 30px; display: none; } JS脚本代码 <!DOCTYPE html> <html xm

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

网上看了很多解决办法,几乎本质都是一样的,都是引入一个滑动的js插件,加入一段js代码,即可生效,但是我试了hammer.js 和 touchSwipe.js 都不生效,也找不到原因是什么,目前在网上就找到 toucher.js 可以实现,贴到博客,留作备用:  1 <script>   2     $(function(){   3         var myTouch = util.toucher(document.getElementById('carousel-index')); 

简单易懂实用的大图轮播

<head> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>大图轮播</title> <style type="text/css"> * { margin: 0px; padding: 0px; } #container { width: 500px; h

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

通过在div中加入表格,实现大图轮播,代码如下: 整体的思路: 1.在div中嵌入表格,设置div的宽和高,设置成图片大小,确定其位置,将图片插入表格,超出div部分隐藏 2.在js中定义一个变量接受left的值,并赋值为0px,即初始值 3设置函数 function  a() {在函数中将接收到的值强制转化为数字, 然后在值中减掉一张图片的宽度, } 3.延迟执行,设置需要延迟的代码及延迟的时间,最后回到表格中,加入一个调用方法 1 2 3 4 5 6 7 8 9 10 11 12 13 14

自定义View之无限大图轮播ShufBanner

无限大图轮播–ShufBanner 轮播图作为一个app的宣传,展示等,往往占据着一个很重要的地位,大部分app都将其放在首页.那么通常的做法都是使用ViewPager,使其能够作用滑动,而无限轮播无外乎两种做法. - 第一种是将ViewPager的size定义为无限大,定义其初始显示的位置为中间,这样的话因为左或者右都有很多的页面,所以造成了一种可以无限轮播的假象.同时因为ViewPager的特性,其只是加载当前显示page以及左和右的三个页面,不用担心OOM. - 第二种是,将ViewPag

利用表格实现大图轮播

<style type="text/css">                      #a1{ width:1080px; height:350px;position:relative;  overflow:hidden;float:left;margin-left:10%            }#ta{ position:relative; left:0px; top:0px;  transition:1s     }  </style></hea

2017-6-4 用jQuery 做大图轮播

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server&quo

大图轮播-带有方向导航箭头

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-