Fatal编程技术网
  • javascript/
  • Javascript 使用jquery从图像的右中心幻灯片显示图像

Javascript 使用jquery从图像的右中心幻灯片显示图像

javascript jquery html css

Javascript 使用jquery从图像的右中心幻灯片显示图像,javascript,jquery,html,css,slideshow,Javascript,Jquery,Html,Css,Slideshow,我正在制作图像幻灯片，并尝试使用本教程： 我下载了zip文件并开始使用它，它工作得很好。唯一一件我尝试过但无法实现的事情是右下角的四个点，我希望它们出现在实际的图像上，但就在边界线上的右中心 例如： 如果你查看上面的图片（没有显示完整的图片），所有的点都是垂直的，而不是水平的，并且在图片的右中心。我也想做类似的事情。这有可能做到吗 我尝试使用边距顶部，但对我无效 更新：- 这是一个CSS，四个点的图像就是从中产生的，我已经修改了它，以包括页边空白顶部，但它不起作用： .slidesjs-pagi

我正在制作图像幻灯片，并尝试使用本教程：

我下载了zip文件并开始使用它，它工作得很好。唯一一件我尝试过但无法实现的事情是右下角的四个点，我希望它们出现在实际的图像上，但就在边界线上的右中心

例如：

如果你查看上面的图片（没有显示完整的图片），所有的点都是垂直的，而不是水平的，并且在图片的右中心。我也想做类似的事情。这有可能做到吗

我尝试使用
边距顶部
，但对我无效

更新：-

这是一个CSS，四个点的图像就是从中产生的，我已经修改了它，以包括页边空白顶部，但它不起作用：

.slidesjs-pagination li a {
  display: block;
  width: 13px;
  height: 0;
  padding-top: 13px;
  background-image: url("https://s16.postimg.org/pt4k43i9x/pagination.png");
  background-position: 0 0;
  float: left;
  <!-- added by me-->
  margin-top: -50px; 
}

.slidesjs分页li a{
显示：块；
宽度：13px；
身高：0；
填充顶部：13px；
背景图像：url（“https://s16.postimg.org/pt4k43i9x/pagination.png");
背景位置：0；
浮动：左；
利润上限：-50px；
}
以下是完整的HTML代码：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>SlidesJS Standard Code Example</title>
  <meta name="description" content="SlidesJS is a simple slideshow plugin for jQuery. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.">
  <meta name="author" content="Nathan Searles">

  <!-- SlidesJS Required (if responsive): Sets the page width to the device width. -->
  <meta name="viewport" content="width=device-width">
  <!-- End SlidesJS Required -->

  <!-- CSS for slidesjs.com example -->
  <link rel="stylesheet" href="css/example.css">
  <link rel="stylesheet" href="css/font-awesome.min.css">
  <!-- End CSS for slidesjs.com example -->

  <!-- SlidesJS Optional: If you'd like to use this design -->
  <style>
    body {
      -webkit-font-smoothing: antialiased;
      font: normal 15px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
      color: #232525;
      padding-top:70px;
    }

    #slides,
    #slides2,
    #slides3 {
      display: none;
      margin-bottom:50px;
    }

    .slidesjs-navigation {
      margin-top:3px;
    }

    .slidesjs-previous {
      margin-right: 5px;
      float: left;
    }

    .slidesjs-next {
      margin-right: 5px;
      float: left;
    }

    .slidesjs-pagination {
      margin: 6px 0 0;
      float: right;
      list-style: none;
    }

    .slidesjs-pagination li {
      float: left;
      margin: 0 1px;
    }

    .slidesjs-pagination li a {
      display: block;
      width: 13px;
      height: 0;
      padding-top: 13px;
      background-image: url("https://s16.postimg.org/pt4k43i9x/pagination.png");
      background-position: 0 0;
      float: left;
      overflow: hidden;
    }

    .slidesjs-pagination li a.active,
    .slidesjs-pagination li a:hover.active {
      background-position: 0 -13px
    }

    .slidesjs-pagination li a:hover {
      background-position: 0 -26px
    }

    a:link,
    a:visited {
      color: #333
    }

    a:hover,
    a:active {
      color: #9e2020
    }

    .navbar {
      overflow: hidden
    }
  </style>
  <!-- End SlidesJS Optional-->

  <!-- SlidesJS Required: These styles are required if you'd like a responsive slideshow -->
  <style>
    #slides {
      display: none
    }

    .container {
      margin: 0 auto
    }

    /* For tablets & smart phones */
    @media (max-width: 767px) {
      body {
        padding-left: 20px;
        padding-right: 20px;
      }
      .container {
        width: auto
      }
    }

    /* For smartphones */
    @media (max-width: 480px) {
      .container {
        width: auto
      }
    }

    /* For smaller displays like laptops */
    @media (min-width: 768px) and (max-width: 979px) {
      .container {
        width: 724px
      }
    }

    /* For larger displays */
    @media (min-width: 1200px) {
      .container {
        width: 1170px
      }
    }
  </style>
  <!-- SlidesJS Required: -->
</head>
<body>
  <!-- SlidesJS Required: Start Slides -->
  <!-- The container is used to define the width of the slideshow -->
  <div class="container">
    <div id="slides">
      <img src="https://s24.postimg.org/7cyxxftpd/example-slide-1.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/">
      <img src="https://s24.postimg.org/5mfwvyc69/example-slide-2.jpg" alt="Photo by: Daniel Parks Link: http://www.flickr.com/photos/parksdh/5227623068/">
      <img src="https://s24.postimg.org/48oa0ncwx/example-slide-3.jpg" alt="Photo by: Mike Ranweiler Link: http://www.flickr.com/photos/27874907@N04/4833059991/">
      <img src="https://s24.postimg.org/rbjedk3s1/example-slide-4.jpg" alt="Photo by: Stuart SeegerLink: http://www.flickr.com/photos/stuseeger/97577796/">
      <a href="#" class="slidesjs-previous slidesjs-navigation"><i class="icon-chevron-left"></i></a>
      <a href="#" class="slidesjs-next slidesjs-navigation"><i class="icon-chevron-right"></i></a>
    </div>
  </div>
  <!-- End SlidesJS Required: Start Slides -->

  <!-- SlidesJS Required: Link to jQuery -->
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <!-- End SlidesJS Required -->

  <!-- SlidesJS Required: Link to jquery.slides.js -->
  <script src="js/jquery.slides.min.js"></script>
  <!-- End SlidesJS Required -->

  <!-- SlidesJS Required: Initialize SlidesJS with a jQuery doc ready -->
  <script>
    $(function() {
      $('#slides').slidesjs({
        width: 940,
        height: 528,
        navigation: false
      });

      /*
        To have multiple slideshows on the same page
        they just need to have separate IDs
      */
      $('#slides2').slidesjs({
        width: 940,
        height: 528,
        navigation: false,
        start: 3,
        play: {
          auto: true
        }
      });

      $('#slides3').slidesjs({
        width: 940,
        height: 528,
        navigation: false
      });
    });
  </script>
  <!-- End SlidesJS Required -->
</body>
</html>


SlidesJS标准代码示例
身体{
-webkit字体平滑：抗锯齿；
字体：标准15px/1.5“Helvetica Neue”，Helvetica，Arial，无衬线；
颜色：#232525；
填充顶部：70px；
}
#幻灯片，
#幻灯片2，
#幻灯片3{
显示：无；
边缘底部：50px；
}
.slidesjs导航{
利润上限：3倍；
}
.slidesjs上一页{
右边距：5px；
浮动：左；
}
.slidesjs下一步{
右边距：5px；
浮动：左；
}
.slidesjs分页{
边际：6px0；
浮动：对；
列表样式：无；
}
.slidesjs分页li{
浮动：左；
利润率：0.1px；
}
.slidesjs分页李a{
显示：块；
宽度：13px；
身高：0；
填充顶部：13px；
背景图像：url（“https://s16.postimg.org/pt4k43i9x/pagination.png");
背景位置：0；
浮动：左；
溢出：隐藏；
}
.slidesjs分页li a.active，
.slidesjs分页li a:hover.active{
背景位置：0-13px
}
.slidesjs分页li a:悬停{
背景位置：0-26px
}
答：林克，
a:参观了{
颜色：#333
}
a:悬停，
a:主动的{
颜色：#9e2020
}
navbar先生{
溢出：隐藏
}
#幻灯片{
显示：无
}
.集装箱{
保证金：0自动
}
/*适用于平板电脑和智能手机*/
@介质（最大宽度：767px）{
身体{
左侧填充：20px；
右边填充：20px；
}
.集装箱{
宽度：自动
}
}
/*智能手机*/
@介质（最大宽度：480px）{
.集装箱{
宽度：自动
}
}
/*适用于小型显示器，如笔记本电脑*/
@介质（最小宽度：768px）和（最大宽度：979px）{
.集装箱{
宽度：724px
}
}
/*对于较大的显示器*/
@介质（最小宽度：1200px）{
.集装箱{
宽度：1170px
}
}
$（函数（）{
$（“#幻灯片”）.slidesjs({
宽度：940，
身高：528，
导航：错误
});
/*
在同一页上有多个幻灯片
他们只需要有单独的ID
*/
$（'#slides2'）。slidesjs({
宽度：940，
身高：528，
导航：错误，
起点：3，
播放：{
自动：对
}
});
$（“#slides3”）.slidesjs({
宽度：940，
身高：528，
导航：错误
});
});
通过替换规则添加此CSS：

#slides {
    position: relative;
}
.slidesjs-pagination {
    margin: 6px 0 0;
    float: none;
    list-style: none;
    position: absolute;
    top: 50%;
    right: 30px;
    z-index: 100;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
}
.slidesjs-pagination li {
    float: none;
    margin: 0 1px;
}

.slidesjs-pagination li a {
    display: block;
    width: 13px;
    height: 0;
    padding-top: 13px;
    background-image: url(https://s16.postimg.org/pt4k43i9x/pagination.png);
    background-position: 0 0;
    float: left;
    overflow: hidden;
    margin: 5px 0;
}
您想绝对地将菜单定位到右侧，使用
right
的值在菜单和右侧之间创建空间，将其移动到中心，然后取消
float
li

#幻灯片{
位置：相对位置；
}
#slides.slidesjs分页{
位置：绝对位置；
顶部：50%；右侧：1米；
转化：translateY（-50%）；
z指数：9999；
}
#slides.slidesjs分页li{
浮动：无；
}

SlidesJS标准代码示例
身体{
-webkit字体平滑：抗锯齿；
字体：标准15px/1.5“Helvetica Neue”，Helvetica，Arial，无衬线；
颜色：#232525；
填充顶部：70px；
}
#幻灯片，
#幻灯片2，
#幻灯片3{
显示：无；
边缘底部：50px；
}
.slidesjs导航{
利润上限：3倍；
}
.slidesjs上一页{
右边距：5px；
浮动：左；
}
.slidesjs下一步{
右边距：5px；
浮动：左；
}
.slidesjs分页{
边际：6px0；
浮动：对；
列表样式：无；
}
.slidesjs分页li{
浮动：左；
利润率：0.1px；
}
.slidesjs分页李a{
显示：块；
宽度：13px；
身高：0；
填充顶部：13px；
背景图像：url（“https://s16.postimg.org/pt4k43i9x/pagination.png");
背景位置：0；
浮动：左；
溢出：隐藏；
}
.slidesjs分页li a.active，
.slidesjs分页li a:hover.active{
背景位置：0-13px
}
.slidesjs分页li a:悬停{
背景位置：0-26px
}
答：林克，
a:参观了{
颜色：#333
}
a:悬停，
a:主动的{
颜色：#9e2020
}
navbar先生{
溢出：隐藏
}
#幻灯片{
显示：无
}
.集装箱{
保证金：0自动
}
/*适用于平板电脑和智能手机*/
@介质（最大宽度：767px）{
身体{
左侧填充：20px；
右边填充：20px；
}