Html、js图片轮播代码
现在基本上每个网站都有一个自动轮播的banner广告图，在没有任何按钮的情况下，图片在规定的时间内进行自动切换。下面是html、js图片轮播代码详情。
代码效果图实例：
第一秒：
第二秒：
第三秒：
详细代码如下：
Html代码部分：
<body>
    <ul class="banner">
        <li><img src="images/1.jpg"></li>
        <li><img src="images/2.jpg"></li>
        <li><img src="images/3.jpg"></li>
    </ul>
</body>
Css代码部分：
<style type="text/css">
  ul,li{margin:0px;padding:0px}
  li{list-style:none}
  .banner{width:630px;height:250px;margin:100px auto;overflow:hidden;cursor:pointer}
</style>
Javascript代码部分：
<script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
    $(function(){
        var timer=setInterval(function(){
            if($(".banner li:last").is(":hidden")){
                $(".banner li:visible").addClass("on");
                $(js实现轮播图最简代码".banner li[class=on]").next().fadeIn("slow");
                $(".banner li[class=on]").hide().removeClass("on");
            }else{
                $(".banner li:last").hide();
                $(".banner li:first").fadeIn("slow");
            }
        },2000)
        $(".banner li").hover(function(){
            clearInterval(timer);
        },function(){
            timer=setInterval(function(){
            if($(".banner li:last").is(":hidden")){
                $(".banner li:visible").addClass("on");
                $(".banner li[class=on]").next().fadeIn("slow");
                $(".banner li[class=on]").hide().removeClass("on");
            }else{
                $(".banner li:last").hide();
                $(".banner li:first").fadeIn("slow");
            }
        },2000)
        })
    })
  </script>
【Jquery.js】  是一个jquery库，只要百度一下搜索“jquery”下载这个文件就行。
以上效果中所用的图片可以根据自己的情况来进行替换，只要代码没问题，就肯定有效果的。赵一鸣随笔博客中有更多的javascript效果写法的高清视频，搜索一下就能到。
如果有兴趣，可以去大型网站看一下这种效果，特别是商城类网站，他们做的都很漂亮，例如聚美优品、淘宝、天猫都有，但是以上所写的代码是做这个效果最简单实用的，可以参考！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。