js实现图片轮播简单案例

偏执的太偏执、 2021-09-22 15:26 384阅读 0赞

<%@ page language="java" contentType="text/html; charset=utf-8"  
    pageEncoding="utf-8"%>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<title>轮播效果</title>  
</head>  
<script src="./jquery-1.10.1.min.js"></script>  
<style type="text/css">

</style>  
<body>

<div class="wrapper">  
    <div id="focus">  
    <ul>  
        <li>      
            <a href="\#" target="\_blank"><img src="images/img06.png" alt="" id="pic"/></a>  
              
        </li>  
        <li style="cursor:pointer" ><div class="prebtn" οnclick="showPre()">上一个</div>  
            <div class="nextbtn" οnclick="showNext()">下一个</div></li>  
          
    </ul>  
    </div>  
</div>  
</body>  
<script type="text/JavaScript">  
    var picsArr=new Array();  
    picsArr\[0\]="images/img01.png";  
    picsArr\[1\]="images/img02.png";  
    picsArr\[2\]="images/img03.png";  
    picsArr\[3\]="images/img04.png";  
    picsArr\[4\]="images/img05.png";  
    //alert("小黎明晚上好啊");  
    var timer,index=0;  
    window.οnlοad=showPic;  
      
    function showPic()\{  
        document.getElementById("pic").src=picsArr\[index\];  
        if(index<(picsArr-1))  
            index++;  
        else  
            index=(index+1)%picsArr.length;  
        timer=setTimeout("showPic()",2000);  
    \}  
      
    function showPrepic()\{  
        if(index>0)\{  
            index--;   
        \}else  
            index=4;  
        document.getElementById("pic").src=picsArr\[index\];  
        timer=setTimeout("showPrepic()",2000);  
    \}  
    function showNext()\{  
        clearTimeout(timer);  
        showPic();  
    \}  
    function showPre()\{  
        clearTimeout(timer);  
        showPrepic();  
    \}  
</script>  
</html>

--------------------

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpcXo2NjY_size_16_color_FFFFFF_t_70][]

--------------------

希望大家喜欢！！！！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpcXo2NjY_size_16_color_FFFFFF_t_70]: /images/20210920/cf75a7fb2e824de48acea9e414aa9fb1.png