欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

基于JavaScript实现轮播图效果

程序员文章站 2022-03-08 15:32:58
本文实例为大家分享了javascript实现轮播图效果的具体代码,供大家参考,具体内容如下学习笔记(学校的课设),实现了左右切换,按指示点切换、按小图标切换和自动切换,但是还有某些功能没完善,如:切换...

本文实例为大家分享了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:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
 <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
 <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
 <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
 <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
 <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

相关标签: js 轮播图