首页
所有分类
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 相关文章推荐
splice slice区别
Oct 09 Javascript
JQuery onload、ready概念介绍及使用方法
Apr 27 Javascript
js判断选择时间不能小于当前时间的示例代码
Sep 24 Javascript
js与jquery回车提交的方法
Feb 03 Javascript
JS数字抽奖游戏实现方法
May 04 Javascript
JQuery 设置checkbox值二次无效的解决方法
Jul 22 Javascript
javascript 数组的正态分布排序的问题
Jul 31 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
Dec 26 Javascript
JS实现的RC4加密算法示例
Aug 16 Javascript
js canvas实现红包照片效果
Aug 21 Javascript
ionic2.0双击返回键退出应用
Sep 17 Javascript
Vue + iView实现Excel上传功能的完整代码
Jun 22 Vue.js
使用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
阿联酋购物网站(26) 芬兰购物网站(10) 欧洲购物网站(15) 葡萄牙购物网站(13) 南非购物网站(8) 土耳其购物网站(10) 奥地利购物网站(28) 哥伦比亚购物网站(5) 荷兰购物网站(99) 泰国购物网站(30)
You might like
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
PHP4和PHP5版本下解析XML文档的操作方法实例分析
2017/05/20 PHP
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
2012/05/23 Javascript
Three.js源码阅读笔记(光照部分)
2012/12/27 Javascript
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
jQuery实现表格颜色交替显示的方法
2015/03/09 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
2015/06/05 Javascript
详解JavaScript编程中正则表达式的使用
2015/10/25 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
2015/12/24 Javascript
jQuery判断checkbox选中状态
2016/05/12 Javascript
微信小程序（三）：网络请求
2017/01/13 Javascript
微信小程序 本地数据存储实例详解
2017/04/13 Javascript
纯js实现图片匀速淡入淡出效果
2017/08/22 Javascript
JavaScript实现打印星型金字塔功能实例分析
2017/09/27 Javascript
mongoose更新对象的两种方法示例比较
2017/12/19 Javascript
node下使用UglifyJS压缩合并JS文件的方法
2018/03/07 Javascript
JavaScript实现一个简易的计算器实例代码
2018/05/10 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
2018/06/29 Javascript
vue首次赋值不触发watch的解决方法
2018/09/11 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍（推荐）
2019/04/08 Javascript
Vue 子组件与数据传递问题及注意事项
2019/07/11 Javascript
python进程类subprocess的一些操作方法例子
2014/11/22 Python
Python实现从脚本里运行scrapy的方法
2015/04/07 Python
Python中操作符重载用法分析
2016/04/29 Python
Google开源的Python格式化工具YAPF的安装和使用教程
2016/05/31 Python
Python 中的range(),以及列表切片方法
2018/07/02 Python
Python 存储字符串时节省空间的方法
2019/04/23 Python
Tensorflow 实现将图像与标签数据转化为tfRecord文件
2020/02/17 Python
CSS3 translate导致字体模糊的实例代码
2019/08/30 HTML / CSS
Betsey Johnson官网：妖娆可爱的连衣裙及鞋子、手袋和配件
2016/12/30 全球购物
Fossil德国官网：化石手表、手袋、珠宝及配件
2019/12/07 全球购物
vue 中 get / delete 传递数组参数方法
2021/03/23 Vue.js
车间班组长的职责
2013/12/13 职场文书
小孩不笨观后感
2015/06/03 职场文书
超市店长竞聘书
2015/09/15 职场文书
七年级上册生物的课件
2019/08/07 职场文书