基于JavaScript实现轮播图效果
编程学习 2021-07-04 14:07www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了基于JavaScript实现轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript实现轮播图效果的具体代码，供大家参考，具体内容如下
学习笔记（学校的课设），实现了左右切换，按指示点切换、按小图标切换和自动切换，但是还有某些功能没完善，如：切换到某张图片后，左右并没有切换到前后相应的图片。
先看实现效果：
代码仅供参考：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div0{
height: 100px;
width: 100%;
background-color:black;
opacity:0.75;
}
.div1{
background-image: url(img/bg2.png);
height: 400px;
width: 100%;
}
.div2{
height: 200px;
width: 100%;
background-color:black;
opacity:0.75;
position: absolute;
}
.spot{
position: absolute;
left: 10%;
}
.spot_list1{
float: left;
border:3px solid wheat;
transform:rotate(-30deg);
-ms-transform:rotate(-30deg);
-moz-transform:rotate(-30deg);
-webkit-transform:rotate(-30deg);
-o-transform:rotate(-30deg);
opacity:0.5;
}
.spot_list2{
float: left;
border:3px solid wheat;
transform:rotate(-15deg);
-ms-transform:rotate(-15deg);
-moz-transform:rotate(-15deg);
-webkit-transform:rotate(-15deg);
-o-transform:rotate(-15deg);
opacity:0.5;
}
.spot_list3{
float: left;
border:3px solid wheat;
transform:rotate(28deg);
-ms-transform:rotate(28deg);
-moz-transform:rotate(28deg);
-webkit-transform:rotate(28deg);
-o-transform:rotate(28deg);
opacity:0.5;
}
.div1_1{
border: 10px solid gainsboro;
width: 830px;
height: 300px;
left: 10%;
top: 10%;
position: relative;
overflow: hidden;
}
.btn {
width: 100%;
height: 80px;
position: absolute;
margin: 0 auto;
top: 120px;
}
.box_big {
position: absolute;
height: 400px;
vertical-align: middle
}
#imgList{
list-style: none;
position: absolute;
}
#imgList li{
float: left;
margin: 0 10px;
}
.left_btn, .right_btn {
width: 30px;
height: 80px;
background:gray;
line-height: 90px;
border-radius: 10px;
}
.left_btn {
float: left;
}
.right_btn {
float: right;
}
#navDiv{
position: absolute;
left: 300px;
}
#navDiv a{
float: left;
width: 15px;
height: 15px;
border-radius:50%;
background-color: black;
margin: 0 10px;
opacity: 0.5;
filter: alpha(opacity=50);
}
#navDiv a:hover{
background-color: red;
}
</style>
</head>
<body>
<div class="div0"></div>
<div class="div1">
<div class="div1_1">
<div id="navDiv">
<a href="javascript:;" ></a>
<a href="javascript:;" ></a>
<a href="javascript:;" ></a>
<a href="javascript:;" ></a>
<a href="javascript:;" ></a>
<a href="javascript:;" ></a>
</div>
<div class="box_big">
<ul id="imgList">
<li><img src="img/1.jpg" id="1" ></li>
<li><img src="img/2.jpg" id="2></li>
<li><img src="img/3.jpg" id="3"/></li>
<li><img src="img/4.jpg" id="4"/></li>
<li><img src="img/5.jpg" id="5"/></li>
<li><img src="img/6.jpg" id="6"/></li>
</ul>
</div>
<div class="btn">
<div class="left_btn"><img src="img/prev.png"></div>
<div class="right_btn"><img src="img/next.png"></div>
</div>
</div>
</div>
<!--小标图片-->
<div class="div2" onmouseleave="m1()">
<div class="spot">
<img src="img/thumbs/1.jpg" class="spot_list1" id="spot_list1" onmouseover="mouseover(1)" onmouseout="mouseout(1)">
<img src="img/thumbs/2.jpg" class="spot_list2" id="spot_list2" onmouseover="mouseover(2)" onmouseout="mouseout(2)">
<img src="img/thumbs/3.jpg" class="spot_list3" id="spot_list3" onmouseover="mouseover(3)" onmouseout="mouseout(3)">
<img src="img/thumbs/4.jpg" class="spot_list1" id="spot_list4" onmouseover="mouseover(4)" onmouseout="mouseout(4)">
<img src="img/thumbs/5.jpg" class="spot_list2" id="spot_list5" onmouseover="mouseover(5)" onmouseout="mouseout(5)">
<img src="img/thumbs/6.jpg" class="spot_list3" id="spot_list6" onmouseover="mouseover(6)" onmouseout="mouseout(6)">
</div>
</div>
</body>
<script>
var box=document.getElementById("1");
//var spot = document.getElementsByClassName("spot_list");
var left_btn=document.getElementsByClassName("left_btn")[0];
var right_btn=document.getElementsByClassName("right_btn")[0];
var time = null;
var count = 0;
var ids=document.getElementsByTagName("a");
ids[0].style.backgroundColor="red";
var spot_list1=document.getElementById("spot_list1");
spot_list1.setAttribute("class","spot_list3");
spot_list1.style.opacity="0.98";
//左按钮
left_btn.onclick=function(){
count--;
if(count<1){
count=6
}
box.src="img/" + count + ".jpg";
for(var i=0;i<ids.length;i++){
ids[i].style.backgroundColor="black";
}
ids[count - 1].style.backgroundColor="red";
for(var i=1;i<=6;i++){
var img=document.getElementById("spot_list"+i);
if(img.id=="spot_list1" || img.id=="spot_list4"){
img.setAttribute("class","spot_list1");
img.style.opacity="0.5";
}else if(img.id=="spot_list2" || img.id=="spot_list5"){
img.setAttribute("class","spot_list2");
img.style.opacity="0.5";
}else if(img.id=="spot_list3" || img.id=="spot_list6"){
img.setAttribute("class","spot_list3");
img.style.opacity="0.5";
}
}
var img=document.getElementById("spot_list"+count);
if(img.id=="spot_list1" || img.id=="spot_list4"){
img.setAttribute("class","spot_list3");
img.style.opacity="0.98";
}else if(img.id=="spot_list2" || img.id=="spot_list5"){
img.setAttribute("class","spot_list3");
img.style.opacity="0.98";
}else if(img.id=="spot_list3" || img.id=="spot_list6"){
img.setAttribute("class","spot_list1");
img.style.opacity="0.98";
}
}
//右按钮
right_btn.onclick=function(){
changeImg();
}
//
var x=1;
var changeImg = function(){
x++;
if(x > 6){
x = 1;
}
box.src = "img/" + x + ".jpg";
for(var i=0;i<ids.length;i++){
ids[i].style.backgroundColor="black";
}
ids[x - 1].style.backgroundColor="red";
for(var i=1;i<=6;i++){
var img=document.getElementById("spot_list"+i);
if(img.id=="spot_list1" || img.id=="spot_list4"){
img.setAttribute("class","spot_list1");
img.style.opacity="0.5";
}else if(img.id=="spot_list2" || img.id=="spot_list5"){
img.setAttribute("class","spot_list2");
img.style.opacity="0.5";
}else if(img.id=="spot_list3" || img.id=="spot_list6"){
img.setAttribute("class","spot_list3");
img.style.opacity="0.5";
}
}
var img=document.getElementById("spot_list"+x);
if(img.id=="spot_list1" || img.id=="spot_list4"){
img.setAttribute("class","spot_list3");
img.style.opacity="0.98";
}else if(img.id=="spot_list2" || img.id=="spot_list5"){
img.setAttribute("class","spot_list3");
img.style.opacity="0.98";
}else if(img.id=="spot_list3" || img.id=="spot_list6"){
img.setAttribute("class","spot_list1");
img.style.opacity="0.98";
}
}
//设置计时器
var show;
show=setInterval(changeImg, 3000);
//图片切换
function mouseover(n){
clearInterval(show);
var img=document.getElementById("spot_list"+n);
if(img.id=="spot_list1" || img.id=="spot_list4"){
img.setAttribute("class","spot_list3");
img.style.opacity="0.98";
}else if(img.id=="spot_list2" || img.id=="spot_list5"){
img.setAttribute("class","spot_list3");
img.style.opacity="0.98";
}else if(img.id=="spot_list3" || img.id=="spot_list6"){
img.setAttribute("class","spot_list1");
img.style.opacity="0.98";
}
box.src="img/"+n+".jpg";
for(var i=0;i<ids.length;i++){
ids[i].style.backgroundColor="black";
}
ids[n-1].style.backgroundColor="red";
}
for(let i=0;i<ids.length;i++){
ids[i].onclick=function(){
clearInterval(show);
for(var n=0;n<ids.length;n++){
ids[n].style.backgroundColor="black";
}
box.src="img/"+(i+1)+".jpg";
ids[i].style.backgroundColor="red";
}
}
//离开小图标时
function mouseout(n){
var img=document.getElementById("spot_list"+n);
ids[n-1].style.backgroundColor="black";
if(img.id=="spot_list1" || img.id=="spot_list4"){
img.setAttribute("class","spot_list1");
img.style.opacity="0.5";
}else if(img.id=="spot_list2" || img.id=="spot_list5"){
img.setAttribute("class","spot_list2");
img.style.opacity="0.5";
}else if(img.id=="spot_list3" || img.id=="spot_list6"){
img.setAttribute("class","spot_list3");
img.style.opacity="0.5";
}
}
function m1(){
//启动计时器
show=setInterval(changeImg, 3000);
}
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。
上一篇：vue中activated的用法
下一篇：使用jquery实现轮播图效果