网页banner轮播代码（banner自动轮播代码）

本篇文章给大家谈谈网页banner轮播代码，以及banner自动轮播代码对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、HTML首页怎么加图片轮播？
• 2、js代码实现banner图片轮播
• 3、一般网站上的 banner 轮播效果怎么做??CV代码
• 4、网页轮播图无缝衔接的代码怎么写
• 5、dw怎么做图片轮播
• 6、简单三步实现banner的轮播效果

HTML首页怎么加图片轮播？

可以通过输入代码来操作。

这里的图片轮播方法是我从网上参考的方法，只是自己做了一些改进，先来贴一发代码：

!DOCTYPE HTML

html

head

link rel="stylesheet" type="text/css" href="./css/init2.css"

script type="text/javascript" src="./js/jquery-1.11.3.min.js"/script

script type="text/javascript" src="./js/test2.js"/script

/head

body

div id="layout"

header  class="clearfix"

div id="banner"

ul id="banner_img"

liimg src="./img/s1.jpg"/li

liimg src="./img/s2.jpg"/li

liimg src="./img/s3.jpg"/li

/ul

/div

/header

/div

/body

/html

在这个html的目录下有三个同级的文件夹，img中放图片，css和js分别存放这个网页的css文件和js文件，这里用到了jquery，记得引入顺序，jquery一定要放在其他js前面。

html代码很简单，不做过多解释。

看一下引入的css，init2.css

*{

margin: 0px ;

padding: 0px ;

}

#layout{

width: 960px ;

margin: 0 auto ;

}

#banner{

position: relative;

overflow: hidden;

width: 600px;

height: 200px;

border-radius: 10px ;

border: 2px solid black;

}

#banner_img li{

float: left;

list-style-type: none;

}

#index{

position: absolute;

right: 8px ;

bottom: 8px ;

}

#index li{

float: left;

width: 16px ;

height: 16px ;

text-align: center;

line-height: 16px ;

border-radius: 5px ;

border:1px solid #FF7300 ;

background: white;

list-style: none;

margin-left: 8px ;

cursor: pointer;

}

.clearfix:after{

content: "" ;

height: 0px ;

display: block;

clear:both ;

}

.on

{

background:#FF7300 ;

}

css基本上和前面的html中的类对应，claerfix来清除浮动，on是代表轮播图片的索引中当前的正播放的图片的索引，其实就改个背景，这里的索引是后面动态加上去的，索引在html中看不到。主要思路就是把装图片的容器设置成overfl;hidden;

下面是一种比较简单的实现，利用jquery的fadeIn和fadeOut效果来实现。

//fadeIn and fadeOut

var time ;

var index = 1 ;

var tolnum = 3 ;

$(function(){

span style="white-space:pre" /spansetInterval("showBanner("+tolnum+")",3000);

});

function showBanner(n)

{

span style="white-space:pre" /spanvar ul = $("#banner_img") ;

span style="white-space:pre" /spanul.children().fadeOut("slow") ;

span style="white-space:pre" /spanul.children().eq(index).fadeIn("slow") ;

span style="white-space:pre" /spanindex = index+1n-1 ? 0 : index+1 ;

}

恩，不知道为什么到最后一张图片的时候会产生没有淡出的bug，不太懂，请大家指教。

第二种方法是利用jquery的animation来实现margin属性的过渡。

init();

function init()

{

$(function(){

var index = 0 ;

var adTime ;

var len = $("#banner_img li").length ;

addIndex(len) ;

var bannerLi = $("#index li");

//handle index

$("#index li").mouseover(function() {

index = $("#index li").index(this) ;

showImgs(index) ;

});

//toggleInterval

$("#banner").hover(function(){

clearInterval(adTimer);

},function(){

adTimer=setInterval(function(){

//alert(index) ;

showImgs(index);

index++;

if(index==len){

index=0;

}

},2000)

}).trigger('mouseleave');

});

}

//auto add index

function addIndex(n)

{

var ul = $("ul id=\"index\"/ul") ;

for(var i=1;i=n;i++)

{

var li = $("li/li") ;

li.append(function(num){

return num

}(i)) ;

ul.append(li) ;

}

ul.children().first().addClass('on') ;

$("#banner_img").append(ul);

}

function showImgs(index)

{

var adwidth=$("#banner_imgli:first").width();

$("#banner_img").stop(true, false) ;

//$("#banner_img").css('margin-left', -index*adwidth+"px");

$("#banner_img").animate({

"marginLeft":-adwidth*index+"px"

},1000);

$("#index li").removeClass('on').eq(index).addClass('on') ;

}

hover（）是一种代替mouseenter和mouseleave的方法，听说比较好用。trigger（）来触发当前对象的一个状态，这里要先触发一次mouseleave的状态来初始化计时器，因为这里的设定是当鼠标移到$("#banner")上就销毁定时器，锁定当前图片，移开鼠标就重新添加定时器。pre name="code" class="javascript" $("#banner_img").animate({

"marginLeft":-adwidth*index+"px"

},1000);

这了就是对jquery中animation方法的使用，通过传进来的index来改变banner_img的margin，这里是margin-left，所以图片就会从右往左刷（需要设置浮动），如果需要从下往上刷就设置margin-top就好了，还有我发现js中动态添加margin是不能触发css的transition的。

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")[pictureID]).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 slide

var go = function () {

stop();

_intervalID = window.setInterval(function () {

slide();

},

defaultOpts.interval);

}; //endof go

var 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);

});

希望对你有帮助！

一般网站上的 banner 轮播效果怎么做??CV代码

直接去素材网站下载源代码就行。去蓝色理想或者懒人图库 JS代码下载。

网页轮播图无缝衔接的代码怎么写

title无缝轮播图/titlestyle*{margin: 0;padding:0; }ul{list-style: none;}.banner{width: 600px;height: 300px;border: 2px solid #ccc;margin: 100px auto;position: relative;overflow: hidden;}.img{position: absolute;top: 0;left: 0}.img li{float: left;}.num{position: absolute;bottom: 10px;width: 100%;text-align: center;font-size: 0;}.num li{width: 10px;height: 10px;background:rgba(0,0,0,0.5);display: block;border-radius: 100%;display: inline-block;margin: 0 5px;cursor: pointer;}.btn{display: none;}.btn span{display: block;width: 50px;height: 100px;background: rgba(0,0,0,0.6);color: #fff;font-size: 40px;line-height: 100px;text-align: center;cursor:pointer;}.btn .prev{position: absolute;left: 0;top: 50%;margin-top: -50px;}.btn .next{position: absolute;right: 0;top: 50%;margin-top: -50px;}.num .active{background-color: #fff;}/stylescript src=""/script/headbodydiv class="banner"ul class="img"lia href="#"img src="img/1.jpg" alt="第1张图片"/a/lilia href="#"img src="img/2.jpg" alt="第2张图片"/a/lilia href="#"img src="img/3.jpg" alt="第3张图片"/a/lilia href="#"img src="img/4.jpg" alt="第4张图片"/a/lilia href="#"img src="img/5.jpg" alt="第5张图片"/a/li/ulul class="num"/ul //div class="btn"span class="prev"/spanspan class="next"/span/div/divscript$(function(){var i=0;var timer=null;for (var j = 0; j $('.img li').length; j++) { //创建圆点$('.num').append('li/li')}$('.num li').first().addClass('active'); //给第一个圆点添加样式var firstimg=$('.img li').first().clone(); //复制第一张图片$('.img').append(firstimg).width($('.img li').length*($('.img img').width())); //将第一张图片放到最后一张图片后，设置ul的宽度为图片张数*图片宽度// 下一个按钮$('.next').click(function(){i++;if (i==$('.img li').length) {i=1; //这里不是i=0$('.img').css({left:0}); //保证无缝轮播，设置left值};$('.img').stop().animate({left:-i*600},300);if (i==$('.img li').length-1) { //设置小圆点指示$('.num li').eq(0).addClass('active').siblings().removeClass('active');}else{$('.num li').eq(i).addClass('active').siblings().removeClass('active');}})// 上一个按钮$('.prev').click(function(){i--;if (i==-1) {i=$('.img li').length-2;$('.img').css({left:-($('.img li').length-1)*600});}$('.img').stop().animate({left:-i*600},300);$('.num li').eq(i).addClass('active').siblings().removeClass('active');})//设置按钮的显示和隐藏$('.banner').hover(function(){$('.btn').show();},function(){$('.btn').hide();})//鼠标划入圆点$('.num li').mouseover(function(){var _index=$(this).index();$('.img').stop().animate({left:-_index*600},150);$('.num li').eq(_index).addClass('active').siblings().removeClass('active');})//定时器自动播放timer=setInterval(function(){i++;if (i==$('.img li').length) {i=1;$('.img').css({left:0});};$('.img').stop().animate({left:-i*600},300);if (i==$('.img li').length-1) {$('.num li').eq(0).addClass('active').siblings().removeClass('active');}else{$('.num li').eq(i).addClass('active').siblings().removeClass('active');}},1000)//鼠标移入，暂停自动播放，移出，开始自动播放$('.banner').hover(function(){clearInterval(timer);},function(){timer=setInterval(function(){i++;if (i==$('.img li').length) {i=1;$('.img').css({left:0});};$('.img').stop().animate({left:-i*600},300);if (i==$('.img li').length-1) {$('.num li').eq(0).addClass('active').siblings().removeClass('active');}else{$('.num li').eq(i).addClass('active').siblings().removeClass('active');}},1000)})})/script

dw怎么做图片轮播

dw做图片轮播步骤如下：

1、首先打开你的dw，按快捷键ctrl+n创建一个新的网页。

2、点菜单栏上的表格，插入一个表格。

3、在属性栏设置表格的宽和高，这个表格用于添加轮播广告，所以宽和高都要符合我们的广告图片的宽和高。

4、然后点击插入添加一个可编辑区，这个区域在此例子中没用，只是为了能够保存模板，所以随意加一个即可。

5、点击文件，将该页面存为模板。

6、弹出了另存为模板的对话框。

7、我们接着在这个模板中添加轮播广告。将光标放到你想添加广告的表格。选择命令，kaosweaver，advanced random images。

8、弹出了对话框，我们设置好action和blidetime两个值得大小。random slideshow就是随机广告，blideshow timer指的是几秒钟切换一个图片。点击加号添加按钮。

9、选择你要添加的图片。

10、我添加了两个图片来示范。

11、点击ok以后我们就回到了模板页。你看不到轮播广告的图片，因为你需要新建页面来看。按快捷键ctrl+s保存。

12、我们新建一个页面，按快捷键ctrl+n，在弹出的新建对话框中选择模板。选择banner轮播模板，这是我们刚才新建的模板。

13、创建了页面以后，我们点击拆分按钮，找到你添加图片的地方，我们修改一下图片路径，因为你要在本地测试，所以需要修改到本地的图片地址。

14、接着按快捷键F12,预览。看看第一幅图是刚打开的效果，一秒后自动切换到了第二幅图。

简单三步实现banner的轮播效果

目前有很多人使用Axure做轮播效果，步骤略复杂了些。这里，抛开其他设计原型不说，只说说banner图片轮播，三步教你实现轮播效果，我用的原型图软件是 Mockplus 。

把图片准备好，要开始了。

第一步：拖出“图片轮播”组件到工作区

第二步：双击“图片轮播”组件

点击“+”导入图片（事先把图片准备好）

选中你所需要的图片，可以多选，最多不能超过8个，按Ctrl键多选。点击打开就把选中的图片放入图片轮播里面了。

点击确定，就OK了。

第三步：演示，点击软件上方的三角符号或直接按F5进入演示界面。

如果需要调整其他属性，可以在属性面板里面选择。

1 是否选择指示器

2 指示器类型：圆点、方形、数字。

3 指示器方向：底、顶、左、右

4 指示器颜色

5 动画效果

6 播放间隔

是不是很简单很容易操作呢？

关于网页banner轮播代码和banner自动轮播代码的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。