当前位置：首页 > 代码 > 正文

js幻灯片轮播免费代码（幻灯片轮播视频格式）

admin 发布：2022-12-19 19:09 92

今天给各位分享js幻灯片轮播免费代码的知识，其中也会对幻灯片轮播视频格式进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

js幻灯片广告切换代码

js幻灯片广告切换代码如下操作。

1、下载到的压缩包，上传到网站根目录下。

2、解压出来，复制index.html里面的主要代码，插入到网站项目想要放置的位置。

3、对插入的代码，根据自己需求对文字以及图片做适当的修改和替换，即可投入到自己网站中使用以及呈现。

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

});

希望对你有帮助！

求一js 幻灯片式 图片轮播代码 ，若有看到其他网站用这种的轮播也可以给个链接，谢谢

试试这个图片切换

有12345数字一起切换

鼠标点一下数字会变换到另一张图片，不点就会自动换

里面有教程和源码

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

求一段简单的js图片轮播代码，刚学js，不要太复杂。谢谢！

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

html xmlns=""

head

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

meta name="keywords" content="焦点图" /

meta name="description" content="焦点图代码" /

title焦点图/title

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

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

/head

body

!-- 代码 开始 --

style

.ck-slide ul { margin: 0; padding: 0; list-style-type: none;}

.ck-slide { position: relative; overflow: hidden;}

.ck-slide ul.ck-slide-wrapper { position: absolute; top: 0; left: 0; z-index: 1; margin: 0; padding: 0;}

.ck-slide ul.ck-slide-wrapper li { position: absolute;}

.ck-slide .ck-prev, .ck-slide .ck-next { position: absolute; top: 50%; z-index: 2; width: 35px; height: 70px; margin-top: -35px; border-radius: 3px; opacity: .15; background: red; text-indent: -9999px; background-repeat: no-repeat; transition: opacity .2s linear 0s;}

.ck-slide .ck-prev { left: 5px; background: url(templets/default/images/arrow-left.png) #000 50% no-repeat;}

.ck-slide .ck-next { right: 5px; background: url(templets/default/images/arrow-right.png) #000 50% no-repeat;}

.ck-slidebox { position: absolute; left: 50%; bottom: 0px; z-index: 30; hright:30px;width:100%}

.ck-slidebox ul { height: 30px; padding: 0 4px; background: rgba(0,0,0,0.5); text-align:center}

.ck-slidebox ul li { float: left; height: 30px; margin: 0px 4px;line-height:30px;color:#fff;display:none}

.ck-slidebox ul li em { display: block; width: 100%; height: 30px; cursor: pointer; font-size:14px}

.ck-slidebox ul li.current em {color:#fff }

.ck-slidebox ul li em:hover { }

.ck-slide { width: 600px; height: 400px; margin: 0 auto;}

.ck-slide ul.ck-slide-wrapper { height: 400px;}

.ck-slide-wrapper li {display:none}

.ck-slidebox ul li{display:none}

.current{display:block!important}

/style

div class="ck-slide"

ul class="ck-slide-wrapper"

li

a target="_blank" href="" target="_blank"img id="slide-img-1" src="" class="slide" alt="国考明起报名招2.7万人 首次仅面向体制外招录" style='width:600px'//a

/li

li

a target="_blank" href="" target="_blank"img id="slide-img-2" src="" class="slide" alt="中关村“变形记”：从电子卖场到7.2公里的创业大街" style='width:600px'//a

/li

li

a target="_blank" href="" target="_blank"img id="slide-img-3" src="" class="slide" alt="金星大聊两性话题 辣评娱乐圈男星：没我想睡的" style='width:600px'//a

/li

/ul

a href="javascript:" class="ctrl-slide ck-prev"上一张/a a href="javascript:" class="ctrl-slide ck-next"下一张/a

div class="ck-slidebox"

div class="slideWrap"

ul class="dot-wrap"

liem国考明起报名招2.7万人 首次仅面向体制外招录/em/li

liem中关村“变形记”：从电子卖场到7.2公里的创业大街/em/li

liem金星大聊两性话题 辣评娱乐圈男星：没我想睡的/em/li

/ul

/div

/div

/div

!--图片轮播结束--

!-- 代码 结束 --

script

$('.ck-slide').ckSlide({

autoPlay: true

});

/script

/body

/html

js幻灯片轮播免费代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于幻灯片轮播视频格式、js幻灯片轮播免费代码的信息别忘了在本站进行查找喔。

标签：

版权说明：如非注明，本站文章均为 AH站长 原创，转载请注明出处和附带本文链接；

本文地址：http://ahzz.com.cn/post/19508.html；

相关推荐

取消回复欢迎 你 发表评论:

标签列表
最近发表
友情链接
闽ICP备2023004790号 厦门爱流量网络科技有限公司 版权所有

分享到

温馨提示

下载成功了么？或者链接失效了？

联系我们反馈

立即下载