<!DOCTYPE html>
<html>
<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>
<li style="opacity: "><img src="img/images/.jpg" width="" height=""></li>
<li style="opacity: "><img src="img/images/.jpg" width="" height=""></li>
<li style="opacity: "><img src="img/images/.jpg" width="" height=""></li>
<li style="opacity: "><img src="img/images/.jpg" width="" height=""></li>
<li style="opacity: "><img src="img/images/.jpg" width="" height=""></li>
</ul>
<ul>
<li></li>
<li class=""></li>
<li class=""></li>
<li class=""></li>
<li class=""></li>
</ul>
</div>
<script>
var box=document.getElementById('box')
var uls=document.getElementsByTagName('ul')
var imgs=uls[].getElementsByTagName('li')
var btn=uls[].getElementsByTagName('li')
var i=index=//中间量，统一声明；
var play=null
console.log(box,uls,imgs,btn)//获取正确
//图片切换, 淡入淡出效果我是用（transition: opacity .s linear）做的,不纠结、简单 在css里面
function show(a){ //方法定义的是当传入一个下标时，按钮和图片做出对的反应
for(i=i<btn.lengthi++ ){
btn[i].className='' //很容易看懂吧？每个按钮都先设置成看不见，然后把当前按钮设置成可见。
btn[a].className='current'
}
for(i=i<imgs.lengthi++){ //把图片的效果设置和按钮相同
imgs[i].style.opacity=
imgs[a].style.opacity=
}
}
//切换按钮功能，响应对应图片
for(i=i<btn.lengthi++){
btn[i].index=i//不知道你有没有发现，循环里的方法去调用循环里的变量体i，会出现调到的不是i的变动值的问题。所以我先在循环外保存住
btn[i].onmouseover=function(){
show(this.index)
clearInterval(play)//这就是最后那句话追加的功能
}
}
//自动轮播方法
function autoPlay(){
play=setInterval(function(){ //这个paly是为了保存定时器的，变量必须在全局声明 不然其他方法调不到 或者你可以调用auto.play 也许可以但是没时间试了
index++
index>=imgs.length&&(index=)//可能有优先级问题，所以用了括号，没时间测试了。
show(index)
},)
}
autoPlay()//马上调用，我试过用window.onload调用这个方法，但是调用之后影响到了其他方法，使用autoPlay所以只能这样调用了
//div的鼠标移入移出事件
box.onmouseover=function(){
clearInterval(play)
}
box.onmouseout=function(){
autoPlay()
}
//按钮下标也要加上相同的鼠标事件，不然图片停止了，定时器没停，会突然闪到很大的数字上。 貌似我可以直接追加到之前定义事件中。
</script>
</body>
</html>
//时间控制的广告代码var cookie = {
ad0:30,//时间控制第一个广告30分钟轮播
ad1:60,//时间控制第二个广告60分钟轮播
ad_num : 2,
get_cookie : function(Name){var search = Name + "=" var returnvalue = ""if (document.cookie.length >0) {offset = document.cookie.indexOf(search)if (offset != -1) {offset += search.lengthend = document.cookie.indexOf("", offset)if (end == -1)end = document.cookie.lengthreturnvalue=unescape(document.cookie.substring(offset, end))}}return returnvalue},
init : function(){
for(var i=0i<cookie.ad_numi++){
if(cookie.get_cookie('ppad_cookie_'+i)){
continue
}else{
var Then = new Date()current_time = eval('cookie.ad'+i)Then.setTime(Then.getTime() + current_time*60*1000)document.cookie='ppad_cookie_'+i+'=1expires='+ Then.toGMTString()+'path=/'
switch(i){
case 0:
广告代码一 break
case 1:
广告代码二 break
}
break
}
}
}
}
cookie.init()
//直接就放JS文件里面
