首页
> 计算机技术
> 前端开发
> JavaScript
JavaScript配合CSS实现图片轮播
原创 lihf8515于2025年02月07日 10:47发表
来源:本站 阅读:92
写这篇小短文的目的是因为开发过程中会使用到图片定时轮播功能，这个功能虽然不是每个网站必需的，但是有了它，可以给您的网站增色不少。
具体使用到JavaScript和CSS，原理并不复杂，所以我就直接上代码了。
1、CSS样式表文件内容
.all{
width:100%;
height: 340px;
border:1px solid #ccc;
margin:10px auto;
padding:7px;
position:relative;
}
.screen{
width:100%;
height: 100%;
overflow:hidden;
position:relative;
}
.screen li{
width:16.666666666%;
height: 340px;
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>
阅读排行榜
皖公网安备34130202000765号