图片轮播原理

<!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" xml:lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>网页标题</title>
    <meta name="keywords" content="关键字列表" />
    <meta name="description" content="网页描述" />
    <link rel="stylesheet" type="text/css" href="" />
    <style type="text/css">
        *{margin:0;padding:0;}
        body{color:#333;font-size:12px;line-height:20px;}
        ul,li{list-style:none;}
        #content{margin:0 auto;width:540px;}
        #content .scroll_top{width:540px;height:51px;background:url(images/dd_scroll_top.gif) no-repeat;}
        #content .scroll_mid{
            width:533px;
            padding:5px 0 5px 5px;
            border-left:1px solid #d6d5d6;
            border-right:1px solid #d6d5d6;
            background:#f2f2f3;
        }
        #scroll_number{
            float:right;
            padding-right:10px;
        }
        #scroll_number li{
            margin-top:5px;
            width:13px;
            height:13px;
            line-height:16px;
            border:1px solid #999;
            cursor:pointer;
            text-align:center;
        }
        #content .scroll_end{
            width:540px;
            height:8px;
            background:url(images/dd_scroll_end.gif) no-repeat;
            margin-bottom:10px;
        }
        .scroll_number_out{
        }
        .scroll_number_over{
            background-color:#f00;
            color:#FFF;
        }
    </style>
    <script type="text/javascript">
        /*  思路分析：
         1、开启一个定时器
         2、定时器函数主要是用来 执行图片轮播的效果
         3、当鼠标放在图片上面时 ，图片就停止了轮播的效果 清除了定时器
         4、当鼠标离开图片上面时，图片继续在执行轮播的效果  重新开启了定时器功能
         5、当鼠标放在li标签上面时，图片就停止了轮播的效果 清除了定时器
         6、当鼠标放在li标签上面时，还会显示li标签上面对应的数字的图片
         7、当鼠标离开li标签上面时，图片就会继续开始轮播的效果  重新开启了定时器功能
         8、li标签上面的高亮效果，它是随着图片滚动而滚动。
         我们先要获取到所有的li标签

         */
        //当页面加载完成后
        var imgObj;
        var timer;
        var lis_obj;
        var lis_length;
        window.onload = function(){
            //1、开启一个定时器
            timer = setInterval("scrollImg()",1000);
            //获取img标签对象
            imgObj = document.getElementById("dd_scroll");
            //先获取到id=scroll_number这个标签对象
            var divObj = document.getElementById("scroll_number");
            lis_obj = divObj.getElementsByTagName('li');
            lis_length = lis_obj.length


        }

        //定义定时器函数 定时器函数主要是用来执行图片轮播的效果
        //显示哪一张图片是由变量n来决定
        //当n=1的时候 就应该给第一个li标签设置class属性值
        //当n=2的时候 就应该给第二个li标签设置class属性值
        //变量n 是从 1开始  1到6
        //但是li的下标是从0开始  0到5
        //现在变量n与li标签对象的下标之间的变量是 n-1
        var n = 2;
        function scrollImg(){
            //还存在一个问题 高亮显示只需要显示当前的 不需要所有的都显示
            //先将所有的li标签上面的className的值清空
            for(var i=0;i<lis_length;i++){
                lis_obj[i].className = "";
            }
            //给当前的li标签对象设置class属性值
            lis_obj[n-1].className = "scroll_number_over";
            imgObj.src = "images/dd_scroll_"+n+".jpg";
            n++;
            //判断n的值 如果大于6就让n=1
            if(n > 6){
                n = 1;
            }
        }

        //3、当鼠标放在图片上面时 ，图片就停止了轮播的效果 清除了定时器
        function stopScroll(imgNumber){
            if(imgNumber){
                //现在需要将imgNumber的值赋值给变量n
                n = imgNumber;
                //这里要马上就要调用scrollImg()这个函数
                scrollImg();
            }

            clearInterval(timer);
        }

        //4.当鼠标离开图片上面时，图片继续在执行轮播的效果  重新开启了定时器功能
        function goon(){
            timer = setInterval("scrollImg()",1000);
        }



    </script>
</head>
<body>
<div id="content">
    <!--轮换显示的横幅广告图片-->
    <div class="scroll_top"></div>
    <div class="scroll_mid">
        <img src="images/dd_scroll_1.jpg" alt="轮换显示的图片广告" id="dd_scroll" onmouseover="stopScroll()" onmouseout="goon()"/>
        <div id="scroll_number">
            <ul>
                <li class="scroll_number_over" onmouseover="stopScroll(1)"  onmouseout="goon()">1</li>
                <li   onmouseover="stopScroll(2)" onmouseout="goon()">2</li>
                <li  onmouseover="stopScroll(3)" onmouseout="goon()">3</li>
                <li  onmouseover="stopScroll(4)" onmouseout="goon()">4</li>
                <li  onmouseover="stopScroll(5)" onmouseout="goon()">5</li>
                <li  onmouseover="stopScroll(6)" onmouseout="goon()">6</li>
            </ul>
        </div>
    </div>
    <div class="scroll_end"></div>
</div>
</body>
</html>

这里写图片描述

/*  思路分析：
         1、开启一个定时器
         2、定时器函数主要是用来 执行图片轮播的效果
         3、当鼠标放在图片上面时 ，图片就停止了轮播的效果 清除了定时器
         4、当鼠标离开图片上面时，图片继续在执行轮播的效果  重新开启了定时器功能
         5、当鼠标放在li标签上面时，图片就停止了轮播的效果 清除了定时器
         6、当鼠标放在li标签上面时，还会显示li标签上面对应的数字的图片
         7、当鼠标离开li标签上面时，图片就会继续开始轮播的效果  重新开启了定时器功能
         8、li标签上面的高亮效果，它是随着图片滚动而滚动。
         我们先要获取到所有的li标签

*/