首页
所有分类
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 相关文章推荐
让firefox支持IE的一些方法的javascript扩展函数代码
Jan 02 Javascript
网页前台通过js非法字符过滤代码(骂人的话等等)
May 26 Javascript
jQuery控制iFrame(实例代码)
Nov 19 Javascript
JavaScript静态类型检查工具FLOW简介
Jan 06 Javascript
jquery mobile界面数据刷新的实现方法
May 28 Javascript
angular源码学习第一篇 setupModuleLoader方法
Oct 20 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
Feb 09 Javascript
jquery mobile实现可折叠的导航按钮
Mar 11 Javascript
详解如何制作并发布一个vue的组件的npm包
Nov 10 Javascript
简单了解JavaScript异步
May 23 Javascript
js实现页面多个日期时间倒计时效果
Jun 20 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
May 15 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
harbor(1) 自定义函数(1) procedure(1) GoFrame(3) V Rising(1) Tablespace(1) commit(1) 内置函数(1) Navicat(1) maven(2)
You might like
使用php get_headers 判断URL是否有效的解决办法
2013/04/27 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
PhpSpreadsheet设置单元格常用操作汇总
2020/11/13 PHP
jQuery :first选择器使用介绍
2013/08/09 Javascript
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
javascript实现密码验证
2015/11/10 Javascript
javascript实现C语言经典程序题
2015/11/29 Javascript
javascript中类的定义方式详解(四种方式)
2015/12/22 Javascript
jquery简单插件制作(fn.extend)完整实例
2016/05/24 Javascript
微信小程序 购物车简单实例
2016/10/24 Javascript
nodejs连接mysql数据库简单封装示例-mysql模块
2017/04/10 NodeJs
dropload.js插件下拉刷新和上拉加载使用详解
2017/10/20 Javascript
详解webpack编译速度提升之DllPlugin
2019/02/05 Javascript
微信小程序获取地理位置及经纬度授权代码实例
2019/09/18 Javascript
vue props 单项数据流实例分享
2020/02/16 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
2020/04/30 jQuery
解决vuecli3中img src 的引入问题
2020/08/04 Javascript
js实现简单的轮播图效果
2020/12/13 Javascript
[01:43]3.19DOTA2发布会 三代刀塔人第三代
2014/03/25 DOTA
[01:02:32]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第二场 2月26日
2021/03/11 DOTA
Python不规范的日期字符串处理类
2014/06/10 Python
Python读取网页内容的方法
2015/07/30 Python
Python 爬虫的工具列表大全
2016/01/31 Python
python获取当前用户的主目录路径方法(推荐)
2017/01/12 Python
Python面向对象之类和对象属性的增删改查操作示例
2018/12/14 Python
Python中logging实例讲解
2019/01/17 Python
django中使用Celery 布式任务队列过程详解
2019/07/29 Python
Python类super()及私有属性原理解析
2020/06/15 Python
Pycharm2020.1安装无法启动问题即设置中文插件的方法
2020/08/07 Python
Python自动发送和收取邮件的方法
2020/08/12 Python
布里斯班女装时尚品牌：Adrift
2017/12/28 全球购物
德语专业求职信
2014/03/12 职场文书
毕业大学生自荐信
2014/06/17 职场文书
工作批评与自我批评范文
2014/10/16 职场文书
老公婚前保证书
2015/02/28 职场文书
个性发展自我评价2015
2015/03/09 职场文书