当前位置:首页 > 编程教程 > javascript技术文章 > 基于JavaScript实现图片连播和联级菜单实例代码

JavaScript实现图片连播以及联级菜单的知识点

  • 发布时间:
  • 作者:码农之家
  • 点击:147

这篇文章主要知识点是关于js、图片轮播、联级菜单、JS图片轮播与索引变色功能实例详解 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

JavaScript权威指南
  • 类型:JS指南大小:22 MB格式:PDF作者:DavidFlanagan,淘宝前端团队
立即下载

基于JavaScript实现图片连播和联级菜单实例代码

基于JavaScript实现图片连播和联级菜单实例代码

<!DOCTYPE html>
<html>
 <head>
 <title>图片轮播</title>
 <style>
  div{
  border: 1px solid red;
  width:218px;
  height: 218px;
  }
  .show{
  display: inline-block;
  }
  .hide{
  display: none;
  }
 </style>
 <meta charset="UTF-8">
 </head>
 <body>
 <!-- onmouseover="" 鼠标悬停事件
  onmouseout="" 鼠标离开事件-->
 <div onmouseover="pause1();" onmouseout="lunbo();">
  <img src="../images/01.jpg" class="show"/>
  <img src="../images/02.jpg" class="hide"/>
  <img src="../images/03.jpg" class="hide"/>
  <img src="../images/04.jpg" class="hide"/>
  <img src="../images/05.jpg" class="hide"/>
  <img src="../images/06.jpg" class="hide"/>
 </div>
 <script>
  //轮播
  var id = null;
  var index = 0;
  function lunbo() {
   //轮播次数
   id = setInterval(function () {
    index++;
    //获取所有图片
    var imgs = document.getElementsByTagName("img");
    //将他们隐藏
    for (var i = 0; i < imgs.length; i++) {
     imgs[i].className = "hide";
    }
    //将下一张隐藏
    var next = index % imgs.length;
    imgs[next].className = "show";
   }, 2000);
  }
  function pause1() {
   clearInterval(id);
  }
  //在页面加载后自动轮播
  lunbo();
 </script>
 </body>
</html>

联级菜单实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- <script type="text/javascript" src="demo6.js">
</script> -->
<title>联动菜单</title>
</head>
<body>
 省:
 <select id="province" onchange="chg();">
  <option value="-1">请选择</option>
  <option value="0">河北省</option>
  <option value="1">山东省</option>
  <option value="2">山西省</option>
 </select>
 市:
 <select id="city">
  <option>请选择</option>
 </select>
 <script>
  // 模拟加载城市
 function loadCities() {
 return[
  ["石家庄","廊坊","保定"],
  ["济南","青岛","德州"],
  ["太原","大同","阳泉"]
 ];
 }
 var cities=loadCities();
 console.log(cities);
 function chg() {
  var sel1=document.getElementById("province");
  //获取省份
  var pindex=sel1.value;
  //获取该省份的城市
  var pcities=cities[pindex];
  console.log(pcities);
  //删除城市下拉列表中的所有城市
  var sel2=document.getElementById("city");
  var options=sel2.getElementsByTagName("option");
  console.log(options);
  for(var i=options.length-1;i;i--){
   sel2.removeChild(options[i]);
  }
  //在增加该省份城市
  if(pcities){
   for(var i=0;i<pcities.length;i++){
    var opn=document.createElement("option");
    opn.innerHTML=pcities[i];
    sel2.appendChild(opn);
   }
  }
 }
 </script>
</body>
</html>

总结

以上所述是小编给大家介绍的基于JavaScript实现图片连播和联级菜单实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!

JS图片轮播与索引变色功能实例详解

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#tupian{ width:290px; height:160px; border:#0F9 solid 1px}
.tp{ width:220px; height:160px; float:left}
.li{ margin-top:10px;list-style:none; border:#00F solid 1px; width:20px;}
</style>
</head>
<body>
 <div id="tupian">
   <div class="tp" onmouseover="sbfs()" onmouseout="jixu()"><img src="../../项目素材/图片/84372.jpg" /></div>
   <div class="tp" onmouseover="sbfs()" onmouseout="jixu()"  ><img src="../../项目素材/图片/84610.jpg" /></div>
   <div class="tp" onmouseover="sbfs()" onmouseout="jixu()" ><img src="file:///C|/Users/gaofangquan/Desktop/项目素材/图片/84246.jpg" /></div>
   <div class="tp" onmouseover="sbfs()" onmouseout="jixu()" ><img src="../../项目素材/图片/84639 (1).jpg" /></div>
   <div id="xuanxiang" >
   <ul>
    <li class="li" onmouseover="xz(this),xuanzhong(this)" onmouseout="shuzilikai()">1</li>
    <li class="li" onmouseover="xz(this),xuanzhong(this)" onmouseout="shuzilikai()">2</li>
    <li class="li" onmouseover="xz(this),xuanzhong(this)" onmouseout="shuzilikai()">3</li>
    <li class="li" onmouseover="xz(this),xuanzhong(this)" onmouseout="shuzilikai()">4</li>
   </ul>
   </div>
 </div>
</body>
<script type="text/jscript">
var aaaa=document.getElementsByClassName("tp")
var bbb=document.getElementsByClassName("li")
var index=0;
lunbo();
function lunbo(){
 xianshi();
 if( index<aaaa.length-1){
  index++;}
  else{index=0;}}
 var a=window.setInterval("lunbo()",1000)
    //图片与数列的背景同时变化
 function xianshi(){
  for( var i=0;i<aaaa.length;i++){
   aaaa[i].style.display="none"
   bbb[i].style.backgroundColor="white"}
   aaaa[index].style.display="block"
   bbb[index].style.backgroundColor="red"}
 //鼠标放在数列上背景变色<br>function xz(n){
 var b=document.getElementsByClassName("li")
 for( var i=0; i<b.length; i++){
  b[i].style.backgroundColor="white"}
  n.style.backgroundColor="red"}
  //当鼠标放到图片上的时候,图片停止轮播
function sbfs(){
 window.clearInterval(a)}  
 //当鼠标离开图片的时候,轮播继续 
function jixu(){
  a=window.setInterval("lunbo()",1000);}
 //鼠标放上,图片与相对应的li的值得索引显示出来  
function xuanzhong(m){
 var ccc=document.getElementsByClassName("tp")
 index=m.innerHTML-1;// 因为m.innerhtml 获取的时数列li的值,比ccc的索引大1,所以应该减去1;
       //把获取的值赋给index是因为如果重新定义一个变量的话,当鼠标离开li的时候,图片轮播的索引很乱,
  for( var i=0;i<ccc.length;i++){
   ccc[i].style.display="none"}
   ccc[index].style.display="block"
   window.clearInterval(a)}
 //鼠标离开让图片自动切换  
function shuzilikai(){
 a=window.setInterval("lunbo()",1000)}
</script>
</html>

 1、js图片轮播首先要先获取所有图片的对象,用数组接受,然后定义一个变量作为数组的索引。

    2、让图片显示(先让所有的图片隐藏,再让当前图片显示),索引自增1。注意:在写定时器的时候可以写延时的也可以写间歇的。在这里我写间歇的。

    3、鼠标放在图片上停止轮播,这里我们可以清除定时器window.clearInterval(a);鼠标离开图片轮播继续再重新启动定时器a=window.setInterval("lunbo()",1000),这里注意要给定时器定义一个值,因为清除定时器要用。

    4、鼠标放上,图片与相对应的li的值得索引显示出来,让获取的数列的值赋给数组的索引(index=m.innerHTML-1),因为m.innerhtml 获取的时数列li的值,比数组的索引大1,所以应该减去1;

以上所述是小编给大家介绍的JS图片轮播与索引变色功能实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

js图片轮播 相关电子书
学习笔记
网友NO.577875

基于vue.js实现图片轮播效果

轮播图效果: 1.html template div class="shuffling" div class="fouce fl" div class="focus" ul class="showimg" template v-for='sd in shufflingData' li v-if='shufflingId==$index' v-on:mouseover='showPreNext' v-on:mouseout='hiddenPreNext' a target="_blank" title="{{sd.title}}" class="img" href="{{sd.href}}"img alt="{{sd.title}}" v-bind:src="sd.url"//a h3a target="_blank" title="{{sd.title}}" href="{{sd.href}}"{{sd.title}}/a/h3 /li /template /ul div class='bullet-pagination' a class="bullet" v-bind:class="{'active': shufflingId==0}" v-on:click='bulletFunOne'/a a class="bullet" v-bind:class="{'active': shufflingId==1}" v-on:click='bulletFunTwo'/a a class="bullet" v-bind:class="{'active': shufflingId==2}" v-on:click='bulletFunThree'/a /div div v-show='PreNext' class="preNext pre" v-on:mouseover='showPreNext' v-on:mouseout='hiddenPreNext' v-on:click='preFun'/div div v-show='PreNext' class="preNext next" v-on:mouseover='showPreNext' v-on:mouseout='hiddenPreNext' v-on:click='nextFun'/div /di……

网友NO.887513

利用vueJs实现图片轮播实例代码

最近新学习了vuejs,尝试着用vuejs写了一个简单的图片轮播,便做个简单的记录 以下只贴出carousel.vue代码,其他的省略 template div ref="root" div class="sliderPanel" div v-for="(item,index) in imgArray" class="verticalCenter picbox" transition name="slide-fade" img : @mouseover="clearAuto" @mouseout="slideAuto" v-show="index===selectIndex" :src="item.url" /transition /div /div div @click="clickLeft" @mouseover="clearAuto" @mouseout="slideAuto" class="arrowLeft verticalCenter horizaCenter" 左移 /div div @click="clickRight" @mouseover="clearAuto" @mouseout="slideAuto" class="arrowRight verticalCenter horizaCenter" 右移 /div div class="sliderBar horizaCenter" div v-for="(item,index) in imgArray" @mouseover="clearAuto" @mouseout="slideAuto" @click="setIndex(index)" class="circle" :class="{circleSelected:index===selectIndex}" /div /div /div /template script const SCREEN_WIDTH=document.body.clientWidth//网页可见区域宽 const SCREEN_HEIGHT=documen……

网友NO.692557

JS 实现banner图片轮播效果(鼠标事件)

一.要实现的效果 1.点击左右可切换图片 2.点击小圆点 可切换图片 二.效果图 三.代码 1.css style type="text/css"body,img,span,ul,li{margin: 0;padding: 0;}#div1{width: 600px;height: 350px;margin: 150px auto;border: 10px solid #eee;position: relative;}img{width: 600px;height: 350px;}span{display: inline-block;position: absolute;width: 50px;height: 50px;border-radius: 25px;background:rgba(0,0,0,.3); font-size: 30px;line-height: 50px;text-align: center;cursor: pointer;color: white;}span:hover{background:rgba(255,255,255,.5);color:black;transform:scale(1.3);}span#L{left: 10px;top: 150px;}span#R{right: 10px;top: 150px;}#div1 #ul{position: absolute;bottom: 10px;left: 250px;width: 125px;height: 20px;}#div1 #ul li{list-style: none;float: left;height: 20px;width: 20px;border-radius: 10px;background:rgba(255,255,255,.5); margin-right: 5px;cursor: pointer;}#div1 #ul .active{background:rgba(0,0,0,.5);}/style 2.html body div id="div1" img src="" alt="" span id="L"/span spa……

网友NO.577688

js图片轮播插件的封装

本文为大家分享了js图片轮播插件的具体代码,供大家参考,具体内容如下 我封装的这个轮播插件只需要获取到图片和按钮就可以啦。 css 样式 .body{ width: 700px; margin: 100px auto; position: relative; height: 300px; overflow: hidden; } .body img{ width: 700px; position: absolute; display: none; } .body ul{ position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); } .body li{ list-style: none; float: left; width: 15px; height: 15px; border-radius: 50px; background: none; border: 2px solid #fff; margin-right: 10px; cursor: pointer; } .active{ background-color: #fff !important; } .body a{ text-decoration: none; position: absolute; display: block; top: 50%; transform: translateY(-50%); height: 50px; width: 30px; background-size: 100% 60%; background-color: rgba(0,0,0,0.3); } .left{ left: 0; background: url('../img/left.png') no-repeat center center; } .right{ right: 0; background: url('../img/right.png') no-repeat center cente……

网友NO.590012

js实现图片轮播效果学习笔记

本文实例为大家分享了js实现图片轮播效果的具体代码,供大家参考,具体内容如下 具体思路: 一、页面加载、获取整个容器、所有放数字索引的li及放图片列表的ul、定义放定时器的变量、存放当前索引的变量index 二、添加定时器,每隔2秒钟index递增一次、调用一次切换图片函数 提示: 1、 index不能一直无限制的递增下去,需做判断 2、调用切换图片函数时需将递增之后的index作为参数传过去 三、定义图片切换函数 提示: 1.遍历所有放数字索引的li,将每个li上的类去掉。 2.根据传递过来的index值找到对应的li给它添加类设为当前高亮显示。 3. 根据传递过来的index值计算放图片的ul的top值 4. 改变index的值,让其等于传递过来的参数值 注意: 放图片的ul的top值=-index*单张图片的高度(所有图片必须等高) 四、鼠标划过整个容器时,图片停止切换,离开继续……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com