记录一些常用的函数和瞎折腾的过程……

图片焦点图和图片滚动html代码

给别人做一个网站,要求网站要做一个焦点图轮询,网上查了查,发现这个项目很不错:http://www.superslide2.com/,还有很多样式可根据需要自己定义,使用相当方便。

我使用了三个效果,第一个焦点图轮询,第二个图片带标题滚动,第三个仅图片滚动,具体三个效果的代码如下:

引入js文件:

<script src="https://code.jquery.com/jquery-3.5.1.min.js"> </script>
<script src="https://static.pdflibr.com/SuperSlide/2.1.3/jquery.SuperSlide.2.1.3.js"></script>

1.1、焦点图的html部分:

<div class="focusBox">
  <ul class="pic">
    <li>
      <a href="http://www.SuperSlide2.com" target="_blank"><img src="http://www.superslide2.com/otherDemo/0.1/images/focus1.jpg"></a>
    </li>
    <li>
      <a href="http://www.SuperSlide2.com" target="_blank"><img src="http://www.superslide2.com/otherDemo/0.1/images/focus2.jpg"></a>
    </li>
    <li>
      <a href="http://www.SuperSlide2.com" target="_blank"><img src="http://www.superslide2.com/otherDemo/0.1/images/focus3.jpg"></a>
    </li>
    <li>
      <a href="http://www.SuperSlide2.com" target="_blank"><img src="http://www.superslide2.com/otherDemo/0.1/images/focus4.jpg"></a>
    </li>
  </ul>
  <div class="txt-bg"></div>
  <div class="txt">
    <ul style="padding:0;margin:0;">
      <li style="bottom: 0px;">
        <a href="#">1、SuperSlide美女福利图Quiet</a>
      </li>
      <li style="bottom: -36px;">
        <a href="#">2、SuperSlide美女福利图DoubleLi </a>
      </li>
      <li style="bottom: -36px;">
        <a href="#">3、SuperSlide美女福利图爱的练习曲</a>
      </li>
      <li style="bottom: -36px;">
        <a href="#">4、SuperSlide美女福利图夜莺 </a>
      </li>
    </ul>
  </div>
  <ul class="num">
    <li><a>1</a><span></span></li>
    <li><a>2</a><span></span></li>
    <li><a>3</a><span></span></li>
    <li><a>4</a><span></span></li>
  </ul>
</div>

1.2、焦点图的js控制部分,这里需要注意标签和元素对应:

<script type="text/javascript">
jQuery(".focusBox").slide({
  titCell: ".num li",
  mainCell: ".pic",
  effect: "fold",
  autoPlay: true,
  trigger: "click",
  startFun: function(i) {
    jQuery(".focusBox .txt li").eq(i).animate({
      "bottom": 0
    }).siblings().animate({
      "bottom": -36
    });
  }
});
</script>

1.2、给焦点图加上css样式:

.focusBox { float:left; position: relative; width: 320px; height: 240px; margin-bottom:10px; overflow: hidden; font-family:Arial; text-align: left; background:#fff; }
.focusBox .pic img { width: 320px; height: 240px; display: block; }
.focusBox .txt-bg { position: absolute; bottom: 0; z-index: 1; height: 36px; width:100%; background: #333; filter: alpha(opacity=40); opacity: 0.4; overflow: hidden; }
.focusBox .txt { position: absolute; bottom: 0; z-index: 2; height: 36px; width:100%; overflow: hidden; }
.focusBox .txt li{ height:36px; line-height:36px; position:absolute; bottom:-36px;}
.focusBox .txt li a{ display: block; color: white; padding: 0 0 0 10px; font-size: 12px; font-weight: bold; text-decoration: none; }
.focusBox .num { position: absolute; z-index: 3; bottom: -5px; right: 8px; }
.focusBox .num li{ float: left; position: relative; width: 18px; height: 15px; line-height: 15px; overflow: hidden; text-align: center; margin-right: 1px; cursor: pointer; }
.focusBox .num li a,.focusBox .num li span { position: absolute; z-index: 2; display: block; color: white; width: 100%; height: 100%; top: 0; left: 0; text-decoration: none; }
.focusBox .num li span { z-index: 1; background: black; filter: alpha(opacity=50); opacity: 0.5; }
.focusBox .num li.on a,.focusBox .num a:hover{ background:#f60; }

2.1、图片带标题左右滚动html代码:

<div class="friendLink">
  <ul>
    <li>
      <div class="pic">
        <a href="#"><img src="http://www.superslide2.com/otherDemo/0.1/images/link.png"></a>
      </div>
      <div class="title"><a href="#">这是标题1</a></div>
    </li>
    <li>
      <div class="pic">
        <a href="#"><img src="http://www.superslide2.com/otherDemo/0.1/images/link.png"></a>
      </div>
      <div class="title"><a href="#">这是标题2</a></div>
    </li>
    <li>
      <div class="pic">
        <a href="#"><img src="http://www.superslide2.com/otherDemo/0.1/images/link.png"></a>
      </div>
      <div class="title"><a href="#">这是标题3</a></div>
    </li>
  </ul>
</div>

2.2、图片带标题左右滚动js控制代码,这里需要注意标签和元素对应:

<script type="text/javascript">jQuery(".friendLink").slide({ mainCell:"ul",autoPlay:true,effect:"leftMarquee",interTime:50,vis:3 });</script>

2.3、图片带标题左右滚动CSS美化:

.friendLink{ height:160px; padding:10px; background:#fff; overflow:hidden; clear:both; }
.friendLink ul{ overflow:hidden; zoom:1; }
.friendLink ul li{ width:150px; float:left; margin:0 5px; display:inline; }
.friendLink ul li .pic{ text-align: center;}
.friendLink ul li .pic img{ width:150px; height:120px;}
.friendLink ul li .title{ text-align: center;line-height: 30px;}
.friendLink ul li .title a{ width:150px; text-decoration: none;color:#333;}

3.1、图片左右滚动html代码:

<div class="friendLink2">
  <ul>
    <li>
      <a href="#"><img src="http://www.superslide2.com/otherDemo/0.1/images/link.png"></a>
    </li>
    <li>
      <a href="#"><img src="http://www.superslide2.com/otherDemo/0.1/images/link.png"></a>
    </li>
    <li>
      <a href="#"><img src="http://www.superslide2.com/otherDemo/0.1/images/link.png"></a>
    </li>
    <li>
      <a href="#"><img src="http://www.superslide2.com/otherDemo/0.1/images/link.png"></a>
    </li>
  </ul>
</div>

3.2、图片左右滚动js控制代码,这里需要注意标签和元素对应:

<script type="text/javascript">jQuery(".friendLink2").slide({ mainCell:"ul",autoPlay:true,effect:"leftMarquee",interTime:50,vis:3 });</script>

3.3、图片左右滚动CSS美化:

.friendLink2{ height:160px; padding:10px; background:#fff; overflow:hidden; clear:both; }
.friendLink2 ul{ overflow:hidden; zoom:1; }
.friendLink2 ul li{ width:150px; float:left; margin:0 5px; display:inline; }
.friendLink2 ul li img{ width:150px; height:100px;}