zoukankan      html  css  js  c++  java
  • JS--图片轮播效果

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

    功能:

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

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

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

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

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

    效果:

     

    代码如下:

      1 <!DOCTYPE HTML>
      2 <head>
      3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      4 <meta http-equiv="X-UA-Compatible" content="IE=10,chrome=1" />
      5 <title>图片轮换效果</title>
      6 <style>
      7 body,div,ul,li,a,img,span{padding:0;margin:0;}
      8 img{border:0;vertical-align:middle;}
      9 li{list-style:none;}
     10 body{100%;height:100px;background:url(img/bg.jpg) no-repeat;font-family:'微软雅黑';}
     11 .wrap{742px;height:462px;margin:10% auto 60px;position:relative;}
     12 .tit{height:50px;line-height:50px;padding-left:10px;margin-bottom:12px;font-size:30px;color:#fff;}
     13 p{742px;height:462px;position:absolute;padding:0;margin:0;}
     14 #img{686px;height:390px;margin:28px 0 0 28px;}
     15 .wrap a{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);}
     16 .wrap a:hover{opacity:1;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);}
     17 #prev{left:2px;}
     18 #next{right:2px;}
     19 .btdiv{686px;height:50px;line-height:50px;position:absolute;bottom:0;left:37px;}
     20 .pic_intro{400px;height:50px;line-height:50px;color:#000;font-size:16px;float:left;padding-left:10px;}
     21 #ul1{height:10px;padding-top:20px;float:right;padding-right:24px;}
     22 #ul1 li{14px;height:11px;float:left;margin-left:14px;background:url(img/dot_11.png) no-repeat;position:relative;}
     23 #ul1 .active{background:url(img/dot_22.png) no-repeat;}
     24 #ul1 span{76px;height:69px;display:none;position:absolute;top:-74px;left:-34px;background:url(img/dot_3.png) no-repeat center bottom;}
     25 #ul1 img{70px;height:56px;border:3px solid #fff;border-radius:5px;}
     26 .btm{100%;height:60px;background:url(img/btm.png) repeat-x;position:fixed;bottom:0;}
     27 </style>
     28 <script>
     29 window.onload=function(){
     30     var oWrap=document.getElementById('wrap');
     31     var oImg=document.getElementById('img');
     32     var oPre=document.getElementById('prev');
     33     var oNext=document.getElementById('next');
     34     var oNext=document.getElementById('next');
     35     var oTxt=document.getElementById('txt');
     36     var oUl1=document.getElementById('ul1');
     37     var aLi=oUl1.getElementsByTagName('li');
     38     var arrIMG1=['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg']
     39     var arrTXT=['春天--等闲识得东风面,万紫千红总是春','夏天--绿树阴浓夏日长,楼台倒影入池塘','秋天--榈庭多落叶,慨然知已秋','冬天--寒风摧树木,严霜结庭兰']
     40     var num=0;
     41     var timer=null;
     42     function autoPlay(){
     43         timer=setInterval(function(){
     44             num++;
     45             if(num==arrIMG1.length){
     46                 num=0;
     47             }
     48             show();
     49         },800);
     50     }
     51     autoPlay();
     52     oWrap.onmouseover=function(){clearInterval(timer);}
     53     oWrap.onmouseout=autoPlay;
     54     oPre.onclick=function(){
     55         num--;
     56         if(num==-1){
     57             num=arrIMG1.length-1;
     58         }
     59         show();
     60     }
     61     oNext.onclick=function(){
     62         num++;
     63         if(num>=arrIMG1.length){
     64             num=0;
     65         }
     66         show();
     67     }
     68     function show(){
     69         oImg.src=arrIMG1[num];
     70         oTxt.innerHTML=arrTXT[num];
     71         for(var i=0;i<aLi.length;i++){
     72                 aLi[i].className='';
     73             }
     74         aLi[num].className='active';
     75     }
     76     for(var i=0;i<aLi.length;i++){
     77         aLi[i].index=i;
     78         aLi[i].onclick=function(){
     79             oImg.src=arrIMG1[this.index];
     80             oTxt.innerHTML=arrTXT[this.index];
     81             for(var i=0;i<aLi.length;i++){
     82                 aLi[i].className='';
     83             }
     84             this.className='active';
     85             num=this.index;
     86         }
     87         aLi[i].onmouseover=function(){
     88             this.getElementsByTagName('span')[0].style.display='block';
     89         }
     90         aLi[i].onmouseout=function(){
     91             this.getElementsByTagName('span')[0].style.display='none';
     92         }
     93     }
     94     
     95 }
     96 </script>
     97 </head>
     98 <body>
     99 <div class="wrap" id="wrap">
    100     <p><img src="img/pic_bg.png" /></p>
    101     <img src="img/1.jpg" id='img' />
    102     <a href="javascript:;" id="prev"><img src="img/prev.png" /></a>
    103     <a href="javascript:;" id="next"><img src="img/next.png" /></a>
    104     <div class="btdiv">
    105         <div class="pic_intro" id="txt">春天--等闲识得东风面,万紫千红总是春</div>
    106         <ul id="ul1">
    107             <li class="active"><span><img src="img/1.jpg" /></span></li>
    108             <li><span><img src="img/2.jpg" /></span></li>
    109             <li><span><img src="img/3.jpg" /></span></li>
    110             <li><span><img src="img/4.jpg" /></span></li>
    111         </ul>
    112     </div>
    113 </div>
    114 </body>
    115 </html>
  • 相关阅读:
    [C++ Primer Plus] 第4章、复合类型(二)课后习题
    [C++ Primer Plus] 第4章、复合类型(一)程序清单——指针new和delete
    opencv学习之路(28)、轮廓查找与绘制(七)——位置关系及轮廓匹配
    [c/c++] programming之路(20)、字符串(一)
    [Python]基础教程(3)、Python基础语法
    [Python]基础教程(2)、PyCharm安装及中文编码
    opencv学习之路(27)、轮廓查找与绘制(六)——外接圆、椭圆拟合、逼近多边形曲线、计算轮廓面积及长度、提取不规则轮廓
    [Python]基础教程(1)、介绍及环境搭建
    白雪公主与七个爷爷——冲刺日志(第一天)
    白雪公主与七个爷爷——凡事预则立
  • 原文地址:https://www.cnblogs.com/0808bing/p/3285617.html
Copyright © 2011-2022 走看看