首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

基于JavaScript实现轮播图效果

Posted in Javascript onJanuary 02, 2021

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

基于JavaScript实现轮播图效果

- Author -

努力学习中.....

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery 学习之二 属性 文本与值(text,val)
Nov 25 Javascript
js的写法基础分析
Jan 17 Javascript
javascript常用的正则表达式实例
May 15 Javascript
搭建pomelo 开发环境
Jun 24 Javascript
JQuery validate插件Remote用法大全
May 15 Javascript
js+css3制作时钟特效
Oct 16 Javascript
从零学习node.js之利用express搭建简易论坛(七)
Feb 25 Javascript
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
vue中element 上传功能的实现思路
Jul 06 Javascript
详解用JS添加和删除class类名
Mar 25 Javascript
java实现单链表增删改查的实例代码详解
Aug 30 Javascript
使用Vue调取接口,并渲染数据的示例代码
Oct 28 Javascript
使用jquery实现轮播图效果
Jan 02 #jQuery
原生JS运动实现轮播图
Jan 02 #Javascript
基于JavaScript实现简单扫雷游戏
Jan 02 #Javascript
JS+CSS实现过渡特效
Jan 02 #Javascript
jQuery实现全选按钮
Jan 01 #jQuery
vue实现登录功能
Dec 31 #Vue.js
vue 实现图片懒加载功能
Dec 31 #Vue.js
for(1) 分词器(1) mediapipe(1) 无限迭代(1) okenizer(1) 事件调度器(1) cvzone(1) re模块(2) 计算机视觉(2) while(1)
You might like
PHP simplexml_load_file()函数讲解
2019/02/03 PHP
hover的用法及live的用法介绍(鼠标悬停效果)
2013/03/29 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
2013/06/28 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
2013/10/11 Javascript
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
2014/02/11 Javascript
js解决select下拉选不中问题
2014/10/14 Javascript
深入浅析JavaScript中prototype和proto的关系
2015/11/15 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
2017/01/22 Javascript
详谈JS中数组的迭代方法和归并方法
2017/08/11 Javascript
JavaScript简单实现合并两个Json对象的方法示例
2017/10/16 Javascript
VUE渲染后端返回含有script标签的html字符串示例
2019/10/28 Javascript
vue组件内部引入外部js文件的方法
2020/01/18 Javascript
在vue中动态修改css其中一个属性值操作
2020/12/07 Vue.js
vue 使用饿了么UI仿写teambition的筛选功能
2021/03/01 Vue.js
python获取指定目录下所有文件名列表的方法
2015/05/20 Python
Python 搭建Web站点之Web服务器与Web框架
2016/11/06 Python
Python读取图片为16进制表示简单代码
2018/01/19 Python
Django中的文件的上传的几种方式
2018/07/23 Python
python学生管理系统学习笔记
2019/03/19 Python
利用pandas将非数值数据转换成数值的方式
2019/12/18 Python
Python和Anaconda和Pycharm安装教程图文详解
2020/02/04 Python
python实现梯度下降和逻辑回归
2020/03/24 Python
Python面向对象实现方法总结
2020/08/12 Python
python 制作磁力搜索工具
2021/03/04 Python
一款纯css3实现的漂亮的404页面的实例教程
2014/11/27 HTML / CSS
法国太阳镜店：Sunglasses Shop
2016/08/27 全球购物
DBA的职责都有哪些
2012/05/16 面试题
学校司机岗位职责
2013/11/14 职场文书
标准化管理实施方案
2014/02/25 职场文书
大学生就业自荐书
2014/06/16 职场文书
幼儿园中班区域活动总结
2014/07/09 职场文书
应届大学生求职信
2014/07/20 职场文书
我们的节日国庆活动方案
2014/08/19 职场文书
MySQL开启事务的方式
2021/06/26 MySQL
sql通过日期判断年龄函数的示例代码
2021/07/16 SQL Server
Pandas自定义选项option设置
2021/07/25 Python