原生javascript焦点轮播图

2024-04-27 14:16:35

字体：大中小

来源：转载

供稿：网友

原生javascript焦点轮播图

刚刚学会，写了一个轮播图效果，不过bug蛮多，请高手指点一下，谢谢

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>电影轮播图</title>
<style type="text/CSS">
*{margin:0;padding: 0;list-style: none;}
body{}
#container{width:1000px;height:409px;position:relative;margin:20px auto;overflow: hidden;}
#list{width:5000px;height:409px;position:absolute;z-index: 1}
#list img{float:left;display: block;}
#PRe{background-image:urlhttp://www.w3cfuns.com/data/attachment/album/201411/17/153459b7h8s70shfr2hwrd.png);width:45px;height:45px;float:left;position:absolute;top:190px;left:10px;cursor:pointer;display:none;z-index: 2;}
#next{background-image: url(http://www.w3cfuns.com/data/attachment/album/201411/17/153459g52888zwz1wa11tm.png);width:45px;height:45px;float: left;position:absolute;top:190px;right:10px;cursor:pointer;display:none;z-index: 2;}
#container:hover #pre,#container:hover #next{display: block;}
#pre:hover,#next:hover{background-color: rgba(0,0,0,0.7); }
#dot{width:1000px;height:10px;position:absolute;bottom:15px;left:450px;z-index: 10;}
#dot span{width:10px;height:10px;display:block;border-radius:10px;background-color: #fff;margin:0 5px;float: left;cursor:pointer;}
#dot .on{background-color: #69aaec;}
</style>
<script type="text/Javascript">
window.onload = function(){
var container = document.getElementById('container');//定义container，获取container id；
var list = document.getElementById('list');//定义list，获取list id；
var dot = document.getElementById('dot').getElementsByTagName('span');//定义dot ，获取dot id；
Word-wrap: break-word; margin: 0px; padding: 0px 0px 0px 10px; font-family: Monaco, Consolas, 'Lucida Console', 'Courier New', serif; font-size: 12px; list-style-type: decimal-leading-ze

上一篇：编程练习--模拟安装程序时的信息滚屏效果

下一篇：[javascript]switchTab:仿腾讯首页Tab栏切换js插件

学习交流

硬盘分区如何设置准确的分区空间

硬盘分区如何设置准确的分区空间...

热门图片

猜你喜欢的新闻

猜你喜欢的关注