首页
所有分类
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 相关文章推荐
幻宇的层模拟窗口效果－提供演示和下载
Jan 20 Javascript
jquery里的each使用方法详解
Dec 22 Javascript
js获取单选框或复选框值及操作
Dec 18 Javascript
Jquery中给animation加更多的运作效果实例
Sep 05 Javascript
div模拟选择框示例代码
Nov 03 Javascript
angularjs 处理多个异步请求方法汇总
Jan 06 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
Oct 28 Javascript
javascript简单判断输入内容是否合法的方法
May 11 Javascript
jQuery多文件异步上传带进度条实例代码
Aug 16 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
Jan 16 Javascript
JavaScript闭包的简单应用
Sep 01 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
Sep 25 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
申请书(21) 城市猎人(1) 帝国时代(1) explain(2) Docker(14) 波段(1) 文书(291) 西索(1) HAM-2000(1) AngularJS(2)
You might like
CI框架装载器Loader.php源码分析
2014/11/04 PHP
PHP内存缓存功能memcached示例
2016/10/19 PHP
js 禁用只读文本框获得焦点时的退格键
2010/04/25 Javascript
jquery trim() 功能源代码
2011/02/14 Javascript
ExtJs使用总结(非常详细)
2012/03/22 Javascript
javascript中onclick(this)用法介绍
2013/04/19 Javascript
利用js 进行输入框自动匹配字符的小例子
2013/06/29 Javascript
原生javaScript实现图片延时加载的方法
2014/12/22 Javascript
JQuery动画与特效实例分析
2015/02/02 Javascript
JavaScript检查子字符串是否在字符串中的方法
2016/02/03 Javascript
数组Array的排序sort方法
2017/02/17 Javascript
详解前端路由实现与react-router使用姿势
2017/08/07 Javascript
基于Bootstrap table组件实现多层表头的实例代码
2017/09/07 Javascript
JS实现DOM删除节点操作示例
2018/04/04 Javascript
mpvue跳转页面及注意事项
2018/08/03 Javascript
webpack dll打包重复问题优化的解决
2018/10/10 Javascript
vue-cli创建的项目中的gitHooks原理解析
2020/02/14 Javascript
深入解读Python解析XML的几种方式
2016/02/16 Python
Centos 升级到python3后pip 无法使用的解决方法
2018/06/12 Python
python跳过第一行快速读取文件内容的实例
2018/07/12 Python
python3中eval函数用法使用简介
2019/08/02 Python
Python爬虫之Selenium警告框(弹窗)处理
2020/12/04 Python
Pyside2中嵌入Matplotlib的绘图的实现
2021/02/22 Python
iframe跨域的几种常用方法
2019/11/11 HTML / CSS
泰国汽车、火车和轮渡票预订网站：Bus Online Ticket
2017/09/09 全球购物
美国在线购物频道：Shop LC
2019/04/21 全球购物
会计学财务管理专业个人的自我评价
2013/10/19 职场文书
财务出纳员岗位职责
2013/11/26 职场文书
青年教师培训方案
2014/02/06 职场文书
电大会计学自我鉴定
2014/02/06 职场文书
法院授权委托书范文
2014/08/02 职场文书
学校领导班子成员查摆问题及整改措施
2014/10/28 职场文书
学生退学证明
2015/06/23 职场文书
退伍军人感言
2015/08/01 职场文书
python图像处理基本操作总结（PIL库、Matplotlib及Numpy）
2021/06/08 Python
java如何实现获取客户端ip地址的示例代码
2022/04/07 Java/Android