博客

简单HTML、CSS、JS实现的banner横幅轮播效果

  • Post author:
  • Post category:其他


直接上代码吧

index.html

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>哦喔</title>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>

<link rel="stylesheet" href="css/style.css">
<script>
$(document).ready(function function_name() {
                imageAutoChange()
            })
</script>
<style type="text/css">
	html,body{
		height: 100%;
	}
	body{
		margin: 0;
	}
</style>
</head>

<body >
    <div id="main_div">
    	
        <ul id="main_div_img" >
       		
            <li><img src="images/g1.jpg" width="100%" height="600" /></li>
            <li><img src="images/g2.jpg" width="100%" height="600" /></li>
            <li><img src="images/g3.jpg" width="100%" height="600" /></li>
            <li><img src="images/g4.jpg" width="100%" height="600" /></li>
            <li><img src="images/g5.jpg" width="100%" height="600" /></li>
            <li><img src="images/g6.jpg" width="100%" height="600" /></li>
        </ul>

        <ul id="main_div_num">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </div>
        
</body>
</html>

index.js

function imageAutoChange() {
    /*获取图片和索引的数组对象*/
    var $imgs = $("#main_div_img li");
    var $nums = $("#main_div_num li");

    var isStop = false;
    var index = 0;

    $nums.eq(index).addClass("numsover").siblings().removeClass("numsover");
    $imgs.eq(index).show();

    /*鼠标悬停在数字上的事件处理*/
    $nums.mouseover(function() {
        isStop = true;
        /*先把数字的背景改了*/
        $(this).addClass("numsover").siblings().removeClass("numsover");

        /*图片的索引和数字的索引是对应的，所以获取当前的数字的索引就可以获得图片，从而对图片进行操作处理*/
        index = $nums.index(this);
        $imgs.eq(index).show("slow");
        $imgs.eq(index).siblings().hide("slow");
    }).mouseout(function() {
        isStop = false
    });
    /*设置循环*/
    setInterval(function() {
        if(isStop) return;
        if(index >= 6) index = -1;
        index++;

        $nums.eq(index).addClass("numsover").siblings().removeClass("numsover");
        $imgs.eq(index).show("slow").siblings().hide("slow");

    }, 2000);



}

style.css

#main_div{  
    width:100%;  
    height:600px;  
    position:absolute;  
}  
/*取消小圆点*/  
#main_div li{  
    list-style:none;  
}  
#main_div_img {  
	margin:0; 
	padding: 0px;
}  

#main_div_img li{  
    display:none; 
	margin:0; 
	padding: 0px;
}  

/*角落显示数字的ul*/  
#main_div_num{  
    overflow:hidden;  
    position:absolute;  
    bottom:10px;  
    right:10px;  
    color:#FFF;  
}  
/*数字的浮动*/  
#main_div_num li{  
    border:#FFF solid 1px;  
    float:left;  
    margin:0px 5px;  
    padding:3px 10px;  
}  
.numsover{  
    background-color:#F08080;  
    color:#F00;  
}  

.numsout{}

执行效果


版权声明：本文为ovejur原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。