轮播图代码js（简单的HTML+js图片轮播）

本文目录

• 简单的HTML+js图片轮播
• 求js轮播图代码,有详细注释
• 如何用javascript实现轮播图
• js实现轮播代码怎么写
• js代码实现banner图片轮播

简单的HTML+js图片轮播

h5代码：

《div id=“wrap“》《ul id=“list“》《li》10《/li》《li》9《/li》《li》8《/li》《li》7《/li》《li》6《/li》《li》5《/li》《li》4《/li》《li》3《/li》《li》2《/li》《li》1《/li》《/ul》《/div》

css代码：

《style type=“text/css“》@-webkit-keyframes move{0%{left:-500px;}100%{left:0;}}#wrap{width:600px;height:130px;border:1px solid #000;position:relative;margin:100px auto;overflow: hidden;}#list{position:absolute;left:0;top:0;padding:0;margin:0;-webkit-animation:5s move infinite linear;width:200%;}#list li{list-style:none;width:120px;height:130px;border:1px solid red;background: pink;color:#fff;text-align: center;float:left;font:normal 50px/2.5em ’微软雅黑’;}#wrap:hover #list{-webkit-animation-play-state:paused;}《/style》

扩展资料：

轮播图就是一种网站在介绍自己的主打产品或重要信息的传播方式。说的简单点就是将承载着重要信息的几张图片，在网页的某一部位进行轮流的呈现，从而做到让浏览者很快的了解到网站想要表达的主要信息。以及各种新闻网站的头版头条都是用这种方式呈现的重要信息。

轮播图的实现方式：例如：有5张轮播的图片，每张图片的宽度为1024px、高度为512px.那么轮播的窗口大小就应该为一张图片的尺寸，即为：1024×512。之后将这5张图片0px水平相接组成一张宽度为：5120px,高度依然为：512px。最后将这张合成后的大图每次向左移动1024px即可实现轮播图。

求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“》《《/span》《span id=“right“》》《/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);}//获取最外面的divvar box = my$(“box“);//获取相框var screen = box.children;//获取相框的宽度var imgWidth = screen.offsetWidth;//获取ulvar ulObj = screen.children;//获取ul中的livar ulLiObj = ulObj.children;//获取olvar olObj = screen.children;//获取的是左右焦点的divvar 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++) {//创建livar 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.className = “current“;}《/script》《/body》《/html》

如何用javascript实现轮播图

function getStyle(obj,name){ 2 if(obj.currentStyle){ 3 return obj.currentStyle.className = ’active’;106 107 //this.index = now; //反过来写就不对了大兄弟108 //content.style.left = -400 * this.index + ’px’;109 startMove(content, {110 left: -400 * now, //你还真别说，json格式就是这么写的111 });112 }113 114 function autoPlay() {115 now++;116 if (now == aLi.length) {117 now = 0;118 }119 play();120 }121 122 var timer = setInterval(autoPlay, 2000);123 wrap.onmouseover = function(){ //这里如果把事件绑定到ul上的话，那么鼠标移入，下面对饮的li会不起作用，124 clearInterval(timer); //因为li的层级比较高，所以应该把事件绑定到大的div上125 }126 wrap.onmouseout = function(){127 timer = setInterval(autoPlay,2000);128 //setInterval(autoPlay,2000); 不能这么写，凡是开的定时器，必须得赋值，要不然总会多开一个定时器，导致速度加快129 }130 《/script》131 《/body》132 133 《/html》

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=;i《btn.length;i++ ){

btn.className=’’;  //很容易看懂吧？每个按钮都先设置成看不见，然后把当前按钮设置成可见。

btn.className=’current’;

}

for(i=;i《imgs.length;i++){ //把图片的效果设置和按钮相同

imgs.style.opacity=;

imgs.style.opacity=;

}

}

//切换按钮功能，响应对应图片

for(i=;i《btn.length;i++){

btn.index=i; //不知道你有没有发现，循环里的方法去调用循环里的变量体i，会出现调到的不是i的变动值的问题。所以我先在循环外保存住

btn.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》

js代码实现banner图片轮播

这是我以前写过的一个，样式你改一下就OK了《div class=“fbanner widget3924“》 《div id=“i_focus“》 《div id=“i_focus_pic“》 《ul id=“i_focus_piclist“》 《li style=“display: none;“》 《a href=““ target=“_blank“ style=“background: url(/templates/runlinjinguan/images/banner1.jpg) center 0 no-repeat;“》 《/a》 《/li》 《li style=“display: list-item;“》 《a href=““ target=“_blank“ style=“background: url(/templates/runlinjinguan/images/banner4.jpg) center 0 no-repeat;“》 《/a》 《/li》 《li style=“display: none;“》 《a href=““ target=“_blank“ style=“background: url(/templates/runlinjinguan/images/banner3.jpg) center 0 no-repeat;“》 《/a》 《/li》 《li style=“display: none;“》 《a href=““ target=“_blank“ style=“background: url(/templates/runlinjinguan/images/banner2.jpg) center 0 no-repeat;“》 《/a》 《/li》 《/ul》 《div id=“i_focus_opdiv“》 《/div》 《ul id=“i_focus_btn“》 《li id=“p0“ class=““》 《span》 《/span》 《/li》 《li id=“p0“ class=“i_cur“》 《span》 《/span》 《/li》 《li id=“p0“ class=““》 《span》 《/span》 《/li》 《li id=“p0“ class=““》 《span》 《/span》 《/li》 《/ul》 《/div》 《/div》 《script type=“text/javascript“ src=“/templates/runlinjinguan/js/flash.js“》《/script》 《script type=“text/javascript“》 $(“#i_focus_btn“).find(“li“).eq(0).addClass(“i_cur“); 《/script》 《/div》引用的js文件// JavaScript Document //flash js$(document).ready(function () { var i_curIndex = 0; var beauBeauSlide; //函数对象 var i_curID = 0; //取得鼠标下方的对象ID var pictureID = 0; //索引ID $(“#i_focus_piclist li“).eq(0).show(); //默认 autoScroll(); $(“#i_focus_btn li“).hover(function (e) { StopScrolll(); $(“#i_focus_btn li“).removeClass(“i_cur“) //所有的li去掉当前的样式加上正常的样式 $(this).addClass(“i_cur“); //而本身则加上当前的样式去掉正常的样式 i_curID = $(this).attr(“id“); //取当前元素的ID pictureID = $(“#i_focus_btn li“).index(this);// i_curID.substring(i_curID.length - 1); //取最后一个字符 $(“#i_focus_piclist li“).eq(pictureID).fadeIn(“slow“); //本身显示 $(“#i_focus_piclist li“).not($(“#i_focus_piclist li“)).hide(); //除了自身别的全部隐藏 $(“#i_focus_tx li“).hide(); $(“#i_focus_tx li“).eq(pictureID).show(); }, function () { //当鼠标离开对象的时候获得当前的对象的ID以便能在启动自动时与其同步 i_curID = $(this).attr(“id“); //取当前元素的ID pictureID = i_curID.substring(i_curID.length - 1); //取最后一个字符 i_curIndex = pictureID; autoScroll(); }); //自动滚动 function autoScroll() { var myNubli = $(“#i_focus_btn li“).size(); if (myNubli 》 1) { $(“#i_focus_btn li:last“).removeClass(“i_cur“); $(“#i_focus_tx li:last“).hide(); $(“#i_focus_btn li“).eq(i_curIndex).addClass(“i_cur“); $(“#i_focus_btn li“).eq(i_curIndex - 1).removeClass(“i_cur“); $(“#i_focus_tx li“).eq(i_curIndex).show(); $(“#i_focus_tx li“).eq(i_curIndex - 1).hide(); $(“#i_focus_piclist li“).eq(i_curIndex).fadeIn(“slow“); $(“#i_focus_piclist li“).eq(i_curIndex - 1).hide(); i_curIndex++; i_curIndex = i_curIndex 》= myNubli ? 0 : i_curIndex; beauBeauSlide = setTimeout(autoScroll, 5000); } } function StopScrolll() //当鼠标移动到对象上面的时候停止自动滚动 { clearTimeout(beauBeauSlide); }});//第二个渐隐幻灯开始var defaultOpts = { interval: 3000, fadeInTime: 800, fadeOutTime: 500};var _titles = $(“ul.slide-txt li“);var _titles_bg = $(“ul.op li“);var _bodies = $(“ul.slide-pic li“);var _count = _titles.length;var _current = 0;var _intervalID = null;var stop = function () { window.clearInterval(_intervalID);};var slide = function (opts) { if (opts) { _current = opts.current || 0; } else { _current = (_current 》= (_count - 1)) ? 0 : (++_current); }; _bodies.filter(“:visible“).fadeOut(defaultOpts.fadeOutTime, function () { _bodies.eq(_current).fadeIn(defaultOpts.fadeInTime); _bodies.removeClass(“cur“).eq(_current).addClass(“cur“); }); _titles.removeClass(“cur“).eq(_current).addClass(“cur“); _titles_bg.removeClass(“cur“).eq(_current).addClass(“cur“);}; //endof slidevar go = function () { stop(); _intervalID = window.setInterval(function () { slide(); }, defaultOpts.interval);}; //endof govar itemMouseOver = function (target, items) { stop(); var i = $.inArray(target, items); slide({ current: i });}; //endof itemMouseOver_titles.hover(function () { if ($(this).attr(’class’) != ’cur’) { itemMouseOver(this, _titles); } else { stop(); }},go);//_titles_bg.hover(function() { itemMouseOver(this, _titles_bg); }, go);_bodies.hover(stop, go);go();var slideX = { _this: $(’.catalog .imgbox’), _btnLeft: $(’.catalog .left’), _btnRight: $(’.catalog .right’), init: function () { slideX._btnLeft.click(slideX.slideLeft); slideX._btnRight.click(slideX.slideRight); }, slideLeft: function () { slideX._btnLeft.unbind(’click’, slideX.slideLeft); for (i = 0; i 《 2; i++) { slideX._this.find(’li:last’).prependTo(slideX._this); } slideX._this.css(’marginLeft’, -224); slideX._this.animate({ ’marginLeft’: 0 }, 500, function () { slideX._btnLeft.bind(’click’, slideX.slideLeft); }); return false; }, slideRight: function () { slideX._btnRight.unbind(’click’, slideX.slideRight); slideX._this.animate({ ’marginLeft’: -224 }, 500, function () { slideX._this.css(’marginLeft’, ’0’); for (i = 0; i 《 2; i++) { slideX._this.find(’li:first’).appendTo(slideX._this) } slideX._btnRight.bind(’click’, slideX.slideRight); }); return false; }}$(document).ready(function () { slideX.init();})$(document).ready(function () { var newTime = new Date(); var newTime = newTime.getTime(); var $imgTmp = $(’#topromotion’).find(’img:first’); var osrc = $imgTmp.attr(’src’); $imgTmp.attr(’src’, osrc + ’?’ + newTime);});希望对你有帮助！