JS实现banner图轮换

最新推荐文章于 2020-10-22 13:06:45 发布

weixin_30763397

最新推荐文章于 2020-10-22 13:06:45 发布

阅读量119

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Lv2017/p/6720441.html

版权

方法一：

<!DOCTYPE html>
<html>
　　<head>
　　　　<meta charset="UTF-8">
　　　　<title></title>
　　</head>
　　<body>

　　　　<div>
　　　　　　<div>
　　　　　　　　<img src="../img/110.jpg" width="970" height="280" id="img" /> 
　　　　　　</div>
　　　　</div>

　　<script type="text/javascript"> 
　　　　var curIndex=0; 
　　　　var arr=new Array(); 
　　　　arr[0]="../img/111.jpg"; 
　　　　arr[1]="../img/112.jpg"; 
　　　　arr[2]="../img/110.jpg"; 

　　　　setInterval(function(){ 
　　　　　　var img=document.getElementById("img"); 
　　　　　　if (curIndex==arr.length-1) { 
　　　　　　　　curIndex=0; 
　　　　　　} else { 
　　　　　　　　curIndex+=1; 
　　　　　　} 
　　　　　　img.src=arr[curIndex]; 
　　　　} ,3000); 

</script> 
</body>
</html>

方法二：

<!DOCTYPE html>
<html>
　　<head>
　　　　<meta charset="UTF-8">
　　　　<title></title>

　　　　<style type="text/css">
　　　　　　*{
　　　　　　　　padding: 0px;
　　　　　　　　margin: 0px;
　　　　　　}

　　　　　　#banner{
　　　　　　　　width: 100%;
　　　　　　　　overflow: hidden;
　　　　　　　　white-space: nowrap;
　　　　　　　　position: relative;
　　　　　　}

　　　　　　#banner #inside{
　　　　　　　　width: 9600px;
　　　　　　　　position: relative;
　　　　　　　　left: 50%;
　　　　　　　　margin-left: -960px;
　　　　　　　　transition: all 1s ease;
　　　　　　}

　　　　　　#banner img{
　　　　　　　　width: 1920px;
　　　　　　}

　　　　　　#bannerNum{
　　　　　　　　padding: 0px;
　　　　　　　　list-style: none;
　　　　　　　　overflow: hidden;
　　　　　　　　width: 160px;
　　　　　　　　position: absolute;
　　　　　　　　bottom: 30px;
　　　　　　　　right: 50px;
　　　　　　}

　　　　　　#bannerNum li{
　　　　　　　　width: 30px;
　　　　　　　　height: 30px;
　　　　　　　　background-color: white;
　　　　　　　　text-align: center;
　　　　　　　　line-height: 30px;
　　　　　　　　margin: 0px 5px;
　　　　　　　　float: left;
　　　　　　　　cursor: pointer;
　　　　　　}

</style>

<script>
　　var num = 1;
　　var inside;
　　window.onload = function(){

　　　　inside = document.getElementById("inside");

　　　　var interval = setInterval(function(){
　　　　　　inside.style.transition = "all 1s ease";
　　　　　　num++;
　　　　　　switch (num){
　　　　　　　　case 1:
　　　　　　　　　　inside.style.transition = "none";
　　　　　　　　　　inside.style.marginLeft = (-960)+"px";
　　　　　　　　break;
　　　　　　　　case 2:
　　　　　　　　　　inside.style.marginLeft = (-960-1920)+"px";
　　　　　　　　break;
　　　　　　　　case 3:
　　　　　　　　　　inside.style.marginLeft = (-960-1920*2)+"px";
　　　　　　　　break;
　　　　　　　　case 4:
　　　　　　　　　　inside.style.marginLeft = (-960-1920*3)+"px";
　　　　　　　　break;
　　　　　　　　case 5:
　　　　　　　　　　inside.style.marginLeft = (-960-1920*4)+"px";
　　　　　　　　　　num = 0;
　　　　　　　　break;
　　　　　　　　default:
　　　　　　　　break;
　　　　　　}
　　　　},2000);
　　}

　　function changeBanner(num1){
　　　　inside.style.transition = "none";
　　　　switch (num1){
　　　　　　case 1:
　　　　　　　　inside.style.marginLeft = (-960)+"px";
　　　　　　break;
　　　　　　case 2:
　　　　　　　　inside.style.marginLeft = (-960-1920)+"px";
　　　　　　break;
　　　　　　case 3:
　　　　　　　　inside.style.marginLeft = (-960-1920*2)+"px";
　　　　　　break;
　　　　　　case 4:
　　　　　　　　inside.style.marginLeft = (-960-1920*3)+"px";
　　　　　　break;
　　　　　　default:
　　　　　　break;
　　　　}

　　　　num = num1-1;

　　}


</script>

</head>

<body>

　　<div id="banner">
　　　　<div id="inside"><img src="../img/110.jpg" id="img1" /><img src="../img/111.jpg" id="img2" /><img src="../img/112.jpg" id="img3" /><img src="../img/111.jpg" id="img4" /><img src="../img/110.jpg" id="img5" />
　　　　</div>

　　　　<ul id="bannerNum">
　　　　　　<li onclick="changeBanner(1)">1</li>
　　　　　　<li onclick="changeBanner(2)">2</li>
　　　　　　<li onclick="changeBanner(3)">3</li>
　　　　　　<li onclick="changeBanner(4)">4</li>
　　　　</ul>
　　</div>

</body>
</html>

转载于:https://www.cnblogs.com/Lv2017/p/6720441.html

weixin_30763397

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS实现banner图轮换

方法一：<!DOCTYPE html><html>　　<head>　　　　<meta charset="UTF-8">　　　　<title></title>　　</head>　　<body>　　　　<div>　　　　　　<div>...
复制链接

扫一扫