通过改变每个图片的opacity属性：
素材图片：
代码一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-">
<title>最简单的轮播广告</title>
<style>
body, div, ul, li {
margin: ;
padding: ;
}
ul {
list-style-type: none;
}
body {
background: #;
text-align: center;
font: px/px Arial;
}
#box {
position: relative;
width: px;
height: px;
background: #fff;
border-radius: px;
border: px solid #fff;
margin: px auto;
}
#box .list {
position: relative;
width: px;
height: px;
overflow: hidden;
border: px solid #ccc;
}
#box .list li {
position: absolute;
top: ;
left: ;
width: px;
height: px;
opacity: ;
transition: opacity .s linear
}
#box .list li.current {
opacity: ;
}
#box .count {
position: absolute;
right: ;
bottom: px;
}
#box .count li {
color: #fff;
float: left;
width: px;
height: px;
cursor: pointer;
margin-right: px;
overflow: hidden;
background: #F;
opacity: .;
border-radius: px;
}
#box .count li.current {
color: #fff;
opacity: .;
font-weight: ;
background: #f
}
</style>
</head>
<body>
<div id="box">
<ul class="list">
<li class="current" style="opacity: ;"><img src="/UploadFiles/2021-04-02/.jpg">
代码二：
首先第一步，下载好一个jquery库的插件，jquery.js 网上很多随处可以下载．下载的插件要放在目录下．然后在html文档中链接好<script type="text/javascript" src="/UploadFiles/2021-04-02/jQuery.js">
第二步，布局好一个DIV,如：
<div id="scroll">
<p class="subl">上一张<p/>
<p class="subr">下一张<p/>
<ul>
<li style="background:red;display:block;"></li>
//上面的ｌｉ要设定为显示，因为是第一张图片．
<li style="background:green;"></li>
<li style="background:gray;"></li>
<li style="background:orange;"></li>
</ul>
</div>
由于方便各位网友下载能够清晰明了，我就没有用图片路径了，因为到你们电脑上就看不到了，这里用背景颜色．
第三步，就到了写CSS的时候了．下面的CSS懂基础的人都看得懂．
#scroll{width:100%; height:180px; background-color:white; position:relative;border-bottom:1px solid gray;}//这里是给整个大的ＤＩＶ设定属性．
#scroll ul{height:180px; list-style:none;}//ＤＩＶ下的ＵＬ属性．
#scroll ul li{width:100%; height:180px;margin:0px; padding:0px; display:none;}//ＤＩＶ下的ＵＬ下的ＬＩ属性．注意：display:none;因为要将所有的ｌｉ隐藏了先．当点击的时候在显示出来．
.subl{position:absolute; bottom:20px; left:40%; width:80px;height:20px; line-height:20px; text-align:center;font-size:16px;font-weight:bold; cursor:pointer;}//上一张按钮的属性．注意一个绝对定位．
.subr{
position:absolute;
bottom:20px; right:40%;
width:80px;height:20px; line-height:20px; text-align:center;font-size:16px;font-weight:bold;cursor:pointer;
}//下一张按钮的属性．注意一个绝对定位．
.subr:hover{ background:yellow;border-radius:10px;}
.subl:hover{ background:yellow;border-radius:10px;}
//以上两个hover是鼠标经过的效果．
第四步，就是ｊｑｕｅｒｙ代码了！也很简单．先将代码看一遍，你就会用了！
<script type="text/javascript">
/*轮播*/
$(function(){
var i=0;
var len=$("#scroll ul li").length-1;
$(".subl").click(function(){
if(i==len){
i=-1;
}
i++;
$("#scroll ul li").eq(i).fadeIn().siblings().hide();
});
//到这里分开！上面的是上一张点击的效果代码，下面的是下一张点击的效果代码．
$(".subr").click(function(){//获取类名的点击事件．
if(i==0){
i=len+1;
}
i--;
$("#scroll ul li").eq(i).fadeIn().siblings().hide();
});
});
/*轮播*/
</script>
四步轻松搞定一个简单的轮！
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。