本文目录一览：
求js轮播图代码,有详细注释
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
title/title
style type="text/css"
* {
padding: 0;
margin: 0;
list-style: none;
border: 0;
}
.all {
width: 500px;
height: 200px;
padding: 7px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
.screen {
width: 500px;
height: 200px;
overflow: hidden;
position: relative;
}
.screen li {
width: 500px;
height: 200px;
overflow: hidden;
float: left;
}
.screen ul {
position: absolute;
left: 0;
top: 0px;
width: 3000px;
}
.all ol {
position: absolute;
right: 10px;
bottom: 10px;
line-height: 20px;
text-align: center;
}
.all ol li {
float: left;
width: 20px;
height: 20px;
background: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
}
.all ol li.current {
background: #DB192A;
}
#arr {
display: none;
}
#arr span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}
#arr #right {
right: 5px;
left: auto;
}
/style
/head
body
div class="all" id='box'
!--相框--
div class="screen"
ul
li
img src="images/41.jpg" width="500" height="200" /
/li
li
img src="images/42.jpg" width="500" height="200" /
/li
li
img src="images/43.jpg" width="500" height="200" /
/li
li
img src="images/44.jpg" width="500" height="200" /
/li
li
img src="images/45.jpg" width="500" height="200" /
/li
/ul
ol
/ol
/div
div id="arr"
span id="left"lt;/span
span id="right"gt;/span
/div
/div
!-- script src="common.js"/script --
script
function my$(id) {
return document.getElementById(id);
}
function setInnerText(element, content) {
if (typeof element.textContent === "undefined") {
//IE浏览器
element.innerText = content;
} else {
element.textContent = content;
}
}
function animate(element, target) {
//先干掉定时器
clearInterval(element.timeId);
element.timeId = setInterval(function () {
//时时的获取元素的当前的位置
var current = element.offsetLeft;
//每次移动的步数
var step = 10;
//设置每次移动的步数是正数还是负数
step = current target ? step : -step;
//移动后的当前的位置
current += step;
if (Math.abs(target - current) Math.abs(step)) {
element.style.left = current + "px";
} else {
clearInterval(element.timeId);
element.style.left = target + "px";
}
}, 20);
}
//获取最外面的div
var box = my$("box");
//获取相框
var screen = box.children[0];
//获取相框的宽度
var imgWidth = screen.offsetWidth;
//获取ul
var ulObj = screen.children[0];
//获取ul中的li
var ulLiObj = ulObj.children;
//获取ol
var olObj = screen.children[1];
//获取的是左右焦点的div
var arr = my$("arr");
//获取左边的按钮
var left = my$("left");
//获取右边的按钮
var right = my$("right");
var pic = 0;
//页面加载后先创建小按钮,根据ul中的li个个数来创建li,把li加入到ol中
for (var i = 0; i ulLiObj.length; i++) {
//创建li
var liObj = document.createElement("li");
//把li加入到ol中
olObj.appendChild(liObj);
setInnerText(liObj, (i + 1)); //兼容代码
//为每个ol中的li添加一个自定义属性存储索引值
liObj.setAttribute("index", i);
//为每个li注册鼠标进入事件
liObj.onmouseover = function () {
//先把ol中所有的li的背景颜色全部干掉
for (var j = 0; j olObj.children.length; j++) {
olObj.children[j].removeAttribute("class");
}
//设置当前鼠标进入的li有背景颜色
this.className = "current";
//移动ul
//获取鼠标进入的ol中的li的索引值
pic = this.getAttribute("index");
animate(ulObj, -pic * imgWidth);
};
}
//第一个标签设置颜色
olObj.children[0].className = "current";
//追加一个图片到ul中
ulObj.appendChild(ulObj.children[0].cloneNode(true));
//页面加载之后自动移动
var timeId = setInterval(f1, 1000);
//鼠标进入
box.onmouseover = function () {
arr.style.display = "block";
clearInterval(timeId);
}
//鼠标离开
box.onmouseout = function () {
arr.style.display = "none";
timeId = setInterval(f1, 1000);
}
//右边焦点
right.onclick = f1;
function f1() {
//判断是否到达最后一张
if (pic == ulLiObj.length - 1) {
//跳转到第一张
pic = 0;
ulObj.style.left = -pic * imgWidth + "px";
}
pic++;
//调用动画函数
animate(ulObj, -pic * imgWidth);
//刷一遍
for (var i = 0; i olObj.children.length; i++) {
olObj.children[i].removeAttribute("class");
}
//第一个按钮的颜色
if (pic == ulLiObj.length - 1) {
olObj.children[0].className = "current";
} else {
olObj.children[pic].className = "current";
}
};
//左边焦点
left.onclick = function () {
//判断是否到达第一张图片
if (pic == 0) {
//跳转到第六张图片
pic = ulLiObj.length - 1;
ulObj.style.left = -pic * imgWidth + "px";
}
pic--;
//调用动画函数
animate(ulObj, -pic * imgWidth);
//刷一遍
for (var i = 0; i olObj.children.length; i++) {
olObj.children[i].removeAttribute("class");
}
olObj.children[pic].className = "current";
}
/script
/body
/html
JS轮播弹窗代码
//时间控制的广告代码
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.length;end = document.cookie.indexOf(";", offset);if (end == -1)end = document.cookie.length;returnvalue=unescape(document.cookie.substring(offset, end));}}return returnvalue;},
init : function(){
for(var i=0; icookie.ad_num; i++){
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+'=1;expires='+ Then.toGMTString()+';path=/;';
switch(i){
case 0:
广告代码一 break;
case 1:
广告代码二 break;
}
break;
}
}
}
}
cookie.init();
//直接就放JS文件里面
js实现轮播代码怎么写？
!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=;ibtn.length;i++ ){
btn[i].className=''; //很容易看懂吧？每个按钮都先设置成看不见，然后把当前按钮设置成可见。
btn[a].className='current';
}
for(i=;iimgs.length;i++){ //把图片的效果设置和按钮相同
imgs[i].style.opacity=;
imgs[a].style.opacity=;
}
}
//切换按钮功能，响应对应图片
for(i=;ibtn.length;i++){
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
图片自动播放轮播JQ，js代码。
//轮播器
var crs_num=1
function interval(){
carousel=setInterval(function(){
num2=crs_num*-800
$('.crs_img').animate({
attr:'x',
target:num2,
time:50,
speed:10,
})
$('.crs_words p').html($('.crs_img img').getnum(crs_num).attr('alt'))
$('#carousel li').css('color','#999')
$('#carousel li').getnum(crs_num).css('color','#333')
crs_num++;
if(crs_num==3)crs_num=0;
},3000)
}
interval();
$('#carousel li').hover(function(){
var num=$(this).childNum()*-800
clearInterval(carousel)
$('.crs_img').animate({
attr:'x',
target:num,
time:50,
speed:5,
})
$('.crs_words p').html($('.crs_img img').getnum($(this).childNum()).attr('alt'))
$('#carousel li').css('color','#999')
$(this).css('color','#333')
},function(){
interval()
})
animate是自己封装的，可能和jq不兼容
求淡入淡出的js轮播效果的代码
如下代码可以实现，不过你首先需要引用Jquery，我使用的是jquery-1.7.1.min.js
支持两个div或多个div的淡入淡出切换：
div id="imgbox"
div style="width:100px;height:100px;background-color:red;"/div
div style="width:100px;height:100px;background-color:blue;"/div
/div
script src="jquery-1.7.1.min.js"/script
script
$(document).ready(function(){
$("#imgbox div").fadeOut(0).eq(0).fadeIn(0);
var i = 0;
setInterval(function(){
if($("#imgbox div").length (i+1)){
$("#imgbox div").eq(i).fadeOut(0).next("div").fadeIn(1000);
i++;
}
else{
$("#imgbox div").eq(i).fadeOut(0).siblings("div").eq(0).fadeIn(1000);
i = 0;
}
},2000);
});
/script
求首页js轮播图代码
!DOCTYPE html
html
head
meta charset="UTF-8"
titlequery焦点轮播图/title
style type="text/css"
*{ margin: 0; padding: 0; text-decoration: none;}
body { padding: 20px;}
#container { width: 600px; height: 400px; border: 3px solid #333; overflow: hidden; position: relative;}
#list { width: 4200px; height: 400px; position: absolute; z-index: 1;}
#list img { float: left;}
#buttons { position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 250px;}
#buttons span { cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px;}
#buttons .on { background: orangered;}
.arrow { cursor: pointer; display: none; line-height: 39px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 40px; position: absolute; z-index: 2; top: 180px; background-color: RGBA(0,0,0,.3); color: #fff;}
.arrow:hover { background-color: RGBA(0,0,0,.7);}
#container:hover .arrow { display: block;}
#prev { left: 20px;}
#next { right: 20px;}
/style
script type="text/javascript" src="js/jquery.1.10.2.js"/script
script type="text/javascript"
$(function () {
var container = $('#container');
var list = $('#list');
var buttons = $('#buttons span');
var prev = $('#prev');
var next = $('#next');
var index = 1;
var len = 5;
var interval = 3000;
var timer;
function animate (offset) {
var left = parseInt(list.css('left')) + offset;
if (offset0) {
offset = '+=' + offset;
}
else {
offset = '-=' + Math.abs(offset);
}
list.animate({'left': offset}, 300, function () {
if(left -200){
list.css('left', -600 * len);
}
if(left (-600 * len)) {
list.css('left', -600);
}
});
}
function showButton() {
buttons.eq(index-1).addClass('on').siblings().removeClass('on');
}
function play() {
timer = setTimeout(function () {
next.trigger('click');
play();
}, interval);
}
function stop() {
clearTimeout(timer);
}
next.bind('click', function () {
if (list.is(':animated')) {
return;
}
if (index == 5) {
index = 1;
}
else {
index += 1;
}
animate(-600);
showButton();
});
prev.bind('click', function () {
if (list.is(':animated')) {
return;
}
if (index == 1) {
index = 5;
}
else {
index -= 1;
}
animate(600);
showButton();
});
buttons.each(function () {
$(this).bind('click', function () {
if (list.is(':animated') || $(this).attr('class')=='on') {
return;
}
var myIndex = parseInt($(this).attr('index'));
var offset = -600 * (myIndex - index);
animate(offset);
index = myIndex;
showButton();
})
});
container.hover(stop, play); //鼠标移入停止轮播
play();
});
/script
/head
body
div id="container"
div id="list" style="left: -600px;"
img src="img/5.jpg" alt="1"/
img src="img/1.jpg" alt="1"/
img src="img/2.jpg" alt="2"/
img src="img/3.jpg" alt="3"/
img src="img/4.jpg" alt="4"/
img src="img/5.jpg" alt="5"/
img src="img/1.jpg" alt="5"/
/div
div id="buttons"
span index="1" class="on"/span
span index="2"/span
span index="3"/span
span index="4"/span
span index="5"/span
/div
a href="javascript:;" id="prev" class="arrow"lt;/a
a href="javascript:;" id="next" class="arrow"gt;/a
/div
/body
/html
可以直接复制用，记得引入JQ库！
