轮播

最新推荐文章于 2024-10-03 15:07:30 发布

转载最新推荐文章于 2024-10-03 15:07:30 发布 · 51 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hjc1234/p/9391309.html

本文介绍了一种基于HTML和JavaScript实现的网页图片轮播效果，包括自动轮播、手动选择图片及鼠标悬停暂停等功能。通过简单的代码示例，展示了如何创建一个交互式的图片展示模块。

<body>
<button>上一页</button>
<img src="../../../1.png" width="200px" height="300px">
<button onclick="next()">下一页</button>
<br>
<img src="../../../1.png" width="200px" height="300px" xb="0" onclick="show(this)">
<img src="../../../4.png" width="200px" height="300px" xb="1" onclick="show(this)">
<img src="../../../5.png" width="200px" height="300px" xb="2" onclick="show(this)">
<img src="../../../7.jpg" width="200px" height="300px" xb="3" onclick="show(this)">

</body>
<script>
   var k=0//点下标使用
   var imgs =["../../../1.png",
               "../../../4.png",
               "../../../5.png",
               "../../../7.jpg"
       ];//存图片
   var pev = null;//上一页定义的元素
   var imgDom = null; //图片对象
   var dsp = null; //定时器对象
   window.onload = function(){
       //给定义的变量赋值
       imgDom =document.getElementsByTagName("img")[0];
       pev =document.getElementsByTagName("button")[0];
       pev.onclick=pevl;//上一页的点击事件

       /* 给图片添加移入事件*/
       imgDom.onmousemove =stop;
       /* 给图片添加移除事件*/
       imgDom.onmouseout =star;

        dsp = setInterval(function(){
           next();
       },2000);
   }

   //点击下一页轮换
function next(){
   k++;
   if( k>=imgs.length){
   k=0;
   }
   imgDom.setAttribute("src",imgs[k]);
}

//点击上一页轮换
function pevl(){
   k--;
   if( k<0){
       k=imgs.length-1;
   }
   imgDom.setAttribute("src",imgs[k]);
}

//当鼠标进入时轮播,加上定时器
   function star(){
       dsp =setInterval(function(){
           next();
       },2000);
   }
   //当鼠标移出时停止
   function stop(){y
       clearInterval(dsp);
   }
   //点击图片
   function show(obj){
       k=+obj.getAttribute("xb");//找到下标
       imgDom.setAttribute("src",imgs[k]);//设置属性
   }