简单的轮播图
QQ图片20181025201015.jpg
html代码
<!DOCTYPE html>
<html>
<head>
<title>轮播图</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="11.css">
</head>
<body>
<div>
<p class="head">
动漫推荐
</p>
</div>
<div class="main" id="main">
<div class="beijing"></div>
<div class="introduce" id="jiesao">
<div class="fplj">来自风平浪静的明天
<span class="jiesao1">《来自风平浪静的明天》是由动画制作公司P.A.WORKS与漫画杂志《电击大王》合作的跨媒体企划，以陆地上与大海中进行着交流的世界为舞台，描写五位中学生和两个小学生在成长过程中经历恋爱、友情、亲情等的治愈故事。</span>
</div>
<div class="wdmm">
我的妹妹
<span class="jiesao2">哥哥高坂京介（17岁）和妹妹高坂桐乃（14岁）兄妹两人的关系近几年处于冷战状态。从某个时间点开始，桐乃看到哥哥时连打招呼都没有，只会用像是看到脏东西般的眼神瞪他。京介认为这种关系也会一直持续下去。</span>
</div>
<div class="djsy">
刀剑神域
<span class="jiesao3">作品讲述了一场以空中浮游城堡“艾恩葛朗特城堡”为舞台的死亡游戏，被卷入其中的玩家桐人，以完全攻略为目标，展开了一连串严酷的冒险。</span>
</div>
</div>
<div class="SowMap" id="SowMap">
<a href="https://www.bilibili.com/bangumi/play/ss441/?from=search&seid=11196348266731763824" target="_blank" title="来自风平浪静的明天">
<div class="map1 banner map-active"></div>
</a>
<a href="https://www.bilibili.com/bangumi/play/ep65174" target="_blank" title="我的妹妹不可能这么可爱">
<div class="map2 banner"></div>
</a>
<a href="https://www.bilibili.com/bangumi/play/ep250536" target="_blank" title="刀剑神域">
<div class="map3 banner"></div>
</a>
</div>
<a href="#" class="button left" id="left"></a>
<a href="#" class="button right" id="right"></a>
<div class="dog" id="dog">
<span class="active"></span>
<span></span>
<span></span>
</div>
<script type="text/javascript" src="111.js"></script>
<div>
<audio src="123.mp3" type="audio" controls autoplay loop></audio>
</div>
</div>
</body>
</html>
css代码
{
padding: 0;
margin: 0;
}
.head{
font-size: 50px;
color: #f40;
text-align: center;
background-image: url(img/head.png);
background-size: 100% 100%;
line-height: 180px;
}
.banner{
width: 1500px;
height: 700px;
overflow: hidden;
display: none;
position: relative;
background-repeat: no-repeat;
background-size: 100% 100%;
margin: 0 auto;
}
.SowMap{
height: 700px;
width: 1500px;
overflow: hidden;
display: block;
position: relative;
}
.main{
width: 1500px;
height: 700px;
margin: 0 auto;
}
.map-active{
display: block;
}
.map1{
background-image: url(img/01.jpg);
}
.map2{
background-image: url(img/02.jpg);
}
.map3{
background-image: url(img/03.jpg);
}
.button{
position: absolute;
width: 100px;
height: 100px;
top: 50%;
}
.button:hover{
background: url(img/button.jpg) no-repeat center center;
background-size: 100% 100%;
}
.right{
right: 210px;
}
.left{
transform: rotate(180deg); /旋转/
z-index: 2;
left: 510px;
}
.dog{
position: absolute;
right: 260px;
bottom: 80px;
text-align: right;
}
.dog span{
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background: rgba(7,17,27,0.4);
line-height: 12px;
box-shadow: 0 0 0 2px rgba(255,255,255,0.8); /阴影*/
cursor: pointer;
}
.dog span.active{
box-shadow: 0 0 0 2px rgba(7,17,27,0.4);
background: #fff;
}
/介绍/
.beijing{
width: 300px;
height: 700px;
position: absolute;
background: rgba(7,17,27,0.1);
opacity: 0.1;
z-index: 1;
}
.introduce{
width: 300px;
height: 700px;
position: absolute;
background: rgba(7,17,27,0.5);
z-index: 2;
}
.introduce div{
color: white;
height: 60px;
line-height: 64px;
font-size: 20px;
text-align: center;
padding: 20px 0;
}
.introduce div:hover{
background-color: #6b6565;
cursor: pointer;
}
.jiesao1{
position: absolute;
background: rgba(7,17,27,0.5);
z-index: 2;
width: 400px;
height: 700px;
left: 300px;
top: 0px;
display: none;
}
.jiesao2{
position: absolute;
background: rgba(7,17,27,0.5);
z-index: 2;
width: 400px;
height: 600px;
left: 300px;
top: 100px;
display: none;
}
.jiesao3{
position: absolute;
background: rgba(7,17,27,0.5);
z-index: 2;
width: 400px;
height: 500px;
left: 300px;
top: 200px;
display: none;
}
js代码
function byId(id) {
return typeof(id) === "string"?document.getElementById(id):id; //判断id是否为字符串
}//封装一个代替getElementById()的方法
var index = 0,
timer = null, //定时器
pics = byId("SowMap").getElementsByTagName("div"),//取出SowMap下面的div
len = pics.length,
right = byId("right"),
left = byId("left"),
dog = byId("dog").getElementsByTagName('span'),
introduce = byId("jiesao").getElementsByTagName("div"),
jiesao = byId("jiesao").getElementsByTagName("span");
function slideImg(){
var main = byId("main");
//鼠标停止
main.onmouseover = function(){
if(timer){
clearInterval(timer);
}
}
//鼠标离开
main.onmouseout = function(){
timer = setInterval(function(){
console.log(index);
index++;
if(index>=len){
index = 0;
}
changeImg();
},3000); //每隔一段时间调用一次
}
main.onmouseout(); //自动播放图片
for(var i = 0;i<len;i++){
dog[i].id = i; //给每个span添加一个id
introduce[i].id = i;
jiesao[i].id = i;
dog[i].onclick = function(){
index = this.id;
changeImg();
}
introduce[i].onmouseover = function(){
index = this.id;
for(var j=0;j<len;j++){
jiesao[j].style.display="none";
}
jiesao[index].style.display="block";
changeImg();
} ////左侧指向
introduce[i].onmouseout = function(){
index = this.id;
for(var j=0;j<len;j++){
jiesao[j].style.display="none";
}////鼠标移除删去介绍
}
}
}
left.onclick = function(){
index--;
if(index<0){
index = 2;
}
changeImg();
}
right.onclick = function(){
index++;
if(index>=len){
index = 0;
}
changeImg();
}
function changeImg(){
for(var i = 0;i<len;i++){
pics[i].style.display ="none";
dog[i].className = "none";
}//遍历所有的图片
pics[index].style.display = "block";
dog[index].className = "active";
}//切换图片
slideImg();
网友评论