功能概要
鼠标移到图片上显式左右按钮
点击左右按钮切换到下一个图片
自动轮播,数字跟着动
点击数字跳到对应的图片
效果实例
轮播
html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="index1.css"/>
</head>
<body>
<div id="box">
<div class="xiangkuang">
<ul>
<li><a href=""><img src="images/1.jpg" ></a></li>
<li><a href=""><img src="images/2.jpg" ></a></li>
<li><a href=""><img src="images/3.jpg" ></a></li>
<li><a href=""><img src="images/4.jpg" ></a></li>
<li><a href=""><img src="images/5.jpg" ></a></li>
</ul>
<ol>
</ol>
</div>
<div id="focus">
<span id="left"><</span>
<span id="right">></span>
</div>
</div>
<script src="index1.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
css代码:
* {
margin: 0;
padding: 0;
list-style: none;
border: 0;
}
div#box {
width: 500px;
height: 200px;
border: 3px solid red;
margin: 100px auto 0;
padding: 6px;
position: relative;
}
div#box div.xiangkuang {
width: 500px;
height: 200px;
position: relative;
overflow: hidden;
}
.xiangkuang ul {
width: 3000px;
position: absolute;
top: 0;
left: 0;
}
.xiangkuang ul li {
float: left;
}
.xiangkuang ol {
position: absolute;
right: 10px;
bottom: 10px;
}
.xiangkuang ol li {
float: left;
width: 20px;
height: 20px;
background-color: #fff;
border: 1px solid #ccc;
margin-left: 10px;
line-height: 20px;
text-align: center;
}
.xiangkuang ol li.current{
background-color: red;
color: #fff;
}
div#focus{
display: none;
}
div#focus span{
display: block;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #000;
opacity: 0.3;
color: #fff;
font-size: 30px;
font-weight: bold;
font-family: "黑体";
position: absolute;
left: 6px;
top: 50%;
border: 1px solid #ccc;
margin-top: -20px;
}
div#focus #right{
right: 6px;
left:auto;
}
js代码:
// 获取元素
var box = document.getElementById('box')
var xiangkuang = box.children[0]
// 获取相框宽度
var width = xiangkuang.offsetWidth
var ulObj = xiangkuang.children[0]
var olObj = xiangkuang.children[1]
var focus = box.children[1]
var left = focus.children[0]
var right = focus.children[1]
console.log(box, xiangkuang, ulObj, olObj, focus, left, right)
var olList = olObj.children
var ulList = ulObj.children
var index = 0
// 创建 li
for (var i = 0; i < ulList.length; i++) {
// 创建li标签
var li = document.createElement("li")
console.log(li)
// 将创建好的li追加给olObj
olObj.appendChild(li)
// li添加文本
li.innerHTML = i + 1
// 给li设置index属性
li.setAttribute("index", i)
// 遍历ol‘中li绑定鼠标移入事件
li.onmouseover = function() {
// 清除所有的li中 current样式
for (var j = 0; j < olObj.children.length; j++) {
olObj.children[j].removeAttribute("class")
}
// 触发鼠标移入事件的li添加current样式
this.className = "current"
// 获取触发事件对应li的index属性值
index = this.getAttribute("index")
console.log(index)
// 移动图片
animate(ulObj, -index * width)
}
}
// 设置ol中第一个li的默认样式
olObj.children[0].className = 'current'
// 克隆ul中第一个li 追加到ul中li最后面
ulObj.appendChild(ulObj.children[0].cloneNode(true))
// 自动轮播 定时器
var timeId = setInterval(youyi, 3000)
// 左右焦点按钮
box.onmouseover = function(){
focus.style.display='block'
clearInterval(timeId)
}
box.onmouseout = function(){
focus.style.display='none'
timeId=setInterval(youyi,3000)
}
// 右击按钮
right.onclick = youyi
// 左击按钮
left.onclick=function(){
if(index ==0 ){
index = 5
ulObj.style.left = -index*width+'px'
}
index--
animate(ulObj,-index*width)
// 设置移动后的按钮颜色
for(var i=0;i<olObj.children.length;i++){
olObj.children[i].removeAttribute('class')
}
// 设置当前图片 index
olObj.children[index].className='current'
}
// 封装 自右侧向左侧移动图片
function youyi(){
if(index==ulList.length-1){
index=0
ulObj.style.left=0+'px'
}
index++
animate(ulObj,-index*width)
// 如果inde==5 当前显式的是第六张图
if(index==ulList.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')
}
// 设置当前图片 index
olObj.children[index].className='current'
}
}
//设置任意的一个元素,移动到指定的目标位置
function animate(element, target) {
clearInterval(element.timeId);
//定时器的id值存储到对象的一个属性中
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);
}
以上就是本节的内容,希望能帮到你,以后也会持续更新更多内容,想了解更多看我主页,谢谢观看!