轮播图效果

最新推荐文章于 2021-08-08 08:45:19 发布

weixin_41102688

最新推荐文章于 2021-08-08 08:45:19 发布

阅读量88

点赞数

文章标签： js

本文链接：https://blog.csdn.net/weixin_41102688/article/details/107694870

版权

轮播图效果制作

<!DOCTYPE html>
  <html>
     <head>
     	  <meta charset="utf-8">
     	  <title>轮播图练习</title>
     	  <style type="text/css">
     	  	*{
     	  		margin: 0;
     	  		padding:0;
     	  	}
     	  	/*
            设置outer的样式
     	  	*/
     	  	#outer{
     	  		width:320px;
     	  		height: 400px;
     	  		margin: 50px auto;
     	  		background-color: yellow;
     	  		padding: 10px 0;
              position: relative;
              /*裁剪溢出的内容*/
             overflow: hidden;
     	  	}
     	  	/*设置imglist*/
           #imgList{
              /*去除项目符号*/
              list-style: none;
            /*  width: 1600px;*/
            position: absolute;
            /*每向左移动320px*/
            left: 0px;
           }
           /*设置图片的Li*/
           #imgList li{
              /*设置图片的浮动*/
              float: left;
              margin:0 10px;
           }
           /*设置导航按钮*/
           #navDiv{
              position: absolute;
              bottom:15px;
           }
           #navDiv a{
              float: left;
              width:15px;
              height: 15px;
              background-color: red;
              margin:0 5px;
              /*设置透明*/
              opacity: 0.5;
              /*兼容ie8*/
              filter:alpha(opacity=50);
           }
           #navDiv a:hover{
              background-color: black;
           }     	  	
     	  </style>
          <script type="text/javascript" src="js/tools.js"></script>
          <script type="text/javascript">
             window.onload = function(){
              //设置imgList宽度
              //获取imgList
              var imgList = document.getElementById("imgList");
              //获取页面中所有的img标签
              var imgArr = document.getElementsByTagName("img");
              //设置imgList的宽度
              imgList.style.width = 320*imgArr.length+"px";

              // 设置导航按钮居中
              //获取navDiv
              var navDiv = document.getElementById("navDiv");
              //获取outer
              var outer = document.getElementById("outer");
              //设置navDiv的left值
              navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px";
              
              //默认显示图片的索引
             var index = 0;
             //获取所有a
             var allA = document.getElementsByTagName("a");
             // //设置默认选中地效果
             allA[index].style.backgroundColor = "black";

             /*
              点击超链接切换到指定图片
             */
             //为所有的超链接绑定单击响应函数
             for(var i = 0;i<allA.length ; i++){
              //为每一个超链接都添加一个num属性
              allA[i].num = i;

              //为超链接绑定单击响应函数
              allA[i].onclick = function(){
                //关闭定时器
                clearInterval(timer);
               //获取点击超链接的索引,并将其设置为index
               index = this.num;

               //切换图片
               // imgList.style.left = -320*index +"px";
                  setA();

                //使用move函数来切换图片
                move(imgList,"left",-320*index,20,function(){
                      //动画执行完毕，开启自动切换
                      autoChange();
                });
               
               //修改正在选中的a          
              };
             }
             //创建一个函数,自动切换图片
             autoChange();



             //创建一个方法用来设置选中a
             function setA(){
              //判断当前索引是否最后一张图片
              if(index >= imgArr.length-1){
                //将index设置为0
                index = 0;

                //此时显示的最后一张图片，而最后一张图片和第一张是一模一样，通过css将最后一张切换成第一张
                imgList.style.left = 0;


              }
                //遍历所有a ，并将它们的背景颜色设置为红色
                for(var i=0 ; i<allA.length ; i++){
                    allA[i].style.backgroundColor = "";
                }

                //将选中的a设置为黑色
                allA[index].style.backgroundColor = "black";
             };
             var timer;
             //创建一个函数，开启自动切换
             function autoChange(){
                 //开启定时器，自动切换图片
                 timer = setInterval(function(){
                   index++;
                   //判断index值
                   index %= imgArr.length;
             move(imgList,"left",-320*index,20,function(){
                    //修改导航按钮
                    setA();
                });    
                 },3000);
             }
         };
             

          </script>
     </head>
     <body>
     	<!-- 创建一个外部div，来作为大的容器 -->
     	<div id="outer">
     		<!-- 创建一个ul 用于放置图片 -->
     		<ul id="imgList">
     			<li>
     				<img src="img/1.jpg"/>
     			</li>
     			<li>
     				<img src="img/2.jpg"/>
     			</li>
     			<li>
     				<img src="img/3.jpg"/>
     			</li>
     			<li>
     				<img src="img/4.jpg"/>
     			</li>
              <li>
                 <img src="img/5.jpg"/>
              </li>
          <li>
            <img src="img/1.jpg"/>
          </li>

     		</ul>
           <!-- 创建导航按钮 -->
           <div id="navDiv">
              <a href="javascript:;"></a>
              <a href="javascript:;"></a>
              <a href="javascript:;"></a>
              <a href="javascript:;"></a>
              <a href="javascript:;"></a>
           </div>
     	</div>
     </body>
  </html>

注意：调用move函数：可以引入外部文件
//尝试创建一个可以执行简单动画的函数
/*

参数：
obj:要执行动画的对象
attr:要执行动画的样式，比如：left top width height
target:执行动画的目标位置
speed:移动的速度(正数向右移动，负数向左移动)
callback:回调函数，这个函数将会在动画执行完毕以后执行
*/
function move(obj, attr, target, speed, callback) {
//关闭上一个定时器
clearInterval(obj.timer);

//获取元素目前的位置
var current = parseInt(getStyle(obj, attr));

//判断速度的正负值
//如果从0 向 800移动，则speed为正
//如果从800向0移动，则speed为负
if(current > target) {
//此时速度应为负值
speed = -speed;
}