带文字说明自动轮播图代码（轮播图怎么制作代码）

本篇文章给大家谈谈带文字说明自动轮播图代码，以及轮播图怎么制作代码对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、dw图片轮播代码是什么
• 2、求详细讲解javascript轮播图代码！
• 3、跪求文字轮播html代码，谢谢
• 4、HTML轮播图片代码，带解释
• 5、求 图片轮播（下面带对应字的）代码

dw图片轮播代码是什么

html部分：

div id="box" onmouseover="stop()" onmouseout="start()"

div id="red" class="slide"/div

div id="green" class="slide"/div

div id="blue" class="slide"/div

/div

css部分：

#box{

width:100px;

height:100px;

border:1px solid black;

position:relative;

}

.slide{

width:100px;

height:100px;

position:absolute;

}

#box{

width:100px;

height:100px;

border:1px solid black;

position:relative;

overflow:hidden;

}

JS部分：

onload=function(){

var arr = document.getElementsByClassName("slide");

for(var i=0;iarr.length;i++){

arr[i].style.left = i*100+"px";

}

}

function LeftMove(){

var arr = document.getElementsByClassName("slide");

for(var i=0;iarr.length;i++){

var left = parseFloat(arr[i].style.left);

left-=2;

var width = 100;//图片的宽度

if(left=-width){

left=(arr.length-1)*width;//当图片完全走出显示框，拼接到末尾

}

arr[i].style.left = left+"px";

}

}

moveId=setInterval(LeftMove,10);//设置一个10毫秒定时器，并给自己取名

if(left=-width){

left=(arr.length-1)*width;//当图片完全走出显示框，拼接到末尾

clearInterval(moveId);

}

function divInterval(){

moveId=setInterval(LeftMove,10);//设置一个10毫秒定时器

}

timeId=setInterval(divInterval,3000);//设置一个3秒的定时器。

function stop(){

clearInterval(timeId);//鼠标停留关闭B定时器

}

function start(){

clearInterval(timeId);//重新打开一个定时前，先关闭之前定时器。

timeId=setInterval(divInterval,2000);//重启一个定时器

}

//页面失去焦点定时器停止

onblur = function(){

stop();

}

//页面获取焦点时重启定时器

onfocus = function(){

start();

}

扩展资料：

代码解析：

为整个页面添加onload加载完成事件，当浏览器打开并加载完并自动执行事件中的代码块。这部分js代码写在刚才css下面即可，保持同级结构。

当页面加载完全，三个div应该并列在一起。

接下来，需要实现将这三个div整体向左移动，使用定时器，即前面的定时器A。

为了解决当鼠标悬停在轮播图，轮播图停止轮播效果，需要在box上添加鼠标移入和移出事件。

当浏览器窗口切出或页面切换到其他页面一段时间再回来时，轮播效果会有短暂加速（随切出时间加长而加长）。

主要是因为虽然窗口切出去了，定时器依然在执行，但页面却没有将效果显示，所以切回来后会将之前的效果显示出来而加速轮播图。所以添加页面焦点事件。

求详细讲解javascript轮播图代码！

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

title很早时候写的/title

script type="text/javascript" src=""/script

script type="text/javascript"

(function($) {     

$.fn.pluginName = function(options) {   

//默认配置

var defaults = {

speed: "3000",

flag: true//自动轮播

};

//合并参数，把外部传进来的参数和defaults参数合并，传进来的优先级大

var opts = $.extend(defaults, options);

return this.each(function(){

var _this=$(this);//把当前对象赋值给_this，防止下面$(this)被覆盖

var ads=_this.find('ul.myXX').children('li');//ads就是所有li

var n = ads.length;//li的长度就是有几张图片轮播

var title=_this.find('ul.myXX').children('li.selected').children('a').attr('title');//找到要显示的title

_this.find('#mytitle').html(title);//把title赋值到mytitle中，这个都是独立的构件

var index=0;//设置当前索引为0，这个变量一会用于记录轮播到第几个图上

var flag = opts.flag;//自动轮播

var $lis_all = _this.find('ul.myDD').children('li');//对着下面的html看myDD里面所有li

//遍历小图的li标签，给li标签添加click事件

ads.each(function(i) {//i是索引，你可以参考each这个函数的参数项

$(this).click(function(){//添加click事件

index = i;//赋值索引

//这几行就是换图片标题和显示了，不多讲

$(this).addClass("selected").siblings("li").removeClass("selected");

title=_this.find('ul.myXX').children('li.selected').children('a').attr('title');

$lis_all.eq(index).fadeIn("slow").addClass("show").siblings("li").fadeOut("fast").removeClass("show");

_this.find('#mytitle').html(title);

});        

});

/*自动切换效果*/

var switchover;

if(flag){

//switchover赋值为setInterval定时执行对象，目前是3秒执行一次

switchover = setInterval(function(){

var todo = (index+1)%n;

ads.eq(todo).click();//执行内容就是li绑定单击事件

},opts.speed);//执行事件就是传进来的参数

}

/*鼠标放上去 暂停播放*/

$lis_all.hover(function(){

clearInterval(switchover);//清除switchover

flag = false;

},function(){

flag = true;

//从新执行

switchover = setInterval(function(){

var todo = (index+1)%n;

ads.eq(todo).click();

},opts.speed);

});

});

};   

})(jQuery);

/script

/head

body

style type="text/css"

.myDD{

 overflow:hidden;

 width:458px;

 height:253px;

}

.myDD li{

 display:none;

}

.myDD li.show{

 display:block;

}

/style

div id="myDiv"

    div id="mytitle"/div

    ul class="myDD"

        li class="show"img src="my_li.jpg" width="458" height="253" border="0" //li

        liimg src="hd010.gif" width="458" height="253" border="0" //li

        liimg src="hd01.gif" width="458" height="253" border="0" //li

    /ul

    ul class="myXX"

        li class="selected"a href="#" title="增加一些更"img src="my_li.jpg" width="110" height="54"  border="0" //a/li

        lia href="#" title="增加一些更一些更好玩的内容"img src="hd010.gif" width="110" height="54"  border="0" //a/li

        lia href="#" title="增些更好玩的内容增加一些更好玩的内容"img src="hd01.gif" width="110" height="54"  border="0" //a/li

    /ul

/div

script language="javascript"

$(function(){

$('#myDiv').pluginName();

});

/script

/body

/html

这是第一次用jq写的，我注释都添加了，应该看得懂，沉余代码稍多，但勉强可以看看

跪求文字轮播html代码，谢谢

用marquee/标签实现，html代码示例如下

html

head

title文字滚动示例/title

/head

body

    div

        水平滚动：

marquee direction="left" align="bottom" height="25" width="100%" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" scrolldelay="1"水平滚动字幕内容/marquee

/div

div

垂直滚动：

marquee direction="up" height="200" onmouseout="this.start()" onmouseover="this.stop()" scrollAmount="1" scrollDelay="1"垂直滚动字内容/marquee

    /div

/body

/html

HTML轮播图片代码，带解释

!DOCTYPE HTML

html

head

meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /

title五图三屏轮播js特效代码/title

meta name="Keywords" content="五图三屏轮播js特效代码" /

meta name="description" content="五图三屏轮播js特效代码" /

link href="" type="text/css" rel="Stylesheet" /

link href="/style/style_kj.css" type="text/css" rel="stylesheet" /

link href="/style/demo.css" type="text/css" rel="stylesheet" /

script type="text/javascript" src="/style/js/jquery-1.2.pack.js"/script

script type="text/javascript"

var theme_list_open = false;

$(document).ready(function () {

function fixHeight() {

var headerHeight = $("#switcher").height();

$("#iframe").attr("height", $(window).height()-84 + "px");

}

$(window).resize(function () {

fixHeight();

}).resize();

//响应式预览

$('.icon-monitor').addClass('active');

$(".icon-mobile-3").click(function () {

$("#by").css("overflow-y", "auto");

$('#iframe-wrap').removeClass().addClass('mobile-width-3');

$('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');

$(this).addClass('active');

return false;

});

$(".icon-mobile-2").click(function () {

$("#by").css("overflow-y", "auto");

$('#iframe-wrap').removeClass().addClass('mobile-width-2');

$('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');

$(this).addClass('active');

return false;

});

$(".icon-mobile-1").click(function () {

$("#by").css("overflow-y", "auto");

$('#iframe-wrap').removeClass().addClass('mobile-width');

$('.icon-tablet,.icon-mobile,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');

$(this).addClass('active');

return false;

});

$(".icon-tablet").click(function () {

$("#by").css("overflow-y", "auto");

$('#iframe-wrap').removeClass().addClass('tablet-width');

$('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');

$(this).addClass('active');

return false;

});

$(".icon-monitor").click(function () {

$("#by").css("overflow-y", "hidden");

$('#iframe-wrap').removeClass().addClass('full-width');

$('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');

$(this).addClass('active');

return false;

});

});

/script

script type="text/javascript"

function Responsive($a) {

if ($a == true) $("#Device").css("opacity", "100");

if ($a == false) $("#Device").css("opacity", "0");

$('#iframe-wrap').removeClass().addClass('full-width');

$('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');

$(this).addClass('active');

return false;

};

/script

/head

body id="by" style="overflow-y: hidden"

div id="switcher"

div class="center"

ul

li class="logoTop"在线预览！/li

div id="Device"

li class="device-monitor"a href="javascript:"div class="icon-monitor"/div/a/li

li class="device-mobile"a href="javascript:"div class="icon-tablet" /div/a/li

li class="device-mobile"a href="javascript:"div class="icon-mobile-1" /div/a/li

li class="device-mobile-2"a href="javascript:"div class="icon-mobile-2" /div/a/li

li class="device-mobile-3"a href="javascript:"div class="icon-mobile-3" /div/a/li

/div

/ul

div class="muen_top"

a href="/" class="indexactive"首页/a

a href="/tupian/" class="l11active" target="_blank"高清图片/a

a href="/moban/" class="l12active" target="_blank"模板/a

a href="/ppt/" class="l726active" target="_blank"ppt模板/a

a href="/tubiao/" class="l49active" target="_blank"图标/a

a href="/kuzhan/" class="l713active" target="_blank"酷站/a

a href="" class="l13active" target="_blank"字体/a

a href="/psd/" class="l713active" target="_blank"PSD素材/a

a href="/shiliang/" class="l15active" target="_blank"矢量图/a

a href="/yinxiao/" class="l713active" target="_blank"音效/a

a href="/biaoqing/" class="l560active" target="_blank"表情/a

a href="" class="l713active" target="_blank"壁纸/a

a href="/donghua/" class="l653active" target="_blank"动画/a

a href="/jiaoben/" target="_blank"脚本/a

a href="/zhuanti/" target="_blank"专题/a

/div

div class="tougao"

a href="" target="_blank"我要投稿/a

/div

/div

/div

div id="iframe-wrap"

iframe id="iframe" src="" frameborder="0" width="100%" /iframe

/div

div id="footer-notice" class="kj_bottom"

div style=" width:980px; margin:0 auto"

p class="left cut"

span名称：/span

a href="/jiaoben/160419378420.htm" title="点击下载" class="down" target="_blank"五图三屏轮播js特效代码/a

span类型：/span

a href="/jiaoben/" title="脚本" target="_blank"脚本/a

span标签：/spana href="/tag_jiaoben/js.html" target="_blank"js/aa href="/tag_jiaoben/JiuGongGe.html" target="_blank"九宫格/aa href="/tag_jiaoben/TuPianQieHuan.html" target="_blank"图片切换/aa href="/tag_jiaoben/TuPianLunBo.html" target="_blank"图片轮播/a

/p

p class="left"

span分享到：/span

a title='分享到新浪微博' href="javascript:void(0)" id="fxwb" class="sn"新浪/a

a title='分享到腾讯微博' href='javascript:void(0)' onclick=posttoWb() class="tx"腾讯/a

a title="分享到QQ空间" href="javascript:window.open(''+encodeURIComponent(document.location.href));void(0)" class="qq"QQ空间/a

/p

div class="clear"/div

/div

/div

script type="text/javascript"

var description = '五图三屏轮播js特效代码: 五图三屏轮播js特效代码是一款ZHIME织蜜内衣丝袜五图三屏图片切换特效。';

var sendT = {

getHeader: function () {

var g_title = description;

var re = /[^]*?font[^]*?/gi;

g_title = g_title.replace(re, "");

return g_title;

},

getFirstImgSrc: function () {

var allPageTags = document.getElementsByTagName("div");

for (var i = 0; i allPageTags.length; i++) {

if (allPageTags[i].className == 'downtext') {

if (allPageTags[i].getElementsByTagName("img")[0] allPageTags[i].getElementsByTagName("img")[0].width 200) {

return allPageTags[i].getElementsByTagName("img")[0].src;

}

else {

return null;

}

}

}

},

getContent: function () {

var allPageTagss = document.getElementsByTagName("div");

for (var i = 0; i allPageTagss.length; i++) {

if (allPageTagss[i].className == 'downtext') {

return allPageTagss[i].innerHTML;

}

}

}

}

document.getElementById("fxwb").onclick = function () {

(function (s, d, e, r, l, p, t, z, c) {

var f = ';', u = z || d.location, p = ['url=', e(u), 'title=', e(sendT.getHeader()), 'source=', e(r), 'sourceUrl=', e(l), 'content=', c || 'gb2312', 'pic=', e(p || '')].join('');

function a() {

if (!window.open([f, p].join(''), 'mb', ['toolbar=0,status=0,resizable=1,width=440,height=430,left=', (s.width - 440) / 2, ',top=', (s.height - 430) / 2].join(''))) u.href = [f, p].join('');

};

if (/Firefox/.test(navigator.userAgent)) setTimeout(a, 0); else a();

})(screen, document, encodeURIComponent, 'CHINAZ', '', sendT.getFirstImgSrc(), null, null, null);

}

function posttoWb() {

var _tt = description;

var _t = encodeURI(_tt.replace(/\s+$/, ''));

var _url = encodeURI(window.location);

var _appkey = encodeURI("258efff116d2466da9b7513cbae7de0b");

var _site = encodeURI('sc.chinaz.com');

var _pic = sendT.getFirstImgSrc();

var _u = '' + _t + 'url=' + _url + 'appkey=' + _appkey + 'site=' + _site + 'pic=' + _pic;

window.open(_u, '转播到腾讯微博', 'width=700, height=580, top=320, left=180, toolbar=no, menubar=no, scrollbars=no, location=yes, resizable=no, status=no');

}

/script

script type="text/javascript" src="/js/softinfo.js.aspx?id=534084" defer="defer" charset="UTF-8"/script

div style="display:none"

script src=";web_id=300636" language="JavaScript"/script

/div

/body

/html

自己修改一下就可以了

求 图片轮播（下面带对应字的）代码

script language =javascript

var curIndex=0;

//时间间隔 单位毫秒

var timeInterval=1000;

var arr=new Array();

arr[0]="1.jpg";

arr[1]="2.jpg";

arr[2]="3.jpg";

arr[3]="4.jpg";

arr[4]="5.jpg";

arr[5]="6.jpg";

arr[6]="7.jpg";

setInterval(changeImg,timeInterval);

function changeImg()

{

var obj=document.getElementById("obj");

if (curIndex==arr.length-1)

{

curIndex=0;

}

else

{

curIndex+=1;

}

obj.src=arr[curIndex];

}

/script

img id=obj src ="1.jpg" border =0 /

带文字说明自动轮播图代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于轮播图怎么制作代码、带文字说明自动轮播图代码的信息别忘了在本站进行查找喔。