一个轮播的写法

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style>
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
address,cite,dfn,em,var{font-style:normal;}
code,kbd,pre,samp{font-family:courier new,courier,monospace;}
ul,ol{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:none;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
legend{color:#000;}
fieldset,img{border:0;}
button,input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
.clear{clear: both;float: none;height: 0;overflow: hidden;}
 
#container{width: 600px; height: 400px; overflow: hidden; position: relative; }
#list{width: 4200px; height: 400px; position: absolute; z-index: 1;}
#list img{float: left;}
#buttons { position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 250px;}
#buttons span { cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px;}
#buttons .on {  background: orangered;}
.arrow { cursor: pointer; display: none; line-height: 39px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 40px;  position: absolute; z-index: 2; top: 180px; background-color: RGBA(0,0,0,.3); color: #fff;}
.arrow:hover { background-color: RGBA(0,0,0,.7);}
#container:hover .arrow { display: block;}
#prev { left: 20px;}
#next { right: 20px;}
</style> 
</head> 
<body>
    <div id="container">
        <div id="list" style="left: -600px;">
            <img src="images/5.jpg" alt="5"/>         
            <img src="images/1.jpg" alt="1"/>
            <img src="images/2.jpg" alt="2"/>
            <img src="images/3.jpg" alt="3"/>
            <img src="images/4.jpg" alt="4"/>
            <img src="images/5.jpg" alt="5"/>
            <img src="images/1.jpg" alt="1"/>
             
        </div>
        <div id="buttons">
            <span index="1" class="on"></span>
            <span index="2"></span>
            <span index="3"></span>
            <span index="4"></span>
            <span index="5"></span>
        </div>
        <a href="javascript:;" id="prev" class="arrow"><</a>
        <a href="javascript:;" id="next" class="arrow">></a>
    </div>
    <script type="text/javascript">
        //在页面加载完后立即执行多个函数完美方案。
        function addloadEvent(func){
            var oldonload=window.onload;
            if(typeof window.onload !="function"){
                window.onload=func;
            }
            else{
                window.onload=function(){
                    if(oldonload){
                       oldonload(); 
                    }
                    func();
                }
            }
        }
        //在页面加载完后立即执行多个函数完美方案over。
        lbt();
 
        //轮播图动画切换原理
         
        function lbt(){
            var container=document.getElementById("container");
            var prev=document.getElementById("prev");
            var next=document.getElementById("next");
            var list=document.getElementById("list");
            var buttons=document.getElementById("buttons").getElementsByTagName("span");
            var imgs=list.getElementsByTagName("img");
            var index=1;
            var animated=false;
            var timer;
 
            //当前图片轮播的圆点变色显示，原理：index数值是跟随list滑动次数递增的，第一次index=1，所以第一个button的索引值就是0。
            //for循环是添加on样式之前要清空之前的on。
            function showButton(){
                for(var i=0;i<buttons.length;i++){
                    if(buttons[i].className=="on"){
                        buttons[i].className="";
                        break;
                    }
                }
                buttons[index-1].className="on";
            }
            //圆点变色显示 结束。
 
 
 
            function animate(offset){
                animated=true;
                var newLeft=parseInt(list.style.left)+offset;//当前的偏移量+下一次的偏移量=新的偏移量
                var time=300;//位移总时间
                var interval=10;//位移间隔时间
                //动画效果自定义公式： 每次位移的距离=单次偏移距离/位移次数
                var speed=offset/(time/interval);
                //递归函数 直到不满足条件（跳到辅助图）
                //递归就是把600偏移量分为多次完成偏移
                function go(){
                    //speed<0 并且 当前偏移量>下一次偏移量 就是向左偏移 || 反之向右偏移   
                    if ((speed<0 &&parseInt(list.style.left)>newLeft) || (speed>0 &&parseInt(list.style.left)<newLeft)) {
                        list.style.left=parseInt(list.style.left)+speed+"px";//每次位移的值
                        setTimeout(go,interval);//10毫秒再次调用go函数
                    }else{
                        animated=false;
                        list.style.left=newLeft+"px";//当前的偏移值=新的偏移值
 
                        if(newLeft>-600){
                            list.style.left=-3000+"px";
                        }
                        if (newLeft<-3000){
                            list.style.left=-600+"px";
                        }
                    }
                }
                go();
 
                 
            }
            //自动播放3秒执行一次next.onclick
            function play(){
                timer=setInterval(function(){
                    next.onclick();
                },3000);
            }
            function stop(){
                clearInterval(timer);
            }
            //执行所有函数
            next.onclick=function(){
                if(index==5){
                    index=1;
                }else{
                    index+=1;
                }
 
                showButton();
                if(!animated){
                    animate(-600);
                }
                 
            }
            //执行所有函数
            prev.onclick=function(){
                if(index==1){
                    index=5;
                }else{
                    index-=1;
                }
                showButton();
                if(!animated){
                    animate(600);
                }
            }
            //点击圆点按钮 偏移
            for(var i=0;i<buttons.length;i++){
                buttons[i].onclick=function(){
                    if(this.className=="on"){
                        return;
                    }
                    //要点击的index属性的值 转换为整数
                    var myIndex=parseInt(this.getAttribute("index"));
                    //偏移量=-600*（要点击的位置-当前所在的位置），当前的位置就是index循环所得
                    var os=-600*(myIndex-index);
                    //切换完成后，把点击的index位置变成当前的index位置                 
                    index=myIndex;
                    showButton();
                    if(!animated){
                        animate(os);
                    }
 
                }
            }
 
 
 
            container.onmouseover=stop;
            container.onmouseout=play;
 
            play();
 
        }
         
 
    </script>
</body> 
</html> 