通过JS和CSS实现幻灯片轮播带背景标题和轮播数字

admin

一、HTML代码部分

1. <div id="box">
   
2.         <ul class="list">
   
3.                 <li class="present" style="opacity: 0.14;"><img src="http://stats.chinaz.com/zz_img/ppb300.png" width="348" height="238"></li>
   
4.                 <li style="opacity: 0;">
   
5.                    <a href="/a/teach/20180327/7.html" target="_blank"><img src="/uploads/allimg/180327/1522084050968300-lp.png" border="0" width="348" height="238" alt="dedecms完美更换ueditor编辑器 前台代码高亮显示"></a>
   
6.                    <span>dedecms完美更换ueditor编辑器 前台代码高亮显示</span>
   
7.                    <div></div>
   
8.                 </li>
   
9.         <li style="opacity: 0;">
   
10.                    <a href="/a/teach/20180326/6.html" target="_blank"><img src="/uploads/allimg/180326/1-1P3262352305E.png" border="0" width="348" height="238" alt="纯JS和CSS实现幻灯片轮播代码示例"></a>
    
11.                    <span>纯JS和CSS实现幻灯片轮播代码示例</span>
    
12.                    <div></div>
    
13.                 </li>
    
14.         <li style="opacity: 0;">
    
15.                    <a href="/a/teach/20180325/5.html" target="_blank"><img src="/uploads/allimg/180325/1-1P325221443538.png" border="0" width="348" height="238" alt="JS实现鼠标移动上去显示微信二维码或图片"></a>
    
16.                    <span><strong>JS实现鼠标移动上去显示微信二维码或图片</strong></span>
    
17.                    <div></div>
    
18.                 </li>
    
19.         <li style="opacity: 0;">
    
20.                    <a href="/a/resource/20180325/4.html" target="_blank"><img src="/images/defaultpic.gif" border="0" width="348" height="238" alt="阿里云linux一键安装web环境"></a>
    
21.                    <span><strong>阿里云linux一键安装web环境</strong></span>
    
22.                    <div></div>
    
23.                 </li>
    
24. 
    
25.         </ul>
    
26.         <ul class="count">
    
27.                 <li class="present">1</li>
    
28.                 <li class="">2</li>
    
29.                 <li class="">3</li>
    
30.                 <li class="">4</li>
    
31.                 <li class="">5</li>
    
32.         </ul>
    
33. </div>

复制代码

二、CSS样式部分

1. <style id="portalflash" type="text/css">
   
2.         #box{position:relative;width:350px;height:240px;background:#fff;}
   
3.         #box .list{position:relative;width:348px;height:238px;overflow:hidden;border:1px solid #ccc;}
   
4.         #box .list li{position:absolute;top:0;left:0;width:348px;height:238px;opacity:0;filter:alpha(opacity=0);}
   
5.         #box .list li.present{opacity:1;filter:alpha(opacity=100);}
   
6.         #box ul li span{position: absolute;bottom: 0px;left: 0;width: 348px;line-height:35px;overflow:hidden;margin-left:10px;font-weight: normal;color: #FFF;z-index: 111;font-size: 12px;}
   
7.     #box ul li div {position: absolute;bottom: 0;left: 0;height: 35px;background-color: #000;width: 348px;opacity: 0.6;}
   
8.         #box .count{position:absolute;left:105px;top:175px;}
   
9.         #box .count li{color:#fff;float:left;width:20px;height:20px;cursor:pointer;text-align:center;margin-right:5px;overflow:hidden;background:#F90;opacity:0.7;filter:alpha(opacity=70);border-radius:20px;}
   
10.         #box .count li.present{color:#fff;opacity:1;filter:alpha(opacity=100);font-weight:700;background:#f60;}
    
11.         #tmp{width:100px;height:100px;background:red;position:absolute;}
    
12. </style>

复制代码

三、JS代码部分

1. <script type="text/javascript">
   
2.    /*首页幻灯片js 大白兔制作*/
   
3. window.onload = function ()
   
4. {
   
5.         var oBox = document.getElementById("box");
   
6.         var aUl = oBox.getElementsByTagName("ul");
   
7.         var aImg = aUl[0].getElementsByTagName("li");
   
8.         var aNum = aUl[1].getElementsByTagName("li");
   
9.         var timer = play = null;
   
10.         var i = index = 0;
    
11.         //切换按钮
    
12.         for (i = 0; i < aNum.length; i++)
    
13.         {
    
14.                 aNum[i].index = i;
    
15.                 aNum[i].onmouseover = function ()
    
16.                 {
    
17.                         show(this.index)
    
18.                 }
    
19.         }
    
20.         //鼠标划过关闭定时器
    
21.         oBox.onmouseover = function ()
    
22.         {
    
23.                 clearInterval(play)
    
24.         };
    
25. 
    
26.         //鼠标离开启动自动播放
    
27.         oBox.onmouseout = function ()
    
28.         {
    
29.                 autoPlay()
    
30.         };
    
31. 
    
32.         //自动播放函数
    
33.         function autoPlay ()
    
34.         {
    
35.                 play = setInterval(function () {
    
36.                         index++;
    
37.                         index >= aImg.length && (index = 0);
    
38.                         show(index);
    
39.                 },2000);
    
40.         }
    
41.         autoPlay();//应用
    
42.         //图片切换, 淡入淡出效果
    
43.         function show (a)
    
44.         {
    
45.                 index = a;
    
46.                 var alpha = 0;
    
47.                 for (i = 0; i < aNum.length; i++)aNum[i].className = "";
    
48.                 aNum[index].className = "present";
    
49.                 clearInterval(timer);
    
50. 
    
51.                 for (i = 0; i < aImg.length; i++)
    
52.                 {
    
53.                         aImg[i].style.opacity = 0;
    
54.                         aImg[i].style.filter = "alpha(opacity=0)";
    
55.                 }
    
56. 
    
57.                 timer = setInterval(function () {
    
58.                         alpha += 2;
    
59.                         alpha > 100 && (alpha =100);
    
60.                         aImg[index].style.opacity = alpha / 100;
    
61.                         aImg[index].style.filter = "alpha(opacity = " + alpha + ")";
    
62.                         alpha == 100 && clearInterval(timer)
    
63.                 },20);
    
64.         }
    
65. };
    
66. </script>

复制代码

说明：
幻灯片宽和高以及轮播数字位置都可以在CSS样式内修改，JS代码部分注意ID不要与其他代码ID重复，ID重复虽然不影响使用，但360或者火狐右键审查元素会有错误提示。
最终效果如下：