缓慢滚动的轮播图代码（轮播图滑动）

今天给各位分享缓慢滚动的轮播图代码的知识，其中也会对轮播图滑动进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、js代码实现banner图片轮播
• 2、JS如何实现左右滚动轮播代码详细点
• 3、flash图片轮播和滚动条文字代码
• 4、求一个简单的js实现轮播代码
• 5、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")[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如何实现左右滚动轮播代码详细点

var datas = [

{imgSrc:"（图片 ）"},

{imgSrc:"（图片 ）"},

{imgSrc:"（图片 ）"},

{imgSrc:"（图片 ）"},

{imgSrc:"（图片 ）"},

{imgSrc:"（图片 ）"}

];

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

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

for(var i = 0,len = datas.length;ilen;i++){

var div = document.createElement("div");

var li = document.createElement("li");

if(i==0){ //默认第一项轮播项显示 对应的控制按钮被选中

div.className = "item active";

li.className = "active";

}else{ //其他项隐藏 其他的控制按钮样式不改变

div.className = "item";

li.className = "";

}

div.innerHTML = 'a href="' + datas[i].targetSrc + '"' +

'img src="' + datas[i].imgSrc + '" /' +

'/a';

li.innerHTML = i + 1;

banner.appendChild(div);

list.appendChild(li);

}

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

var items = document.querySelectorAll("#lunBo #banner .item");

var lis = document.querySelectorAll("#lunBo #list li");

var currentIndex = 0;//(控制按钮和轮播项共同的索引)

for(var i = 0,len = lis.length;ilen;i++){

lis[i].index = i;

lis[i].onmouseenter = function(){

currentIndex = this.index;

for(var j = 0;jlen;j++){

lis[j].className = "";

items[j].className = "item";

}

this.className = "active";

items[this.index].className = "item active";

}

}

var termId; //全局变量

function autoPlay(){

termId = setInterval(function(){

currentIndex++;

if(currentIndex==lis.length){

currentIndex = 0;

}

lis[currentIndex].onmouseenter();

},3000);

}

autoPlay();//打开页面自动轮播

//鼠标进入停止轮播

lunBo.onmouseenter = function(){

clearInterval(termId);

}

//鼠标离开继续轮播

lunBo.onmouseleave = function(){

autoPlay();

}

我这还有其他的，先采纳一下加我，我给你发

flash图片轮播和滚动条文字代码

试试这个图片轮播

有12345数字一起切换

有小图大图一起切换

里面有教程和源码

求一个简单的js实现轮播代码

!DOCTYPE HTML    

html    

head    

titleJS无缝滚动图片/title    

meta charset=UTF-8 /    

style type="text/css"    

* {    

margin: 0;    

padding: 0;    

}    

#div2 {    

margin: auto;    

width: 602px;    

overflow: hidden;    

left: 200px;    

}    

#div1 {    

position: relative;    

left: 0px;    

width: 1200px;    

}    

#div1 li {    

list-style-type: none;    

float: left;    

width: 200px;    

height: 180px;    

}    

img {    

width: 200px;    

height: 180px;    

}    

ul#ul1 {    

position: relative;    

}    

/style    

script type="text/javascript"    

window.onload = function ()    

   {    

   var oUl = document.getElementById ('ul1');    

   var t,o;    

   var speed = 0;    

   var funny = function ()    

   {    

      t  clearInterval(t);    

   t = setInterval (function ()    

   {    

speed -= 200/11;    

if(speed-200){    

speed=0;    

oUl.appendChild (oUl.children[0]);    

t  clearInterval(t);    

t = null;    

o  clearTimeout(o);    

o=setTimeout(funny,1000);    

}    

   oUl.style.left = speed + "px";    

   }, 60);    

   }    

funny ();    

   }    

/script    

/head    

body    

div id="div2"    

div id="div1"    

ul id="ul1"    

liimg src="../../images/choose.png"    

/li    

liimg src="../../images/deck.png"    

/li    

liimg src="../../images/duel.png"    

/li    

liimg src="../../images/list.png"    

/li    

/ul    

/div    

/div    

/body    

/html

HTML关于轮播图代码

div id="demo"

    table border=0 align=center cellpadding=1 cellspacing=1 cellspace=0 style="margin:0; padding:0" 

tr

     td valign=top bgcolor=ffffff id=marquePic1

    table width='100%' border='0' cellspacing='0'

             tr

    td align=centera href='#'img src="images/zs001.png" width=300 height=180 border=0brbr/a/td

                    td align=centera href='#'img src="images/zs001.png" width=300 height=180 border=0brbr/a/td

/tr

            /table

/td

        td id=marquePic2 valign=top/td

    /tr

    /table

/div

script type="text/javascript"

var speed=20

marquePic2.innerHTML=marquePic1.innerHTML

function Marquee(){

if(demo.scrollLeft=marquePic1.scrollWidth){

demo.scrollLeft=0

}

else

{

demo.scrollLeft++

}

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

/script

.demo{ width:100%; height:auto; margin:auto; text-align:center;}

#demo{width:1180px; height:180px; overflow:hidden;clear:both; margin:auto}

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