JS和CSS实现幻灯片轮播带背景标题和数字
一、HTML代码部分<div id="box">
<ul class="list">
<li class="present" style="opacity: 0.14;"><img src="http://stats.chinaz.com/zz_img/ppb300.png" width="348" height="238"></li>
<li style="opacity: 0;">
<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>
<span>dedecms完美更换ueditor编辑器 前台代码高亮显示</span>
<div></div>
</li>
<li style="opacity: 0;">
<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>
<span>纯JS和CSS实现幻灯片轮播代码示例</span>
<div></div>
</li>
<li style="opacity: 0;">
<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>
<span><strong>JS实现鼠标移动上去显示微信二维码或图片</strong></span>
<div></div>
</li>
<li style="opacity: 0;">
<a href="/a/resource/20180325/4.html" target="_blank"><img src="/images/defaultpic.gif" border="0" width="348" height="238" alt="阿里云linux一键安装web环境"></a>
<span><strong>阿里云linux一键安装web环境</strong></span>
<div></div>
</li>
</ul>
<ul class="count">
<li class="present">1</li>
<li class="">2</li>
<li class="">3</li>
<li class="">4</li>
<li class="">5</li>
</ul>
</div>
二、CSS样式部分<style id="portalflash" type="text/css">
#box{position:relative;width:350px;height:240px;background:#fff;}
#box .list{position:relative;width:348px;height:238px;overflow:hidden;border:1px solid #ccc;}
#box .list li{position:absolute;top:0;left:0;width:348px;height:238px;opacity:0;filter:alpha(opacity=0);}
#box .list li.present{opacity:1;filter:alpha(opacity=100);}
#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;}
#box ul li div {position: absolute;bottom: 0;left: 0;height: 35px;background-color: #000;width: 348px;opacity: 0.6;}
#box .count{position:absolute;left:105px;top:175px;}
#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;}
#box .count li.present{color:#fff;opacity:1;filter:alpha(opacity=100);font-weight:700;background:#f60;}
#tmp{width:100px;height:100px;background:red;position:absolute;}
</style>三、JS代码部分
<script type="text/javascript">
/*首页幻灯片js 大白兔制作*/
window.onload = function ()
{
var oBox = document.getElementById("box");
var aUl = oBox.getElementsByTagName("ul");
var aImg = aUl.getElementsByTagName("li");
var aNum = aUl.getElementsByTagName("li");
var timer = play = null;
var i = index = 0;
//切换按钮
for (i = 0; i < aNum.length; i++)
{
aNum.index = i;
aNum.onmouseover = function ()
{
show(this.index)
}
}
//鼠标划过关闭定时器
oBox.onmouseover = function ()
{
clearInterval(play)
};
//鼠标离开启动自动播放
oBox.onmouseout = function ()
{
autoPlay()
};
//自动播放函数
function autoPlay ()
{
play = setInterval(function () {
index++;
index >= aImg.length && (index = 0);
show(index);
},2000);
}
autoPlay();//应用
//图片切换, 淡入淡出效果
function show (a)
{
index = a;
var alpha = 0;
for (i = 0; i < aNum.length; i++)aNum.className = "";
aNum.className = "present";
clearInterval(timer);
for (i = 0; i < aImg.length; i++)
{
aImg.style.opacity = 0;
aImg.style.filter = "alpha(opacity=0)";
}
timer = setInterval(function () {
alpha += 2;
alpha > 100 && (alpha =100);
aImg.style.opacity = alpha / 100;
aImg.style.filter = "alpha(opacity = " + alpha + ")";
alpha == 100 && clearInterval(timer)
},20);
}
};
</script>说明：
幻灯片宽和高以及轮播数字位置都可以在CSS样式内修改，JS代码部分注意ID不要与其他代码ID重复，ID重复虽然不影响使用，但360或者火狐右键审查元素会有错误提示。
最终效果如下：
页:
[1]