• 所有问题

    • 怎么用html代码设置图片轮播效果，我在网上搜了很多，但都没办法实现，哪位高手可以告诉我啊

    如题所述

    举报该问题
    推荐答案   推荐于2017-11-15
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

    <title>图片滚动</title>

    </head>

    <body>

    <style type="text/css">

    <!--

    #demo {

    background: #FFF;

    overflow:hidden;

    border: 1px dashed #CCC;

    width: 500px;

    }

    #demo img {

    border: 3px solid #F2F2F2;

    }

    #indemo {

    float: left;

    width: 800%;

    }

    #demo1 {

    float: left;

    }

    #demo2 {

    float: left;

    }

    -->

    </style>

    <div id="demo">

    <div id="indemo">

    <div id="demo1">

    <a href="#"><img src="https://gss0.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/image/pic/item/f9198618367adab43314a53081d4b31c8601e4f9.jpg" border="0" /></a>

    <a href="#"><img src="https://gss0.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/image/pic/item/f7246b600c33874491ccdc6f5b0fd9f9d72aa09c.jpg" border="0" /></a>

    <a href="#"><img src="https://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/image/pic/item/00e93901213fb80e3b0a611d3fd12f2eb8389424.jpg" border="0" /></a>

    <a href="#"><img src="https://gss0.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/image/h%3D220/sign=9140d29dd4c451dae9f60be986fc52a5/4bed2e738bd4b31c0d94de788ed6277f9f2ff84d.jpg" border="0" /></a>

    <a href="#"><img src="https://gss0.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/image/pic/item/fcfaaf51f3deb48ff0e79838fa1f3a292cf5784d.jpg" border="0" /></a>

    <a href="#"><img src="https://gss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/image/pic/item/b3119313b07eca8082697a089b2397dda04483f5.jpg" border="0" /></a>

    </div>

    <div id="demo2"></div>

    </div>

    </div>

    <script>

    <!--

    var speed=10;

    var tab=document.getElementById("demo");

    var tab1=document.getElementById("demo1");

    var tab2=document.getElementById("demo2");

    tab2.innerHTML=tab1.innerHTML;

    function Marquee(){

    if(tab2.offsetWidth-tab.scrollLeft<=0)

    tab.scrollLeft-=tab1.offsetWidth

    else{

    tab.scrollLeft++;

    }

    }

    var MyMar=setInterval(Marquee,speed);

    tab.onmouseover=function() {clearInterval(MyMar)};

    tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};

    -->

    </script>

    </body>

    </html>

    请参阅以上代码，看看是不是你想要的html代码，如有疑问，及时沟通

    温馨提示：答案为网友推荐，仅供参考
    其他回答
    第1个回答  2013-05-05
    简单地说，光用HTML是实现不了图片轮播效果的。
    多半要用到javascript脚本了。
    不过这个效果应该是比较好实现，如果你搜到的不行的话，你可以再HI我，也许可以给你写一个，如果有时间的话。本回答被网友采纳
    第2个回答  2013-05-05
    <a href="http://www.w3school.com.cn/index.html">W3School 在线教程</a>

    第3个回答  2017-11-15
    50点财富值？那么请问走淘宝还是走微信？支付宝还是银行转账？
    相似回答
    网页制作 让网页上的图片自动变换的代码答：HTML中图片轮播代码如下：<!DOCTYPE html><html><head><title>图片轮播代码</title><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0"></head><style type="text/css"> body{max-width...
    ...HTML5,C#里面如何实现下图的图片效果。滑动轮播类似的。 DW里面添...答：(document).ready(function ()//鼠标在图片上悬停让切换暂停 ("#div_pic").hover(function () { clearInterval(t); });//鼠标离开图片切换继续 ("#div_pic").mouseleave(function () { changepic(); });});/ //下面是图片轮播代码 /* var num = 0 (function(){ ("#div_pic ol...
    大家正在搜
    html5轮播图代码效果图手动轮播图html代码html图片轮播css代码html三张图片的轮播代码自动轮播图html代码js轮播图实现简单代码html轮播代码html网页设计轮播h5轮播图代码
    相关问题
    HTML语言是一种编程语言吗？
    HTML5 是一门编程语言吗
    HTML5是什么编程语言?
    Html5是网页编程语言吗
    HTML是编程语言吗?
    HTML语言是一种编程语言吗？
    网页制作中的HTML中编程语言JavaScript的使用方法...
    html是编程语言吗