哈喽朋友们，下面为大家分享一段代码测试。
html代码
<body> <div class="box" id="box"> <div class="inner"> <ul> <li> <a href="#"><img src="../image/1.jpg" alt=""></a> </li> <li> <a href="#"><img src="../image/2.jpg" alt=""></a> </li> <li> <a href="#"><img src="../image/3.jpg" alt=""></a> </li> <li> <a href="#"><img src="../image/4.jpg" alt=""></a> </li> <li> <a href="#"><img src="../image/5.jpg" alt=""></a> </li> <li> <a href="#"><img src="../image/6.jpg" alt=""></a> </li> </ul> <ol> </ol> </div> <div class="focus"> <div class="left-button"> <div></div> </div> <div class="right-button"> <div></div> </div> </div> </div> </body>
css代码
<style>
* {
margin: 0px;
padding: 0px;
}
li {
list-style: none;
}
.box {
position: relative;
width: 500px;
height: 300px;
margin: 50px auto;
border: solid 1px #cccccc;
}
.inner {
position: relative;
width: 490px;
height: 290px;
margin: 5px;
overflow: hidden;
}
.inner ul {
position: absolute;
width: 1000%;
height: 100%;
}
.inner ul li {
float: left;
width: 490px;
height: 290px;
}
.inner ul li a img {
width: 100%;
height: 100%;
}
.focus {
position: absolute;
display: none;
width: 490px;
height: 30px;
top: 0px;
bottom: 0px;
left: 5px;
margin: auto;
}
.left-button,
.right-button {
position: absolute;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
top: 0px;
bottom: 0px;
margin: auto;
background: rgba(0, 0, 0, 0.5);
color: white;
}
.right-button {
right: 0px;
}
.left-button>div,
.right-button>div {
width: 15px;
height: 15px;
margin-top: 7.5px;
border: solid 2px white;
box-sizing: border-box;
transform: rotateZ(45deg);
}
.left-button>div {
border-top: none;
border-right: none;
margin-left: 10px;
}
.right-button>div {
position: absolute;
border-bottom: none;
border-left: none;
right: 10px;
}
ol {
position: absolute;
height: 20px;
bottom: 10px;
right: 10px;
}
ol li {
display: inline-block;
width: 20px;
height: 20px;
margin-left: 5px;
line-height: 20px;
border-radius: 50%;
text-align: center;
text-decoration: none;
font-size: 12px;
background: rgba(0, 0, 0, 0.5);
}
.current {
background: orangered;
color: white;
}
</style>JS代码
<script>
//封装根据id获取dom
function myFunction(id) {
return document.getElementById(id);
}
//封装动画函数
function animate(element, target) {
clearInterval(element.timeId)
element.timeId = setInterval(function() {
var current = element.offsetLeft;
var step = 10;
step = current < target ? step : -step;
current += step;
if (Math.abs(current - target) > Math.abs(step)) {
element.style.left = current + "px";
} else {
clearInterval(element.timeId);
element.style.left = target + "px";
}
}, 10)
}
//获取最外面的div
var box = myFunction("box");
//获取相框
var inner = box.children[0];
//获取相框宽度
var innerWidth = inner.offsetWidth;
//获取ul
var ulObj = inner.children[0];
//获取ol
var olObj = inner.children[1];
//获取ul中的li
var liObjs = ulObj.children;
//获取focus
var focus = box.children[1];
//声明变量存储点击当前按钮的索引
var index = 0;
//设置小按钮功能
for (var i = 0; i < liObjs.length; i++) {
var lis = document.createElement("li");
lis.innerHTML = i + 1;
olObj.appendChild(lis);
lis.setAttribute("index", i);
lis.onclick = function() {
for (var j = 0; j < olObj.children.length; j++) {
olObj.children[j].removeAttribute("class");
}
this.className = "current";
index = this.getAttribute("index");
animate(ulObj, -index * innerWidth);
}
olObj.children[0].className = "current";
};
//右边按钮功能
//克隆第一个图片放在ul最后
ulObj.appendChild(ulObj.children[0].cloneNode(true));
//自动播放
var timeId = setInterval(rightClick, 1000);
//鼠标移入移出，左右按钮显示和隐藏
box.onmouseover = function() {
focus.style.display = "block";
clearInterval(timeId);
};
box.onmouseout = function() {
focus.style.display = "none";
timeId = setInterval(rightClick, 1000);
};
//右边按钮功能函数
function rightClick() {
if (index == liObjs.length - 1) {
index = 0;
ulObj.style.left = 0 + "px";
}
index++;
animate(ulObj, -index * innerWidth);
//每张图片对应的按钮背景改变
if (index == liObjs.length - 1) {
olObj.children[olObj.children.length - 1].className = "";
olObj.children[0].className = "current";
} else {
for (var i = 0; i < olObj.children.length; i++) {
olObj.children[i].removeAttribute("class");
}
olObj.children[index].className = "current";
}
};
//调用右边功能按钮函数
focus.children[1].onclick = rightClick;
//左边按钮
console.log(focus.children[0]);
focus.children[0].onclick = function() {
if (index == 0) {
index = ulObj.children.length - 1;
console.log(index);
console.log(-index * innerWidth);
ulObj.style.left = -index * innerWidth + "px";
}
index--;
animate(ulObj, -index * innerWidth);
for (var i = 0; i < olObj.children.length; i++) {
olObj.children[i].removeAttribute("class");
}
olObj.children[index].className = "current";
};
</script>php代码
function 主题ID_GetArticleCategorys($Rows,$CategoryID,$hassubcate){
global $zbp;
$ids = strpos($CategoryID,',') !== false ? explode(',',$CategoryID) : array($CategoryID);
$wherearray=array();
foreach ($ids as $cateid){
if (!$hassubcate) {
$wherearray[]=array('log_CateID',$cateid);
}else{
$wherearray[] = array('log_CateID', $cateid);
foreach ($zbp->categorys[$cateid]->SubCategorys as $subcate) {
$wherearray[] = array('log_CateID', $subcate->ID);
}
}
}
$where=array(
array('array',$wherearray),
array('=','log_Status','0'),
);
$order = array('log_PostTime'=>'DESC');
$articles= $zbp->GetArticleList(array('*'),$where,$order,array($Rows),'');
return $articles;
}以上就是代码高亮的演示效果。