首页 > 计算机技术 > 前端开发 > JavaScript

JavaScript配合CSS实现图片轮播

原创 lihf8515 2025年02月07日 10:47

来源:本站阅读:557

写这篇小短文的目的是因为开发过程中会使用到图片定时轮播功能，这个功能虽然不是每个网站必需的，但是有了它，可以给您的网站增色不少。

具体使用到JavaScript和CSS，原理并不复杂，所以我就直接上代码了。

1、CSS样式表文件内容

.all{
	width:100%;
	height: 410px;
	border:1px solid #ccc;
	margin:10px auto;
	padding:10px;
	position:relative;
}
.screen{
	width:100%;
	height: 100%;
	overflow:hidden;
	position:relative;
}
.screen li{
	width:16.666666666%;
	height: 410px;
	max-width:100%;
	max-height:100%;
	overflow:hidden;
	float:left;
}
.screen ul{
	position:absolute;
	left:0px;
	top:0px;
	width:600%;
	padding:0;
	margin:0;
	list-style:none;
	border:0;
}
.screen li{
	list-style:none;
}
.all ol{
	position:absolute;
	right:10px;
	bottom:10px;
	line-height:20px;
	text-align:center;
}
.all ol li{
	float:left;
	width:20px;
	height:20px;
	background:#fff;
	border:1px solid #ccc;
	margin-left:10px;
	cursor:pointer;
}
.all ol li.current{
	background:yellow;
}
#arr span{
	width:40px;
	height:40px;
	position:absolute;
	left:5px;
	top:50%;
	margin-top:-20px;
	background:#000;
	cursor:pointer;
	line-height:40px;
	text-align:center;
	font-weight:bold;
	font-size:30px;
	color:#fff;
	opacity:0.3;
	border:1px solid #fff;
}
#arr #right{
	right:5px;
	left:auto;
}
#pictitle{
	width:100%;
	position:absolute;
	text-align:center;
	bottom:40px;
	font-weight:bold;
	font-size:2em;
	color:#fff;
}

2、JavsScript脚本文件内容

var box = document.getElementById("all");
var ul = box.children[0].children[0];
var ol = box.children[0].children[1];
var ulLiArr = ul.children;

var newLi = ulLiArr[0].cloneNode(true);
ul.appendChild(newLi);

for(var i=0;i<ulLiArr.length-1;i++){
    var newOlLi = document.createElement("li");
    newOlLi.innerHTML = i+1;
    ol.appendChild(newOlLi);
}

var olLiArr = ol.children;
ol.children[0].className = "current";

for(var i=0;i<olLiArr.length;i++){
    olLiArr[i].index = i;
    olLiArr[i].onmouseover = function () {
        for(var j=0;j<olLiArr.length;j++){
            olLiArr[j].className = "";
        }
        olLiArr[this.index].className = "current";
        animate(ul,-this.index*ul.children[0].offsetWidth);
        key = square = this.index;
    }
}

var timer = null;
var key = 0;
var square = 0;
timer = setInterval(autoPlay,3000);
function autoPlay(){
    key++;
    square++;
    if(key>olLiArr.length){
        key=1;
        ul.style.left = 0;
    }
    animate(ul,-key*ul.children[0].offsetWidth);
    square = square>olLiArr.length-1?0:square;
    for(var j=0;j<olLiArr.length;j++){
        olLiArr[j].className = "";
    }
    olLiArr[square].className = "current";
}

box.onmouseover = function () {
    clearInterval(timer);
}
box.onmouseout = function () {
    timer = setInterval(autoPlay,3000);
}

var btnArr = box.children[0].children[2].children;
btnArr[0].onclick = function () {
    key--;
    square--;
    if(key<0){
        key=4;
        ul.style.left = -5*ul.children[0].offsetWidth + "px";
    }
    animate(ul,-key*ul.children[0].offsetWidth);
    square = square<0?olLiArr.length-1:square;
    for(var j=0;j<olLiArr.length;j++){
        olLiArr[j].className = "";
    }
    olLiArr[square].className = "current";
}
btnArr[1].onclick = function () {
    autoPlay();
}

function animate(obj,target) {
    clearInterval(obj.timer);
    var speed = obj.offsetLeft < target ? 15 : -15;
    obj.timer = setInterval(function() {
        var result = target - obj.offsetLeft;
        obj.style.left = obj.offsetLeft + speed + "px";
        if(Math.abs(result) <= 15) {
            obj.style.left = target + "px";
            clearInterval(obj.timer);
        }
    },10);
}

3、HTML页面文件中的调用方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=Edeg,chrome=1">
<title>JavaScript配合CSS实现图片轮播</title>
<link href="css/lunbo.css" rel="Stylesheet" />
</head>
<body>
<div class="all" id='all'>
<div class="screen" id="screen">
<ul id="ul">
<?php foreach($picrows as $picrow){ ?>
<li>
<a href="article/<?php echo($picrow['id']); ?>.html" target="_blank">
<img src="<?php echo($picrow['navpic']); ?>" width="100%" height="340" title="<?php echo($picrow['title']); ?>" />
</a>
</li>
<?php } ?>
</ul>
<ol></ol>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="js/lunbo.js"></script>