如何将幻灯片放在我的html文档中心?

时间:2015-06-23 20:02:13

标签: jquery html css

我从网站上获取此代码。这是我按照指示在标题中使用的代码。

var slideimages = new Array()
var slidelinks = new Array()

function slideshowimages() {
    for (i = 0; i < slideshowimages.arguments.length; i++) {
        slideimages[i] = new Image()
        slideimages[i].src = slideshowimages.arguments[i]
    }
}

function slideshowlinks() {
    for (i = 0; i < slideshowlinks.arguments.length; i++)
        slidelinks[i] = slideshowlinks.arguments[i]
}

function gotoshow() {
    if (!window.winslide || winslide.closed)
        winslide = window.open(slidelinks[whichlink])
    else
        winslide.location = slidelinks[whichlink]
    winslide.focus()
}

然后在我的身体标签中代码如下

<a href="javascript:gotoshow()">
  <img src="food1.jpg" name="slide" border=0 width=1400 height=600>
</a>
<script>
  slideshowimages("file:///Users/Luke/Documents/Burton_borough1.jpg","file:///Users/Luke/Documents/defaultbackgroundimage.jpg")

  var slideshowspeed = 5000

  var whichlink = 0
  var whichimage = 0

  function slideit() {
    if (!document.images)
        return
    document.images.slide.src = slideimages[whichimage].src
    whichlink = whichimage
    if (whichimage < slideimages.length - 1)
        whichimage++
        else
            whichimage = 0
    setTimeout("slideit()", slideshowspeed)
  }
  slideit()   

</script>

我如何进行风格设计,使其进入我的屏幕中心而不是左边,这就是它的作用。

2 个答案:

答案 0 :(得分:2)

在这种情况下,为你的div分别在CSS中提供一个类和样式会更经济。

c:\a\b\c

<div class="slideshow">
 ...
</div>
在你的CSS中

。然后你可以重复使用它。

如果您可以在jsfiddle或codepen上发布代码的工作(或破坏)示例,或者在任何地方而不是本地文件中发布...

答案 1 :(得分:0)

将脚本包装在<div>中并添加属性margin-left:auto;margin-right:auto,就像这样......

<div style="margin-left:auto;margin-right:auto;width:80%">
    <a href="javascript:gotoshow()"><img src="food1.jpg" name="slide" border=0></a>

    <script>
        slideshowimages("file:///Users/Luke/Documents/Burton_borough1.jpg","file:///Users/Luke/Documents/defaultbackgroundimage.jpg")

        var slideshowspeed=5000

        var whichlink=0
        var whichimage=0

        function slideit(){
            if (!document.images)
            return
            document.images.slide.src=slideimages[whichimage].src
            whichlink=whichimage
            if (whichimage<slideimages.length-1)
            whichimage++
            else
            whichimage=0
            setTimeout("slideit()",slideshowspeed)
        }

        slideit()

        //-->
    </script>
</div>

编辑:格式化您的代码,使其更具可读性。请在将来这样做