首页
所有分类
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 相关文章推荐
纯JS实现的批量图片预览加载功能
Aug 14 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
Jul 28 Javascript
关于JS数组追加数组采用push.apply的问题
Jun 09 Javascript
javascript实现列表切换效果
May 02 Javascript
jQuery实现布局高宽自适应的简单实例
May 28 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
Dec 11 Javascript
微信小程序利用co处理异步流程的方法教程
May 20 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
Sep 14 Javascript
html中通过JS获取JSON数据并加载的方法
Nov 30 Javascript
vue 实现微信浮标效果
Sep 01 Javascript
微信小程序实现签到弹窗动画
Sep 21 Javascript
JavaScript高级程序设计之基本引用类型
Nov 17 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
SONY600GR(1) ICOM(2) R9700(1) R71E(1) WR-800F(1) DE1105(1) 胆机(1) DE1102(1) DE1107(3) R72E(1)
You might like
PHP HTML代码串 截取实现代码
2009/06/29 PHP
yii框架通过控制台命令创建定时任务示例
2014/04/30 PHP
php导出csv格式数据并将数字转换成文本的思路以及代码分享
2014/06/05 PHP
PHP Laravel中的Trait使用方法
2019/01/20 PHP
PHP设计模式之组合模式定义与应用示例
2020/02/01 PHP
jQuery检测返回值的数据类型
2015/07/13 Javascript
jquery实现先淡出再折叠收起的动画效果
2015/08/07 Javascript
vue实现todolist单页面应用
2017/04/11 Javascript
关闭Vue计算属性自带的缓存功能方法
2018/03/02 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
JavaScript实现多个物体同时运动
2020/03/12 Javascript
详解 Python 读写XML文件的实例
2017/08/02 Python
pandas创建新Dataframe并添加多行的实例
2018/04/08 Python
Python实现的读取电脑硬件信息功能示例
2018/05/30 Python
Tensorflow加载预训练模型和保存模型的实例
2018/07/27 Python
python实现飞机大战游戏
2020/10/26 Python
python实现高斯(Gauss)迭代法的例子
2019/11/20 Python
python中的 zip函数详解及用法举例
2020/02/16 Python
Python如何使用bokeh包和geojson数据绘制地图
2020/03/21 Python
python实现贪吃蛇游戏源码
2020/03/21 Python
全网首秀之Pycharm十大实用技巧(推荐)
2020/04/27 Python
CSS3 创建网页动画实现弹跳球动效果
2018/10/30 HTML / CSS
世界上最大的曲棍球商店：Pro Hockey Life
2017/10/30 全球购物
Under Armour安德玛法国官网：美国高端运动科技品牌
2018/06/29 全球购物
丝芙兰新加坡官网：Sephora新加坡
2018/12/04 全球购物
ShellScript面试题一则-ShellScript编程
2014/03/05 面试题
党员个人思想汇报
2013/12/28 职场文书
不打扫卫生检讨书
2014/02/12 职场文书
高考标语大全
2014/06/05 职场文书
2014派出所所长群众路线对照检查材料思想汇报
2014/09/18 职场文书
违反交通安全法检讨书
2014/10/24 职场文书
2015年档案室工作总结
2015/05/23 职场文书
安全教育的主题班会
2015/08/13 职场文书
爱国主题班会教案
2015/08/14 职场文书
php随机生成验证码，php随机生成数字，php随机生成数字加字母！
2021/04/01 PHP
移除Selenium中window.navigator.webdriver值
2022/06/10 Python