搞了很长时间才弄清楚图片轮播效果的原理，理解各个事件发生的原因，浪费了这么长的时间，只怪自己的知识太过于薄弱。现将代码写下，供大家参看，如有不妥之处还望指出，大家一起学习。

功能：

1、点击左右两边的按钮，可以让图片进行左右滚动。

2、鼠标点击下方的一排按钮，可切换至想要的那张图片。

3、鼠标经过下方的一排按钮上时，可对图片进行小图预览。

4、当没有鼠标事件时，图片可进行自动播放。

5、当鼠标停留在整个区域上时，图片停止自动播放，当鼠标移出时，继续自动播放。

效果：

代码如下：

 <!DOCTYPE HTML>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <meta http-equiv="X-UA-Compatible" content="IE=10,chrome=1" />

 <title>图片轮换效果</title>

 <style>

 body,div,ul,li,a,img,span{padding:0;margin:0;}

 img{border:0;vertical-align:middle;}

 li{list-style:none;}

 body{width:100%;height:100px;background:url(img/bg.jpg) no-repeat;font-family:'微软雅黑';}

 .wrap{width:742px;height:462px;margin:10% auto 60px;position:relative;}

 .tit{height:50px;line-height:50px;padding-left:10px;margin-bottom:12px;font-size:30px;color:#fff;}

 p{width:742px;height:462px;position:absolute;padding:0;margin:0;}

 #img{width:686px;height:390px;margin:28px 0 0 28px;}

 .wrap a{width:30px;height:60px;line-height:60px;text-align:center;top:208px;position:absolute;display:block;opacity:0.5;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);}

 .wrap a:hover{opacity:1;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);}

 #prev{left:2px;}

 #next{right:2px;}

 .btdiv{width:686px;height:50px;line-height:50px;position:absolute;bottom:0;left:37px;}

 .pic_intro{width:400px;height:50px;line-height:50px;color:#000;font-size:16px;float:left;padding-left:10px;}

 #ul1{height:10px;padding-top:20px;float:right;padding-right:24px;}

 #ul1 li{width:14px;height:11px;float:left;margin-left:14px;background:url(img/dot_11.png) no-repeat;position:relative;}

 #ul1 .active{background:url(img/dot_22.png) no-repeat;}

 #ul1 span{width:76px;height:69px;display:none;position:absolute;top:-74px;left:-34px;background:url(img/dot_3.png) no-repeat center bottom;}

 #ul1 img{width:70px;height:56px;border:3px solid #fff;border-radius:5px;}

 .btm{width:100%;height:60px;background:url(img/btm.png) repeat-x;position:fixed;bottom:0;}

 </style>

 <script>

 window.onload=function(){

     var oWrap=document.getElementById('wrap');

     var oImg=document.getElementById('img');

     var oPre=document.getElementById('prev');

     var oNext=document.getElementById('next');

     var oNext=document.getElementById('next');

     var oTxt=document.getElementById('txt');

     var oUl1=document.getElementById('ul1');

     var aLi=oUl1.getElementsByTagName('li');

     var arrIMG1=['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg']

     var arrTXT=['春天--等闲识得东风面，万紫千红总是春','夏天--绿树阴浓夏日长，楼台倒影入池塘','秋天--榈庭多落叶，慨然知已秋','冬天--寒风摧树木，严霜结庭兰']

     var num=0;

     var timer=null;

     function autoPlay(){

         timer=setInterval(function(){

             num++;

             if(num==arrIMG1.length){

                 num=0;

             }

             show();

         },800);

     }

     autoPlay();

     oWrap.onmouseover=function(){clearInterval(timer);}

     oWrap.onmouseout=autoPlay;

     oPre.onclick=function(){

         num--;

         if(num==-1){

             num=arrIMG1.length-1;

         }

         show();

     }

     oNext.onclick=function(){

         num++;

         if(num>=arrIMG1.length){

             num=0;

         }

         show();

     }

     function show(){

         oImg.src=arrIMG1[num];

         oTxt.innerHTML=arrTXT[num];

         for(var i=0;i<aLi.length;i++){

                 aLi[i].className='';

             }

         aLi[num].className='active';

     }

     for(var i=0;i<aLi.length;i++){

         aLi[i].index=i;

         aLi[i].onclick=function(){

             oImg.src=arrIMG1[this.index];

             oTxt.innerHTML=arrTXT[this.index];

             for(var i=0;i<aLi.length;i++){

                 aLi[i].className='';

             }

             this.className='active';

             num=this.index;

         }

         aLi[i].onmouseover=function(){

             this.getElementsByTagName('span')[0].style.display='block';

         }

         aLi[i].onmouseout=function(){

             this.getElementsByTagName('span')[0].style.display='none';

         }

     }

 }

 </script>

 </head>

 <body>

 <div class="wrap" id="wrap">

     <p><img src="img/pic_bg.png" /></p>

     <img src="img/1.jpg" id='img' />

     <a href="javascript:;" id="prev"><img src="img/prev.png" /></a>

     <a href="javascript:;" id="next"><img src="img/next.png" /></a>

     <div class="btdiv">

         <div class="pic_intro" id="txt">春天--等闲识得东风面，万紫千红总是春</div>

         <ul id="ul1">

             <li class="active"><span><img src="img/1.jpg" /></span></li>

             <li><span><img src="img/2.jpg" /></span></li>

             <li><span><img src="img/3.jpg" /></span></li>

             <li><span><img src="img/4.jpg" /></span></li>

         </ul>

     </div>

 </div>

 </body>

 </html>

JS--图片轮播效果的更多相关文章

  1. js图片轮播效果实现代码

    首先给大家看一看js图片轮播效果,如下图 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟i ...

  2. js图片轮播效果常见的产品无缝轮播

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  3. js实现淘宝首页图片轮播效果

    原文:http://ce.sysu.edu.cn/hope2008/Education/ShowArticle.asp?ArticleID=10585 <!DOCTYPE html> &l ...

  4. jQuery个性化图片轮播效果

    jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

  5. CSS3图片轮播效果

    原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且 ...

  6. JQ 实现轮播图（3D旋转图片轮播效果）

    轮播图效果如下: 代码: <!DOCTYPE html> <html xmlns="/www.w3.org/1999/xhtml"> <head> ...

  7. js 图片轮播简单版

    <html> <head> <meta charset="utf-8" /> <title></title> <s ...

  8. 超实用的JavaScript代码段 Item3 --图片轮播效果

    图片轮播效果 图片尺寸 统一设置成:490*170px; 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒 ...

  9. ios图片轮播效果

    代码地址如下:http://www.demodashi.com/demo/11959.html ImageCarousel 简单封装的图片轮播器 内存过大由于我加载的图片分辨率较高(4k) 文件目录 ...

  10. axure 动态面板实现图片轮播效果（淘宝）

    淘宝中经常可以看到店铺中的图片轮播效果,本经验将通过axure7.0实现 工具/原料   axure7.0 方法/步骤     下载需要轮播的图片   将图片引入至axure中,将引入的第一张图片转为 ...

随机推荐

  1. JAVA调用.NET WebService终极方案（包含对SoapHeader的处理）

    一.前言:      今日部门的产品需要用到短信功能,需要走公司统一的接口,而该短信接口是由.net开发的,利用两天时间彻底搞定了用java来调用.net 的web service,包括对soap h ...

  2. springmvc实现REST中的GET、POST、PUT和DELETE

    spring mvc 支持REST风格的请求方法,GET.POST.PUT和DELETE四种请求方法分别代表了数据库CRUD中的select.insert.update.delete,下面演示一个简单 ...

  3. hdu 3642 Get The Treasury (三维的扫描线)

    题目大意: 给出N个立方体. 求一个三维空间中被包围三次的空间的体积之和. 思路分析: 发现Z的范围非常小.那么我们能够枚举Z轴,然后对 x y做扫描线. 并且不用枚举全部的Z ,仅仅须要将Z离散化之 ...

  4. Java 编程的动态性，第 7 部分: 用 BCEL 设计字节码--转载

    在本系列的最后三篇文章中,我展示了如何用 Javassist 框架操作类.这次我将用一种很不同的方法操纵字节码——使用 Apache Byte Code Engineering Library (BC ...

  5. Android 交错 GridView

    原文地址 本文演示在你的 Android 应用程序中显示交错 GridView(Staggered GridView ). 下载 Demo 交错 GridView 交错 GridView 只是具有不等 ...

  6. git查看某个文件的修改历史

    <转自 http://www.cnblogs.com/flyme/archive/2011/11/28/2265899.html> 有时候在比对代码时,看到某些改动,但不清楚这个改动的作者 ...

  7. 自定义控件【圆形】圆角 BitmapShader

    关于缩放比例         本例中,我们会为BitmapShader设置了一个matrix,目的是按比例放大或者缩小bitmap,并移动到View控件的中心,我们不会让view的宽高大于我们bitm ...

  8. SpringMVC05使用注解的方式

    <body> <a href="add">新增</a> <a href="update">修改</a> ...

  9. java -jar start.jar和nohup java -jar xxx.jar > test.log &的区别

    nohup用在什么地方? KD3EE49RD38

  10. Win7上IIS发布网站系统\部署项目

    1.系统已经安装IIS,如果没有安装,请到[控制面板]→[程序]→[程序和功能]→[打开或关闭Windows功能],选中Internet 信息服务Web管理工具下面的所有选项,确定:如下图 2.发布文 ...