js轮播特效

Posted 2020-07-08 hq金水

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js轮播特效相关的知识，希望对你有一定的参考价值。

1、自动轮播

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片轮播--无限轮播</title>
<style>
#tuijian{
    border:1px #000000 solid;
    width:640px;
    height:500px;
    background-repeat:no-repeat;
    left:300px;
    top: 200px;
    position: absolute;
    background-image:url(x.jpg);
    background-position: center;
    background-size: contain;
}
</style>
</head>

<body>
<div id="tuijian"></div>
</body>

<script>
var jpg =new Array();
jpg[0]="url(c.jpg)";
jpg[1]="url(d.jpg)";
jpg[2]="url(x.jpg)";
jpg[3]="url(z.jpg)";
var tjimg = document.getElementById("tuijian");
var xb=0;
function huan()
{xb++;    
if(xb == jpg.length)
{
    xb=0;
}
tjimg.style.backgroundImage=jpg[xb]; 
window.setTimeout("huan()",2000); //实现无限循环图片，即轮播效果
}
window.setTimeout("huan()",2000);//调用函数/方法
</script>

计算机按顺序依次读取程序代码，执行代码;

编写程序代码有两种思维方式，顺向/逆向。

2、自动、手动切换轮播

body代码:

<div id="tuijian"> 
<div class="pages" id="p1" onclick="dodo(-1)"></div>            
<div class="pages" id="p2" onclick="dodo(1)"></div>
</div>


<script>
var jpg =new Array();
jpg[0]="url(qh/a.jpg)"
jpg[1]="url(qh/sy.jpg)";
jpg[2]="url(qh/x.jpg)";
jpg[3]="url(qh/x.jpg)";
var tjimg = document.getElementById("tuijian");
var xb=0;var n=0;
function huan()
{xb++;    
if(xb == jpg.length)
{
    xb=0;
}        
tjimg.style.backgroundImage=jpg[xb];    
if(n==0)    
{
    window.setTimeout("huan()",3000);}    
}
//手动
function dodo(m)
{    n=1;
    xb = xb+m;    
    if(xb < 0)    
    {xb = jpg.length-1;} 
    else if(xb >= jpg.length)
    {xb = 0;}
    tjimg.style.backgroundImage=jpg[xb];
}
window.setTimeout("huan()",3000);
</script>

css代码：

#tuijian{
    width: 760px;
    height: 400px;
    left:300px;
    top: 200px;
    position: absolute;
    background-image:url(qh/0da5b6fd5266d016232cd2b3902bd40734fa35f5.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
#p1{float:left;    
    margin:170px 0px 0px 10px;
    position:absolute;
    background-image:url(qh/%E5%B7%A6.png);
    background-position:center;}
#p2{
    background-image:url(qh/%E5%8F%B3.png);
    margin-top: 170px;
    position: absolute;
    float: right;
    right:10px;
    }

我认为，努力，就够了！！！

以上是关于js轮播特效的主要内容，如果未能解决你的问题，请参考以下文章