jQuery SuperSlide制作百度AI网站宽屏的焦点图片切换,带文字标题和左右按钮控制banner大图切换效果代码。
使用方法:
1、head引入css文件
<link rel="stylesheet" type="text/css" href="statics/css/style.css" />
2、head引入js文件
<script type="text/javascript" src="statics/js/jquery1.42.min.js"></script>
<script type="text/javascript" src="statics/js/jquery.SuperSlide.2.1.3.js"></script>
3、body引入HTML代码
<div id="slideBox" class="slideBox">
<div class="hd">
<ul>
<li>
<span>EdgeBoard火热开售</span>
<div class="dot">
<div class="liner"></div>
</div>
</li>
<li>
<span>人脸考勤解决方案</span>
<div class="dot">
<div class="liner"></div>
</div>
</li>
<li>
<span>车辆分析 全新上线</span>
<div class="dot">
<div class="liner"></div>
</div>
</li>
<li>
<span>OCR 3款新品火热邀测</span>
<div class="dot">
<div class="liner"></div>
</div>
</li>
<li>
<span>人脸离线识别SDK 2.0</span>
<div class="dot">
<div class="liner"></div>
</div>
</li>
<li>
<span>地标识别技术上线</span>
<div class="dot">
<div class="liner"></div>
</div>
</li>
</ul>
</div>
<div class="bd">
<ul>
<li style="background-color: rgb(183, 159, 255);">
<a href="#" target="_blank"><img src="statics/images/1.jpg" /></a>
</li>
<li style="background-color: rgb(56, 29, 140);">
<a href="#" target="_blank"><img src="statics/images/2.png" /></a>
</li>
<li style="background-color: rgb(56, 42, 186);">
<a href="#" target="_blank"><img src="statics/images/3.png" /></a>
</li>
<li style="background-color: rgb(179, 166, 251);">
<a href="#" target="_blank"><img src="statics/images/4.jpg" /></a>
</li>
<li style="background-color: rgb(91, 66, 207);">
<a href="#" target="_blank"><img src="statics/images/5.jpg" /></a>
</li>
<li style="background-color: rgb(37, 70, 187);">
<a href="#" target="_blank"><img src="statics/images/6.jpg" /></a>
</li>
</ul>
</div>
<!-- 下面是前/后按钮代码,如果不需要删除即可 -->
<a class="prev" href="javascript:void(0)"></a>
<a class="next" href="javascript:void(0)"></a>
</div>
<script type="text/javascript">
jQuery(".slideBox").slide({
mainCell: ".bd ul",
effect: "fold",
trigger: "click",
autoPlay: true,
mouseOverStop: false,
startFun:function(i,c){
$('.bd ul li').removeClass('active').eq(i).addClass('active');
}
});
</script>