图片焦点图和图片滚动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;}
鄂公网安备 42050602000066号