• 李生云的专栏作者中国国家地理网 2019-06-15
  • 软件社交功能须设红线 2019-06-15
  • 省国资委关于刘爱兵等具备正高级工程师吴向亚等具备高级工程师专业技术资格的通知 2019-06-13
  • 网红健康险——红在哪 险在哪 2019-06-13
  • 屈原作为一个浪漫诗人的确才华横溢,值得称道,但是他反对统一就得批评。是吧小作? 2019-06-12
  • 《国家人文历史》2018年第10期(总第203期)封面及目录 2019-06-11
  • 如何保持胃肠道健康年轻态 来听听这位消化科医生球迷的经验 2019-06-11
  • 命运:乌镇演义宣示网络新时代 2019-06-10
  • 地表最凶残火力 解放军155mm卡车炮曝光 2019-06-10
  • 瑞典南部城市发生枪击案致5人伤 警方:与恐袭无关 2019-06-09
  • 学习贯彻习近平总书记对脱贫攻坚工作重要指示精神 2019-06-09
  • 8周年!全新米聊开启内测:优化聊天新增连麦小游戏 2019-06-08
  • 人民网旅游3·15投诉平台--旅游频道 2019-06-07
  • “退休的违纪违法者”难逃终身追责 2019-06-07
  • 中共山西省委组织部公示 2019-06-06
  • ?
    欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
    您的位置:香港买马资料大全 > HTML >

    HTML基础必学列表

    banner图片轮播—HTML

    香港买马资料大全 www.ziixf.tw  

    在各种浏览端口泛滥的如今,轮播图(对,就是那种滑来滑去的图片)随处可见,网店尤甚。千峰整理了以下这些代码,使用HTML实现图片轮播功能,有兴趣的小伙伴可以试试看。

    banner图片轮播—HTML

    需要软件开发相关资料的同学请关注我哦!

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title></title>

    <style>

    * { padding: 0; margin: 0; list-style: none; }

    /********************************************/

    .banner { width: 1920px; height: 500px; overflow: hidden; position: relative; margin-left: auto; margin-right: auto; }

    .banner .img {position: absolute; left: 0px; top: 0; } /*图片样式*/

    .banner .img li { float: left; } /*图片样式*/

    .banner .img img { width: 550px; }

    /*/ 小圆圈 /*/

    .banner .num { position: absolute; width: 100%; bottom: 50px; left: 0; text-align: center; font-size: 0px;; }/*bottom 可以调整小圈圈高度 */

    .banner .num li { width: 10px; height: 10px; background: #888; border-radius: 50%; display: inline-block; margin: 0 3px; cursor: pointer; }

    .banner .num li.on { background: #F60; }

    /*/ 按钮 /*/

    .banner .btn { width: 30px; height: 50px; background: rgba(0,0,0,0.5); position: absolute; top: 50%; margin-top: -25px; cursor: pointer; text-align: center; line-height: 50px; color: #fff; font-size: 40px; font-family: "宋体"; display: none; }

    .banner:hover .btn { display: block; }

    .banner .btn_l { left: 0; }

    .banner .btn_r { right: 0; }

    /* 修改输出屏大小 */

    #ban1 .banner { width: 100%px; height:600px; margin: 0 auto; border: 0px solid #000; }

    #ban1 .banner .img img { width: 1920px; height: 600px; /* 修改图片大小 */

    </style>

    </head>

    <body>

    <script src="//www.jq22.com/jquery/jquery-1.10.2.js"></script>

    <script src="../gundongimages/js/gdlb.js"></script>

    <div id="ban1">

    <div class="banner">

    <ul class="img">

    <li><a href="#"><img src="..。。。。。。。。。。。。。。"></a></li>

    <li><a href="#"><img src="。。。。。。。。。。。。。。。。。"></a></li> /* 图片路径根据自己的图片路径填写 */

    </ul>

    <ul class="num"> <!--小圆圈-->

    </ul>

    <div class="btn btn_l">&lt;</div> <!--左按钮 -->

    <div class="btn btn_r">&gt;</div> <!--右按钮 -->

    </div>

    </div>

    </body>

    </html>

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

    js部分

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

    $(function(){

    imgscrool('#ban1');

    imgscrool('#ban2');

    })

    //这是函数

    function imgscrool(obj){

    var moving = false;

    var width = $(obj+" .banner .img img").width();

    var i=0;

    var clone=$(obj+" .banner .img li").first().clone();

    $(obj+" .banner .img").append(clone);

    var size=$(obj+" .banner .img li").size();

    for(var j=0;j<size-1;j++){

    $(obj+" .banner .num").append("<li></li>");

    }

    $(obj+" .banner .num li").first().addClass("on");

    /*鼠标划入圆点*/

    if ($(obj+" .banner .num li")) {

    $(obj+" .banner .num li").hover(function(){

    var index=$(this).index();

    i=index;

    $(obj+" .banner .img").stop().animate({left:-index*width},1000)

    $(this).addClass("on").siblings().removeClass("on")

    })

    };

    //处理轮播初始宽度问题

    var a2= $(obj+" .banner img").width();

    var a3= $(obj+" .img li").length

    $(obj+" .banner .img").width(a2*a3+'px');

    /*自动轮播*/

    var t=setInterval(function(){

    i++;

    move();

    },2000)

    /*对banner定时器的操作*/

    $(obj+" .banner").hover(function(){

    clearInterval(t);

    },function(){

    t=setInterval(function(){

    i++;

    move();

    },2000)

    })

    if ($(obj+" .banner .btn_l")) {

    /*向左的按钮*/

    $(obj+" .banner .btn_l").stop(true).click(function(){

    if(moving){

    return;

    };

    moving=true;

    i--

    move();

    })

    /*向右的按钮*/

    $(obj+" .banner .btn_r").stop(true).click(function(){

    if(moving){

    return;

    }

    moving=true;

    i++

    move()

    })

    };

    function move(){

    if(i==size){

    $(obj+" .banner .img").css({left:0})

    i=1;

    }

    // 修改轮播每屏宽度

    if(i==-1){

    $(obj+" .banner .img").css({left:-(size-1)*width})

    i=size-2;

    }

    $(obj+" .banner .img").stop(true).delay(200).animate({left:-i*width},1000,function(){

    moving = false;

    })

    if(i==size-1){

    $(obj+" .banner .num li").eq(0).addClass("on").siblings().removeClass("on")

    }else{

    $(obj+" .banner .num li").eq(i).addClass("on").siblings().removeClass("on")

    }

    }

    如需转载,请注明文章出处和来源网址://www.ziixf.tw/html/h50841.shtml

    我要分享到:
    上一篇:HTML 之简介
    下一篇:html中的锚点

    必备CSS教程 Essential CSS Tutorials

    必备HTML基础教程 Essential HTML Tutorials

     

    如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
    香港买马资料大全文章修订日期:2018-09-09 06:55 原创:香港买马资料大全
    本文香港买马资料大全 www.ziixf.tw DIVCSS5版权所有。

  • 李生云的专栏作者中国国家地理网 2019-06-15
  • 软件社交功能须设红线 2019-06-15
  • 省国资委关于刘爱兵等具备正高级工程师吴向亚等具备高级工程师专业技术资格的通知 2019-06-13
  • 网红健康险——红在哪 险在哪 2019-06-13
  • 屈原作为一个浪漫诗人的确才华横溢,值得称道,但是他反对统一就得批评。是吧小作? 2019-06-12
  • 《国家人文历史》2018年第10期(总第203期)封面及目录 2019-06-11
  • 如何保持胃肠道健康年轻态 来听听这位消化科医生球迷的经验 2019-06-11
  • 命运:乌镇演义宣示网络新时代 2019-06-10
  • 地表最凶残火力 解放军155mm卡车炮曝光 2019-06-10
  • 瑞典南部城市发生枪击案致5人伤 警方:与恐袭无关 2019-06-09
  • 学习贯彻习近平总书记对脱贫攻坚工作重要指示精神 2019-06-09
  • 8周年!全新米聊开启内测:优化聊天新增连麦小游戏 2019-06-08
  • 人民网旅游3·15投诉平台--旅游频道 2019-06-07
  • “退休的违纪违法者”难逃终身追责 2019-06-07
  • 中共山西省委组织部公示 2019-06-06
  • 乌迪内斯队 时时彩开奖软件 上海到意大利那不勒斯 北京pk10彩票分析软件 沙尔克对云达不莱梅 南安普敦曼联 2012沙尔克04 切尔西vs曼城 瓦伦西亚赫塔菲 明日之后食谱