当前位置:山东群英会技巧>文章>JavaScript

js实现首页轮播图效果

山东群英会技巧 www.iba5.com.cn 1、相关技术

获取元素 document.getElementById(“id 名称”)
事件(onload) 只能写一次并且放到body标签中
定时操作:setInterval(“changeImg()”,3000);

2、步骤分析(此案例轮播图效果是基于HTML&CSS——使用DIV和CSS完成网站首页重构实现的)

事先准备三张一样大小的图片(img1、img2、img3)放在文件夹Img下。

第一步:确定事件(onload)并为其绑定一个函数

第二步:书写绑定的这个函数

第三步:书写定时任务(setInterval)

第四步:书写定时任务里面的函数

第五步:通过变量的方式,进行循环(获取轮播图的位置,并设置 src 属性,在循环的时候需要注意到了最后一 张图片的时候要重置)。

<script>
            function init(){
                //书写轮播图显示的定时操作
                setInterval("changImg()",3000);
            }
            
            //书写函数
            var i=1;
            function changImg(){
                i++;
                
                //获取图片位置并设置src属性值
                document.getElementById("img_1").src="../img/"+i+".jpg";
                if(i==3){
                    i=0;
                }
            }
</script>

Html:

<body onload="init()">

在指定位置定义 id。

最终实现的代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>首页</title>
        <style>
            #father{
                border: 0px solid black;
                width: 1300px;
                height: 1600px;
                margin: auto;
            }
            #logo{
                border: 0px solid black;
                width: 1300px;
                height: 50px;
            }
            .top{
                border: 0px solid blue;
                width: 431px;
                height: 50px;
                float: left;
            }
            #top{
                padding-top: 12px;
                height: 38px;
            }
            
            #menu{
                border: 0px solid red;
                width:1300px;
                height: 50px;
                background: black;
                margin-bottom: 10px;
            }
            ul li{
                display: inline;
                color: white;
            }
            #product{
                border: 0px solid goldenrod;
                width: 1300px;
                height: 550px;
            }
            #product_top{
                border: 0px solid blue;
                width: 100%;
                height: 43px;
                padding-top: 5px;
            }
            #product_bottom{
                border: 0px solid green;
                width: 100%;
                height: 498px;
            }
            
            #product_bottom_left{
                border: 0px solid red;
                width: 200px;
                height: 498px;
                float: left;
            }
            #product_bottom_right{
                border: 0px solid saddlebrown;
                width: 1094px;
                height: 498px;
                float: left;
            }
            #big{
                border: 0px solid hotpink;
                width: 545px;
                height: 247px;
                float: left;
            }
            .small{
                border: 0px solid blue;
                width: 180px;
                height: 247px;
                float: left;
                /*让里面的内容居中*/
                text-align: center;
            }
            #bottom{
                text-align: center;
            }
            /*去掉超链接的下划线*/
            a{
                text-decoration: none;
            }
        </style>
        
        <script>
            function init(){
                //书写轮播图显示的定时操作
                setInterval("changImg()",3000);
            }
            
            //书写函数
            var i=1;
            function changImg(){
                i++;
                
                //获取图片位置并设置src属性值
                document.getElementById("img_1").src="../img/"+i+".jpg";
                if(i==3){
                    i=0;
                }
            }
        </script>
    </head>
    <body body onload="init()">
        <div id="father">
            <!--1.logo部分-->
            <div id="logo">
                <div class="top">
                    <img src="../img/logo2.png" height="46px" />
                </div>
                <div class="top">
                    <img src="../img/header.png" height="46px"/>
                </div>
                <div class="top" id="top">
                    <a href="#">登录</a>
                    <a href="#">注册</a>
                    <a href="#">购物车</a>
                </div>
            </div>
                
            <!--2.导航栏部分-->    
            <div id="menu">
                <ul>
                    <a href="#"><li style="font-size: large;">首页</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#"><li>手机数码</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#"><li>家用电器</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#"><li>鞋靴箱包</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
                </ul>
            </div>    
            
            <!--3.轮播图部分-->
            <div id="">
                <img src="../img/1.jpg" width="100%" height="100%" id="img_1"/>
            </div>
                
            <!--4.最新商品-->
            <div id="product">
                
                <div id="product_top">
                    <span style="font-size: 25px">最新商品</span>&nbsp;&nbsp;&nbsp;
                    <img src="../img/title2.jpg"/>
                </div>
                
                <div id="product_bottom">
                    
                    <div id="product_bottom_left">
                        <img src="../img/big01.jpg" width="100%" height="100%" />
                    </div>
                    
                    <div id="product_bottom_right">
                        <div id="big">
                            <a href="#"><img src="../img/middle01.jpg" width="100%" height="100%"  /></a>
                        </div>
                        
                        <div class="small">
                            <a href="#"><img src="../img/small01.jpg" ></a>
                            <a href="#"><p style="color: gray;">榨汁机</p></a>
                            <p style="color: red;">599</p>
                        </div>
                        <div class="small">
                            <a href="#"><img src="../img/small02.jpg" ></a>
                            <a href="#"><p style="color: gray;">电视机</p></a>
                            <p style="color: red;">1599</p>
                        </div>
                        <div class="small">
                            <a href="#"><img src="../img/small03.jpg" ></a>
                            <a href="#"><p style="color: gray;">锅</p></a>
                            <p style="color: red;">399</p>
                        </div>
                        <div class="small">
                            <a href="#"><img src="../img/small04.jpg" ></a>
                            <a href="#"><p style="color: gray;">面包机</p></a>
                            <p style="color: red;">799</p>
                        </div>
                        <div class="small">
                            <a href="#"><img src="../img/small05.jpg" ></a>
                            <a href="#"><p style="color: gray;">咖啡机</p></a>
                            <p style="color: red;">899</p>
                        </div>
                        <div class="small">
                            <a href="#"><img src="../img/small06.jpg" ></a>
                            <a href="#"><p style="color: gray;">洗衣机</p></a>
                            <p style="color: red;">999</p>
                        </div>
                        <div class="small">
                            <a href="#"><img src="../img/small07.jpg" ></a>
                            <a href="#"><p style="color: gray;">扫地机器人</p></a>
                            <p style="color: red;">1599</p>
                        </div>
                        <div class="small">
                            <a href="#"><img src="../img/small09.jpg" ></a>
                            <a href="#"><p style="color: gray;">微波炉</p></a>
                            <p style="color: red;">1099</p>
                        </div>
                        <div class="small">
                            <a href="#"><img src="../img/small08.jpg" ></a>
                            <a href="#"><p style="color: gray;">压力锅</p></a>
                            <p style="color: red;">799</p>
                        </div>
                    </div>
                </div>
            </div>
                
            <!--5.广告图片-->
            <div id="">
                <img src="../img/ad.jpg" width="100%"/>
            </div>
                
            <!--6.广告图片-->
            <div id="">
                <img src="../img/footer.jpg" width="100%"/>
            </div>
                
            <!--7.友情链接和版权信息-->
            <div id="bottom">
                    <a href="#"><font>关于我们</font></a>
                    <a href="#"><font>联系我们</font></a>
                    <a href="#"><font>招贤纳士</font></a>
                    <a href="#"><font>法律声明</font></a>
                    <a href="#"><font>友情链接</font></a>
                    <a href="#"><font>支付方式</font></a>
                    <a href="#"><font>配送方式</font></a>
                    <a href="#"><font>服务声明</font></a>
                    <a href="#"><font>广告声明</font></a>
                    <p>
                        Copyright ? 2005-2016 hh商城 版权所有 
                    </p>
            </div>
        </div>
    </body>
</html>

在浏览器内运行,实现了轮播图的效果。

相关阅读:

  • A股市场具有较强估值支撑 机构看好政策受益板块 2019-04-12
  • 传奇“斗士”谢幕:只可远观李敖,不然会被他亵玩 2019-04-12
  • 社会民生--北京频道--人民网 2019-04-03
  • 荷兰音乐节巴士冲撞人群事件致1死3伤 肇事者自首 2019-03-25
  • 岳麓书院再现兴盛之貌 2019-03-24
  • 女性之声——全国妇联 2019-03-23
  • 多彩课堂熔铸红色魂——甘祖昌干部学院教学素描 2019-03-23
  • 以谁之名做事,自然就该谁负责。法庭的判决确实没有道理。共产党的形象来自于每个共产党员的表现,如果事情做得有问题,把责任往哪个人身上一推就可以事不关己高高挂起的话 2019-03-20
  • 全国政协常委、中国石油大学(北京)校长张来斌谈“贯彻五大发展理念 推进高校改革发展” 2019-03-20
  • 浙大科研团队15载攻克歼20等飞机装配系列难题 2019-03-18
  • 人民网时尚携20位明星大咖齐拜年  2019-03-18
  • 统计局:5月份经济运行主要指标呈现五大特点 2019-03-15
  • 进不了朋友圈,身份认同难。 2019-03-15
  • 朗斯卫浴向伟昌:舒服才是完美卫浴空间的必备要素 2019-03-15
  • 人为某种意识而奋斗是幸福的,获得成绩或成就更幸福。 2019-03-11
  • 345| 162| 129| 820| 329| 617| 579| 413| 479| 888| 171| 169| 804| 10| 262|