html代码区
<div class="chart">
<ul class="chartlist" id="list">
<li class="chartitem"><a href=""><img src="images/chart_01.jpg" alt=""></a></li>
<li class="chartitem"><a href=""><img src="images/chart_02.jpg" alt=""></a></li>
<li class="chartitem"><a href=""><img src="images/chart_03.jpg" alt=""></a></li>
<li class="chartitem"><a href=""><img src="images/chart_04.jpg" alt=""></a></li>
<li class="chartitem"><a href=""><img src="images/chart_05.jpg" alt=""></a></li>
</ul>
<button type="button" class="btn" id="goNext">></button>
<button type="button" class="btn" id="goPre"><</button>
<ul class="pointlist">
<li class="point active" data-index="0"></li>
<li class="point" data-index="1"></li>
<li class="point" data-index="2"></li>
<li class="point" data-index="3"></li>
<li class="point" data-index="4"></li>
</ul>
</div>
css代码区
<style>
*{
padding:0px;
margin:0px;
}
.chart {
width:1226px;
height:460px;
margin:0px auto;
position:relative;
overflow:hidden;
}
.chart > .chartlist {
width:6130px;
height:100%;
list-style:none;
position:absolute;
}
.chart > .chartlist > .chartitem {
width:1226px;
height:100%;
float:left;
}
.btn {
width:30px;
height:50px;
font-size:50px;
position:absolute;
top:180px;
z-index:20;
}
#goNext{
position:absolute;
right:0px;
}
#goPre{
position:absolute;
left:0px;
}
.pointlist{
position:absolute;
list-style:none;
right:50px;
bottom:50px;
z-index:20;
}
.point{
width:15px;
height:15px;
border-radius:100%;
background-color:rgb(0,0,0,0.4);
float:left;
margin-right:20px;
border-style:solid;
border-width:3px;
border-color:rgb(255,255,255,1);
cursor:pointer;
}
.point.active{
background-color:black;
}
js代码区
<script type="text/javascript">
// 第一张图片:1226px;
// 第二张图片:2452px
// 第三张图片:3678px;
// 第四张图片:4904px;
var list=document.getElementById("list");
var goNextbtn = document.getElementById("goNext");
var goPrebtn = document.getElementById("goPre");
// alert(chartlists);
goNextbtn.onclick = function(){
next_pic();
// alert("下一张图片");
}
goPrebtn.onclick = function(){
Pre_pic();
}
function next_pic(){
index ++;
if(index >4){
index = 0;
}
showpoint();
var newLeft;
if(list.style.left ==="-4904px"){
newLeft = "0";
}else{
newLeft = list.offsetLeft-1226;
}
list.style.left = newLeft +'px';
// console.log(list.style.left);
}
function Pre_pic(){
index --;
if(index < 0){
index = 4;
}
showpoint();
var newLeft;
if(list.style.left ==="0px"){
newLeft = "-4904";
}else{
newLeft = list.offsetLeft+1226;
}
list.style.left = newLeft +'px';
// console.log(newLeft);
}
//给轮播图添加定时器
var timer=null;
function autoPlay(){
timer = setInterval(function(){
next_pic();
},2000)
}
autoPlay();
list.onmouseover = function(){
// alert("我移入了鼠标");
clearInterval(timer);
}
list.onmouseout = function(){
autoPlay();
}
//小圆点
var points = document.getElementsByClassName("point");
// alert(points.length);
var index=0;
function clearActive(){
for(var i=0;i<points.length;i++){
points[i].className = "point";
}
}
function showpoint(){
clearActive();
points[index].className = "point active";
}
for (var i = 0, len = points.length; i < len; i++){
(function(i){
points[i].onclick = function () {
var dis = index - i;
// alert(dis);
// if(index == 4 && list.offsetLeft!==-6130){
// dis = dis - 5;
// }
//和使用prev和next相同,在最开始的照片5和最终的照片1在使用时会出现问题,导致符号和位数的出错,做相应地处理即可
// if(index == 0 && list.offsetLeft!== -1226){
// dis = 5 + dis;
// }
// list.style.left = (list.style.left + dis * 1226)+"px";
list.style.left = (list.offsetLeft + dis * 1226)+"px";
index = i;
// alert(dis);
showpoint();
}
})(i);
}
</script>
原理:
实现一个轮播图还是不难的,大体思路: 先创建一个div,限定其宽度和高度,overflow:hidden,且设置其position为relative。然后创建一个装图片的div,宽度为所有图片的总宽度,且设置其position为absolute,并且使其中的内容浮动,这样所有的图片就处于一行中。然后为了实现无缝滚动,所以需要在首尾分别添加一张过渡图片。 先添加两个按钮, 使其可以手动轮播,然后只需要添加一个定时器使其朝一个方向自动轮播即可,因为用户有时需要查看详情,所以当鼠标进入时就clear定时器,滑出再定时播放。为了更好地用户体验,我们再下面添加了一排小圆点,用户可以清楚地知道现在所处的位置, 最后, 利用闭包使得用户可以直接通过点击小圆点切换图片