奥门巴黎人手机网址【app】

JavaScript 轮播图和自定义滚动条同盟鼠标滚轮共享代码贴

2019-08-22 09:04·澳门巴黎人开户

上述正是本文的全体内容,希望对大家的读书抱有支持,也冀望我们多多帮忙脚本之家。

基于javascript达成样式清新图片轮播特效,javascript样式

本文实例为大家大快朵颐了javascript完成图片轮播特效,供大家参谋,具体内容如下

一、达成效果与利益

图片 1

如上图:

  1、图片自动依第一轮换,每轮换成一张图片,下边临应的小Logo出现深灰蓝边框,并展示相应的图纸名称

  2、鼠标放到大图片下边包车型客车时,图片截至轮换,平素显示当前图片;鼠标移开后图片继续轮流

  3、鼠标移到小图标上时,大图片区域会显得相应的大图;鼠标移开则从此时此刻图片初叶继续轮流

二、代码

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>带小图标的JS图片轮换</title>
 <style type="text/css">
  *{
   margin: 0px;
   padding: 0px;
  }
  #content{
   width: 700px;
   height: 538px;
   margin: 0px auto; /*使所有内容居中*/
   border: solid #F0F0F0;
  }

  /*定义下面小图标处样式*/
  #nav1 table{
   width: 100%;
   height: 35px;
   margin-top: -4px;
  }
  #nav1 td{
   width: 35px;
   height: 35px;
   text-align: center; /*文字居中*/
   color: #ffffff;
  }
  #text{

  }
  #_text{
   width: 100%;
   height: 100%;
   background-color: #F0F0F0;
   border: none;
   text-align: center;
   font-size: 18px;
   color: #000000;
   font-weight: bold;
  }
 </style>
</head>
<body onload="changeImg()">
 <div id="content">
  <div id="images">
   <img id="_photoes" src="../images/textPhoto/1.jpg" height="500px" width="700px" onmouseover="over1()" onmouseout="out1()">
  </div>
  <div id="nav1">
   <table border="0">
    <tr>
     <td id="text" bgcolor="#F0F0F0" colspan="15"><input type="text" id="_text" readonly></td>
     <td id="img1" class="sImg" bgcolor="#db7093" onmouseover="over2(1)" onmouseout="out2(1)">1</td>
     <td id="img2" class="sImg" bgcolor="#da70d6" onmouseover="over2(2)" onmouseout="out2(2)">2</td>
     <td id="img3" class="sImg" bgcolor="#9acd32" onmouseover="over2(3)" onmouseout="out2(3)">3</td>
     <td id="img4" class="sImg" bgcolor="#adff2f" onmouseover="over2(4)" onmouseout="out2(4)">4</td>
     <td id="img5" class="sImg" bgcolor="#00bfff" onmouseover="over2(5)" onmouseout="out2(5)">5</td>
    </tr>
   </table>
  </div>
 </div>

 <script type="text/javascript">
  //将轮换的大图片放入数组中
  var arr = new Array();
  arr[0] = "../images/textPhoto/1.jpg";
  arr[1] = "../images/textPhoto/2.jpg";
  arr[2] = "../images/textPhoto/3.jpg";
  arr[3] = "../images/textPhoto/4.jpg";
  arr[4] = "../images/textPhoto/5.jpg";

  //将input区域变换的文字放在数组里
  var text = new Array();
  text[0] = "焦点图1";
  text[1] = "焦点图2";
  text[2] = "焦点图3";
  text[3] = "焦点图4";
  text[4] = "焦点图5";

  var smallImg = document.getElementsByClassName("sImg"); //将页面上所有小图片存放在一个数组

  var num = 0;
  function changeImg() {
   document.getElementById("_photoes").src = arr[num];
   document.getElementById("_text").value = text[num];
   //当前小图标增加边框样式
   for(var i=0;i<arr.length;i++) {
    if(i==num) smallImg[num].style.border = "red solid"; //大图标对应的小图标增加边框样式
    else smallImg[i].style.border = "none";
   }
   if (num == arr.length - 1) num = 0; //如果显示的是最后一张图片,则图片序号变为第一张的序号
   else num += 1; //图片序号加一
  }

  var setID = setInterval("changeImg()",1000); //这样写任然会不断调用changeImg()函数

  /*当鼠标滑到大图标上时*/
  function over1() {
   clearInterval(setID); //图片停止轮换
//   smallImg[n-1].style.border = "red solid";
  }

  /*当鼠标离开大图标时*/
  function out1() {
   setID = setInterval("changeImg()",1000);  //图片继续轮换
//   smallImg[n-1].style.border = "none"; //大图标对应的小图标边框样式取消
  }

  /*当鼠标滑到小图标上时*/
  function over2(n) {
   document.getElementById("_photoes").src = arr[n-1]; //只要鼠标滑到小图标上,大图区域就显示对应的图片
   document.getElementById("_text").value = text[n-1];
   clearInterval(setID); //图片停止轮换
   //当前小图标增加边框样式
   for(var i=0;i<arr.length;i++) {
    if(i==n-1) smallImg[n-1].style.border = "red solid";
    else smallImg[i].style.border = "none";
   }
  }

  /*当鼠标离开小图标时*/
  function out2(n) {
   if(n!=arr.length)
    num = n; //从当前图片开始轮换
   else num = 0;
   setID = setInterval("changeImg()",1000);  //图片继续轮换
//   smallImg[n-1].style.border = "none"; //小图标边框样式取消
  }
 </script>
</body>
</html>

三、多张图片轮换调节和测量检验笔记

js源代码:

//实现几张图片的轮换
var num = 0;  //显示的图片序号,刚开始时是第一张图片
function changeImg1() {
  var arr = new Array();
  arr[0]="../images/hao123/7.jpg";
  arr[1]="../images/hao123/8.jpg";
  arr[2]="../images/hao123/9.jpg";
  var photo = document.getElementById("topPhoto");
  if (num == arr.length - 1) num = 0;  //如果显示的是最后一张图片,则图片序号变为第一张的序号
  else num += 1;  //图片序号加一
  photo.src = arr[num];
}
setInterval("changeImg1()",5000);  //每隔5000毫秒调用一次changImg1()函数 

HTML代码:

<img src="../images/hao123/7.jpg" id="topPhoto">

在运用的时候最棒定义一下图形的体裁,把图纸的长宽都统一,那样图片动态展现的成效会越来越好有的。

如上正是本文的全部内容,希望对大家学习javascript程序设计具备帮忙。

你大概感兴趣的作品:

  • 很棒的一组js图片轮播特效
  • js仿金立官方网址图片轮播特效
  • js制作网址首页图片轮播特效代码
  • 让图片跳跃起来 javascript图片轮播特效
  • 自在实现javascript图片轮播特效
  • 原生js实现图片轮播特效
  • js图片轮播特效代码分享
  • JavaScript贯彻带题指标图片轮播特效
  • 原生js和jquery实现图片轮播特效
  • 原生js轮播特效

你也许感兴趣的稿子:

  • javascript监听鼠标滚轮事件浅析
  • js 事件目标鼠标滚轮效果演示验证
  • js捕获鼠标滚轮事件代码
  • js达成鼠标滚轮调整图片缩放效果的点子
  • js鼠标点击图片切换效果实现代码
  • 最简便易行的js图片切换效果达成代码
  • 纯js完毕背景图片切换效果代码
  • javascript贯彻图片切换的幻灯片效果源代码
  • JS图片切换的具体方法(带缩略图版)
  • js+div达成文字滚动和图纸切换效果代码
  • JavaScript贯彻鼠标滚轮调整页面图片切换功用示例

图片 2

你或然感兴趣的篇章:

  • js 图片轮播(5张图纸)
  • 原生javascript完结图片轮播效果代码
  • 带左右箭头图片轮播的JS代码
  • 轻松易行的js图片轮换代码(js图片轮播)
  • js图片自动轮播代码共享(js图片轮播)
  • JS完成简易图片轮播效果的办法
  • 原生js和jquery完结图片轮播特效
  • 原生js和jquery完毕图片轮播淡入淡出效果
  • JavaScript图片轮播代码共享
  • js淡入淡出的图片轮播效果代码分享

本文实例为我们大快朵颐了javascript已毕图片轮播特效,供大家参考,具体内容如下 一、...

上述正是本文的全体内容,希望对大家学习javascript程序设计具备援救。

下边看下自定义滚动条协作鼠标滚轮DEMO

图片 3

图片 4

具体代码如下所示:

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>js美术馆</title> 
<script type="text/javascript" > 
 function showPic(whichpic) 
 { 
  var source=whichpic.getAttribute("href"); 
  var placeholder= document.getElementById("placeholder"); 
  placeholder.setAttribute("src",source); 
 } 
</script> 
<style> 
 .wrap{ 
  width:1000px; 
  margin:0 auto; 
  } 

 .place{ 
  margin:0 auto; 
  text-align:center; 
  } 
  .table{ 
  width:1000px; 
  height:27px; 
  margin-bottom:10px; 
  } 
  .table li{ 
  float:left; 
  line-height:27px; 
  list-style-type: none; 
  width: 100px; 
  font-family: "微软雅黑"; 
  text-align: center; 
  } 
</style> 
<body> 
<div class="wrap"> 
<h1>Snapshots</h1> 
<div class="table"> 
<ul> 
 <li> 
  <a href="images/网站1.jpg" onclick="showPic(this);return false;" title="A display">第一个</a> 
 </li> 
 <li> 
  <a href="images/网站2.jpg" onclick="showPic(this);return false;" title="B display">第二个</a> 
 </li> 
 <li> 
  <a href="images/网站3.jpg" onclick="showPic(this);return false;" title="C display">第三个</a> 
 </li> 
 <li> 
  <a href="images/网易.PNG" onclick="showPic(this);return false;" title="D display">第四个</a> 
 </li> 
 <li> 
  <a href="images/MOOC中国.PNG" onclick="showPic(this);return false;" title="E display">第五个</a> 
 </li> 
</ul> 
</div> 
//添加一个占位符 
<div class="place"> 
<img id="placeholder" src="images/ad.jpg" alt="my image" /> 
</div> 
<!--place end--> 
</div> 
<!--wrap end--> 
</body> 
</html> 
<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>带小图标的JS图片轮换</title>
 <style type="text/css">
  *{
   margin: 0px;
   padding: 0px;
  }
  #content{
   width: 700px;
   height: 538px;
   margin: 0px auto; /*使所有内容居中*/
   border: solid #F0F0F0;
  }

  /*定义下面小图标处样式*/
  #nav1 table{
   width: 100%;
   height: 35px;
   margin-top: -4px;
  }
  #nav1 td{
   width: 35px;
   height: 35px;
   text-align: center; /*文字居中*/
   color: #ffffff;
  }
  #text{

  }
  #_text{
   width: 100%;
   height: 100%;
   background-color: #F0F0F0;
   border: none;
   text-align: center;
   font-size: 18px;
   color: #000000;
   font-weight: bold;
  }
 </style>
</head>
<body onload="changeImg()">
 <div id="content">
  <div id="images">
   <img id="_photoes" src="../images/textPhoto/1.jpg" height="500px" width="700px" onmouseover="over1()" onmouseout="out1()">
  </div>
  <div id="nav1">
   <table border="0">
    <tr>
     <td id="text" bgcolor="#F0F0F0" colspan="15"><input type="text" id="_text" readonly></td>
     <td id="img1" class="sImg" bgcolor="#db7093" onmouseover="over2(1)" onmouseout="out2(1)">1</td>
     <td id="img2" class="sImg" bgcolor="#da70d6" onmouseover="over2(2)" onmouseout="out2(2)">2</td>
     <td id="img3" class="sImg" bgcolor="#9acd32" onmouseover="over2(3)" onmouseout="out2(3)">3</td>
     <td id="img4" class="sImg" bgcolor="#adff2f" onmouseover="over2(4)" onmouseout="out2(4)">4</td>
     <td id="img5" class="sImg" bgcolor="#00bfff" onmouseover="over2(5)" onmouseout="out2(5)">5</td>
    </tr>
   </table>
  </div>
 </div>

 <script type="text/javascript">
  //将轮换的大图片放入数组中
  var arr = new Array();
  arr[0] = "../images/textPhoto/1.jpg";
  arr[1] = "../images/textPhoto/2.jpg";
  arr[2] = "../images/textPhoto/3.jpg";
  arr[3] = "../images/textPhoto/4.jpg";
  arr[4] = "../images/textPhoto/5.jpg";

  //将input区域变换的文字放在数组里
  var text = new Array();
  text[0] = "焦点图1";
  text[1] = "焦点图2";
  text[2] = "焦点图3";
  text[3] = "焦点图4";
  text[4] = "焦点图5";

  var smallImg = document.getElementsByClassName("sImg"); //将页面上所有小图片存放在一个数组

  var num = 0;
  function changeImg() {
   document.getElementById("_photoes").src = arr[num];
   document.getElementById("_text").value = text[num];
   //当前小图标增加边框样式
   for(var i=0;i<arr.length;i++) {
    if(i==num) smallImg[num].style.border = "red solid"; //大图标对应的小图标增加边框样式
    else smallImg[i].style.border = "none";
   }
   if (num == arr.length - 1) num = 0; //如果显示的是最后一张图片,则图片序号变为第一张的序号
   else num += 1; //图片序号加一
  }

  var setID = setInterval("changeImg()",1000); //这样写任然会不断调用changeImg()函数

  /*当鼠标滑到大图标上时*/
  function over1() {
   clearInterval(setID); //图片停止轮换
//   smallImg[n-1].style.border = "red solid";
  }

  /*当鼠标离开大图标时*/
  function out1() {
   setID = setInterval("changeImg()",1000);  //图片继续轮换
//   smallImg[n-1].style.border = "none"; //大图标对应的小图标边框样式取消
  }

  /*当鼠标滑到小图标上时*/
  function over2(n) {
   document.getElementById("_photoes").src = arr[n-1]; //只要鼠标滑到小图标上,大图区域就显示对应的图片
   document.getElementById("_text").value = text[n-1];
   clearInterval(setID); //图片停止轮换
   //当前小图标增加边框样式
   for(var i=0;i<arr.length;i++) {
    if(i==n-1) smallImg[n-1].style.border = "red solid";
    else smallImg[i].style.border = "none";
   }
  }

  /*当鼠标离开小图标时*/
  function out2(n) {
   if(n!=arr.length)
    num = n; //从当前图片开始轮换
   else num = 0;
   setID = setInterval("changeImg()",1000);  //图片继续轮换
//   smallImg[n-1].style.border = "none"; //小图标边框样式取消
  }
 </script>
</body>
</html>
<div class="slider" id="circle">
<a href=""><img src="img/6p.jpg" alt="图片 5" /></a>
`
<ul class="circle" >
<li onclick="lun(1)" id="ico1">1</li>
<li onclick="lun(2)" id="ico2">2</li>
<li onclick="lun(3)" id="ico3">3</li>
<li onclick="lun(4)" id="ico4">4</li>
<li onclick="lun(5)" id="ico5">5</li>
<li class="current" onclick="lun(6)" id="ico6">6</li>
</ul>
<div class="arrow">
<a href="javaScript:;" class="arrow-l"onclick="bo2()" id="bo1"><</a>
<a href="javaScript:;" class="arrow-r"onclick="bo1()" id="bo2">></a>
</div>
</div>
<script>
var c = 0 ;
var t ;
window.onload = function () {
t = setInterval("bo1()",5000);
}
function lun(num){
c = num ;
var ptn = document.getElementById("circle").getElementsByTagName("img")[0];
for (var i = 1 ; i < 7;i++ ) {
var li = document.getElementById("circle").getElementsByTagName("li")[i-1];
li.style.backgroundColor = "#3E3E3E";
if (num == i) {
ptn.src = "img/"+ i + "p.jpg";
li.style.backgroundColor = "#B61B1F";
}
}
}
function bo1() {
if(c>=6){
c = 0 ;
}
c++;
lun(c);
}
function bo2() {
if(c<=1){
c = 7 ;
}
c--;
lun(c);
}
</script>

我们的目标是:

  3、鼠标移到小Logo上时,大图片区域会显得相应的大图;鼠标移开则从此时此刻图片开端继续轮流

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<link href="css/reset.css" rel="stylesheet" type="text/css">
<style type="text/css">
body
{
font-size: 14px;
font-family: Microsoft YaHei, Tahoma, Geneva, sans-serif;
background: #111;
}
#content ul
{
width: 960px;
margin: 150px auto;
padding: 60px 0;
}
#content ul li
{
margin-right: 20px;
width: 225px;
height: 180px;
float: left;
}
#content ul li:last-child
{
margin-right: 0;
}
#content ul li a
{
position: relative;
display: block;
width: 100%;
height: 100%;
/*舞台(动画元素的父容器)perspective*/
-webkit-perspective: 800px;
-moz-perspective: 800px;
}
#content ul li a > div
{
position: absolute;
left: 0;
height: 0;
width: 100%;
height: 100%;
color: #fff;
/*动画元素transform-style*/
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-webkit-transition: .8s ease-in-out ;
-moz-transition: .8s ease-in-out ;
/*动画元素背后设置为hidden*/
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
#content ul li a div:first-child
{
/*
绕y轴旋转
*/
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
z-index: 2;
}
#content ul li a div:last-child
{
background: url("images/bg.jpg") no-repeat 0 0;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
z-index: 1;
}
#content ul li a:hover div:first-child
{
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
}
#content ul li a:hover div:last-child
{
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
}
#content ul li a div h3
{
margin: 0 auto 15px;
padding: 15px 0;
width: 200px;
height: 16px;
line-height: 16px;
font-size: 14px;
text-align: center;
border-bottom: 1px #fff dashed;
}
#content ul li a div p
{
padding: 0 10px;
font-size: 12px;
text-indent: 2em;
line-height: 18px;
}
</style>
</head>
<body>
<div id="content">
<ul>
<li>
<a href="#" target="_blank">
<div><img alt="图片 6" src="images/1.jpg"/></div>
<div>
<h3>漩涡鸣人</h3>
<p>日本漫画家岸本齐史作品《火影忍者》中男主角。因为身上封印着邪恶的九尾妖狐,无父无母的他受尽了村人的冷眼与歧视,他下定决心要成为第六代火影,让所有人都认同他的存在。</p>
</div>
</a>
</li>
<li>
<a href="#" target="_blank">
<div>
<img alt="图片 7" src="images/2.jpg"/>
</div>
<div>
<h3>日向雏田</h3>
<p>
日本漫画家岸本齐史作品《火影忍者》中的3号女主角。木叶忍者村的女忍者,木叶名门日向一族宗家族长的长女。喜欢漩涡鸣人,原本是个性格柔弱的女孩,但是在鸣人的影响下逐渐变得坚强,并逐渐成长为一名优秀的忍者。</p>
</div>
</a>
</li>
<li>
<a href="#" target="_blank">
<div><img alt="图片 8" src="images/3.jpg"/></div>
<div>
<h3>蒙奇·D·路飞</h3>
<p>蒙奇·D·路飞 是日本人气动漫 《海贼王》中的主人公。是日本人气动漫 《海贼王》中的主人公。草帽海贼团船长,梦想是找到传说中的宝藏 —— ONE PIECE,成为海贼王。</p>
</div>
</a>
</li>
<li>
<a href="#" target="_blank">
<div>
<img alt="图片 9" src="images/4.jpg"/>
</div>
<div>
<h3>盒子先生</h3>
<p>
Danbo是一只用废纸盒DIY出来的可爱玩偶,圆圆的眼睛和三角形的嘴巴,时刻露出无辜的表情,让人看到就心软,Danbo是个纯真善良的小家伙,在它单纯的幻想世界里,总是透露出最纯真可爱的动人气息。</p>
</div>
</a>
</li>
</ul>
</div>
</body>
</html>