banner轮播图片的设计【jquery】-优快云博客

本文介绍使用jQuery制作简易Banner轮播图的方法。通过设置定时器自动切换不同图片的位置实现轮播效果。此示例提供了基本的轮播逻辑，适用于初学者学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

。。

只是展示jquery如何做出banner轮转，细节处为做好。

<!DOCTYPE HTML>  
<html>  
<head>  
   	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1" />
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css" >
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap-theme.min.css" >

    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script src="http://apps.bdimg.com/libs/jquery.cookie/1.4.1/jquery.cookie.js"></script>

    <script src="http://malsup.github.io/jquery.form.js"></script>
      
    <script>  
        window.setInterval(roll, 1000);   
        var cnt = 0;  
        function roll()  
        {  
            if(cnt==0)  
                $(".banner_content").animate({left:"-100%"});  
            else if(cnt==1)  
                $(".banner_content").animate({left:"-200%"});  
            else if(cnt==2)  
                $(".banner_content").animate({left:"-300%"});  
            else if(cnt==3)  
                $(".banner_content").animate({left:"0%"});  
          
            cnt++;  
            if(cnt>=4)  
                cnt = 0;  
        }  
    </script>  
    <style type="text/css">  
        .banner_holder{  
            height:200px;  
            width:600px;  
            overflow:hidden;  
            position:relative;  
			margin:auto;
        }  
        .banner_content{  
            height:200px;  
            width:400%;  
            position:absolute;  
        }  
        img{  
            float:left;  
        }  
    </style>  
  
    <title>Home Page</title>  
</head>  
  
<body>  
    <div class="banner_holder">  
        <div class="banner_content">  
            <img src="http://pic4.nipic.com/20091217/3885730_124701000519_2.jpg" height="200px" width="25%" id="banner_img1" />  
            <img src="http://n.sinaimg.cn/default/1_img/upload/3933d981/w800h521/20171212/kwEX-fypnsip9310109.jpg" height="200px" width="25%" id="banner_img2" />  
            <img src="http://n.sinaimg.cn/default/1_img/upload/3933d981/w800h517/20171212/VBAU-fypnsip9310475.jpg" height="200px" width="25%" id="banner_img3" />  
            <img src="http://pic4.nipic.com/20091217/3885730_124701000519_2.jpg" height="200px" width="25%" id="banner_img4" />  
        </div>  
    </div>  
</body>  
</html>

。。。

。。

转载于:https://www.cnblogs.com/dongfangchun/p/8043283.html