12、js——轮播图

2023-12-29 08:20:46

1、轮播图.html(图片可自己修改)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>轮播图</title>
    </head>
    <link rel="stylesheet" type="text/css" href="css/轮播图.css"/>
    <body>
        <div id="outer">
            <ul id="imgList">
                <li><img src="img/唯美1.jpg" id="imgID"/></li>
                <li><img src="img/唯美2.jpg" id="imgID"/></li>
                <li><img src="img/唯美3.jpg" id="imgID"/></li>
                <li><img src="img/唯美4.jpg" id="imgID"/></li>
                <li><img src="img/唯美5.jpg" id="imgID"/></li>
                <li><img src="img/唯美1.jpg" id="imgID"/></li>
            </ul>
            <!--<a id="left">&lt;</a>
            <a id="right">&gt;</a>-->
            <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>
    <script type="text/javascript" src="js/tools.js" ></script>
    <script type="text/javascript" src="js/轮播图.js"></script>
</html>

2、tools.js

/**
 * 用来获取指定元素的当前样式
 * 参数：
 *     1、obj 要获取样式的元素
 *     2、name 要获取的样式名
 */
function getStyle(obj,name){
    if(window.getComputedStyle){
        //正常浏览器的方式，具有getComputerStyle()方法
        return getComputedStyle(obj,null)[name];
    }else{
        //IE8方式，没有getComputerStyle()方法
        return obj.currentStyle[name];
    }
}

/**
 * 用来执行简单动画的函数
 * 参数
 *     1、obj：要执行动画的对象
 *     2、attr：要执行动画的样式        比如：left、right、width、height
 *     3、target：执行动画的目标位置
 *     4、speed：移动速度(整数向右移动，负数向左)
 *     5、callback：回调函数，这个函数会在动画执行完毕以后执行
 */
function move(obj,attr,target,speed,callback){
    //关闭上一个定时器
    clearInterval(obj.timer);
    //获取元素目前位置
    var current = parseInt(getStyle(obj,attr));
    //判断速度的正负值
    if(current > target){
        speed = -speed;
    }
    //开启一个定时器，用来执行动画效果
    //向执行动画的对象中添加一个timer属性，用来保存它自己的定时器标识
    obj.timer = setInterval(function(){
        var oldValue = parseInt(getStyle(obj,attr));
        var newValue = oldValue + speed;
        
        /**
         * 判断newValue和target的关系
         * 向左移动时需要判断newValue是否小于target
         * 向右移动时需要判断newValue是否大于target
         */
        if((speed<0 && newValue<target) || (speed > 0 && newValue>target) ){
            newValue = target;
        }
        obj.style[attr] = newValue+"px";
        
        //元素到达target停止动画
        if(newValue == target){
            //到达目的地，停止定时器
            clearInterval(obj.timer);
            //动画执行完毕，有回调函数时调用回调函数
            callback && callback();
        }
    },30);
}

3、轮播图.js

/*设置装图片ul的宽度 */
var imgList = document.getElementById("imgList");
//获取页面中所有的img标签
var imgArr = document.getElementsByTagName("img");
//设置imgList的宽度
imgList.style.width = 800*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);
        //将点击超链接的num属性赋值给index以便切换图片
        index = this.num;
        
        //修改点击a之后的样式
        setA();
        //切换图片
        /*
         * 第一张：0 0
         * 第二张：1 -800
         * 第三张：2 -1600
         */
//        imgList.style.left = -800*index+"px";
        //使用tools.js中的move函数进行动画切换图片
        move(imgList,"left",-800*index,50,function(){
            //手动切换完成后再打开自动切换的定时器
            autoChange();
        });
    };
}

//开启自动切换图片
autoChange();

//创建一个方法设置点击之后a的样式
function setA(){
    //判断当前索引是否是最后一张图片
    if(index >= imgArr.length - 1){
        index = 0;
        //此时显示最后一张图片，而最后一张图片和第一张图片是一模一样的
        //通过css将最后一张切换成第一张
        imgList.style.left = 0;
    }
    //遍历所有a，并将它们的背景色设置 为 红色
    for(var i=0;i<allA.length;i++){
        //因为css中有默认红色，这里设置为空串是为了防止a:hover之后颜色失效
        allA[i].style.backgroundColor = "";
    }
    //将选中的a设置为黑色
    allA[index].style.backgroundColor = "black";
};


var timer;
//创建一个函数用来开启自动切换图片
function autoChange(){
    //开启一个定时器，用来定时切换图片
    timer = setInterval(function(){
        //使索引自增
        index++;
        index %= imgArr.length;
        //执行动画，切换图片
        move(imgList,"left",-800*index,50,function(){
            //修改导航点
            setA();
        });
    },3000);
}

4、轮播图.css

*{
    margin: 0;
    padding: 0;
}

#outer{
    width: 800px;
    height: 500px;
    border: 1px solid red;
    margin: 100px auto;
    position: relative;
    overflow: hidden;
    cursor:pointer;
}

#imgList{
    list-style: none;
    /*开启绝对定位*/
    position: absolute;
}

#imgList li{
    float: left;
}
#outer img{
    width: 800px;
    height: 500px;
}
/*设置导航按钮*/
#navDiv{
    position: absolute;
    bottom: 20px;
}
#navDiv a{
    /*开启浮动*/
    float: left;
    /*开启浮动后行内元素则变为了块元素，可以设置宽高*/
    width: 25px;
    height: 25px;
    background-color: red;
    /*设置左右边距*/
    margin: 0 5px;
    /*设置透明*/
    opacity: 0.5;
    /*兼容IE8透明*/
    filter: alpha(opacity=50);
}

#navDiv a:hover{
    background-color: black;
}

码农公寓

1、轮播图.html(图片可自己修改)

2、tools.js

3、轮播图.js

4、轮播图.css

相关文章