js电商banner焦点图导航布局代码（电商banner图设计）

今天给各位分享js电商banner焦点图导航布局代码的知识，其中也会对电商banner图设计进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、js代码实现banner图片轮播
• 2、js添加代码段
• 3、带缩略图多屏轮播的jQuery左右滚动banner焦点图代码，到了第十一张小图片就不自动滚下去了？
• 4、js 的banner特效
• 5、js banner轮播 $("#focus .btn span").stop(true,false) 这个stop是什么意思呢？
• 6、dreamweaver8做网页，焦点图代码怎么放

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添加代码段

function banner_start(){

var tpc=$(".bannerimg").length;//图片个数？

var tbwidth=40*tpc;

$("#tbbox").css("width".tbwidth+"px") ;//根据图片个数来给外面的tbbox赋值宽度保证banner横向排列

for(i=0;i=tpc;i++){

$("#tbbox").append('div class="tb"/div');//这里应该是根据焦点图个数给焦点图插入控制的 切换点，就是一般焦点图的那个小圆点按钮

}

$(".bannerimg").eq(0).css("z-index",5);//让第一张图置顶

}

banner_start()；//初次执行

问题是您有开始的时候执行banner_start()这个函数吗？还有样式是否有问题呢

带缩略图多屏轮播的jQuery左右滚动banner焦点图代码，到了第十一张小图片就不自动滚下去了？

肯定的 你要那种连续滚动的 要在小图前后各家一张图片才可以 最前面加最后一张最后面加最前面 然后判断

js 的banner特效

html

head

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

titleslider幻灯片 - 纯JS简化版/title

style type="text/css"

*{margin: 0; padding: 0;}

#sliderbox { width: 500; height:313px;position: relative; overflow: hidden;margin: 20px;}

#slider {list-style: none; margin: 0; padding: 0;}

#slider li {float:left; margin: 0; padding: 0;}

#slidertab {position: absolute; right: 10px; bottom:10px; width: 80px; height: 20px; list-style: none;}

#slidertab li {float: left; width: 20px; height: 20px; margin: 2px; background: #eee;text-align: center; line-height: 20px;font-size: 12px;}

#slidertab li.sliderclass {background: #f00;}

/style

script type="text/javascript"

window.onload = function() {

var sliderbox = document.getElementById('sliderbox');

var slider = document.getElementById('slider');

var sliderli = slider.getElementsByTagName('li');

var slidertab = document.getElementById('slidertab');

var slidertabli = slidertab.getElementsByTagName('li');

var inow = 0;

sliderbox.onmouseover = function() {

clearInterval(timer);

}

sliderbox.onmouseout =function() {

timer = setInterval(autoplay, 1000);

}

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

slidertabli[i].index = i;

slidertabli[i].onclick = function() {

clearInterval(timer);

for(var a=0; aslidertabli.length; a++) {

slidertabli[a].className = "";

sliderli[a].style.display = "none";

}

this.className = "sliderclass";

sliderli[this.index].style.display = "block";

inow = this.index;

}

}

function autoplay() {

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

sliderli[i].style.display = 'none';

slidertabli[i].className = "";

}

sliderli[inow].style.display = 'block';

slidertabli[inow].className = "sliderclass";

inow = inow==sliderli.length-1 ? 0 : inow+1;

}

timer = setInterval(autoplay, 5000);

}

/script

/head

body

div id="sliderbox"

ul id="slider"

liimg src="tab1.jpg" //li

liimg src="tab2.jpg" //li

liimg src="tab3.jpg" //li

/ul

ul id="slidertab"

li1/li

li2/li

li3/li

/ul

/div

/body

/html

js banner轮播 $("#focus .btn span").stop(true,false) 这个stop是什么意思呢？

stop停止动画队列具体参数查下jquery手册,removeClass移除某个class属性的值eq是查找$("#focus .btn span")

的索引是index的元素让他停止动画队列再给他加上class为on的值

具体的意思就是先停止所有$("#focus .btn span")的动画让他们的class全部不为on

再让$("#focus .btn span")

的索引等于index的元素加上class为on的值

dreamweaver8做网页，焦点图代码怎么放

1.打开软件dreamweaver8写如下代码，如图：

调用CSS样式：link rel="stylesheet" type="text/css" href="css/style.css" /

调用JS插件代码：script type="text/javascript" src="js/jquery.js"/script

!--效果html开始--

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

script type="text/javascript"

$(function(){

var aPage = $('#main .page a'); //分页按钮

var aImg = $('#main .box img'); //图像集合

var iSize = aImg.size(); //图像个数

var index = 0; //切换索引

var t;

$('#btnLeft').click(function(){ //左边按钮点击

index--;

if(index0){

index=iSize-1

}

change(index)

})

$('#btnRight').click(function(){    //右边按钮点击

index++;

if(indexiSize-1){

index=0

}

change(index)

})

//分页按钮点击

aPage.click(function(){

index = $(this).index();

change(index)

});

//切换过程

function change(index){

aPage.removeClass('active');

aPage.eq(index).addClass('active');

aImg.stop();

//隐藏除了当前元素，所以图像

aImg.eq(index).siblings().animate({

opacity:0

},1000)

//显示当前图像

aImg.eq(index).animate({

opacity:1

},1000)

}

function autoshow() {

index=index+1;

if(index=iSize-1){

  change(index);

}else{

index=0;

change(index);

}

}

int=setInterval(autoshow,3000);

function clearInt() {

$('#btnLeft,#btnRight,.page a').mouseover(function() {

clearInterval(int);

})

}

function setInt() {

$('#btnLeft,#btnRight,.page a').mouseout(function() {

int=setInterval(autoshow,3000);

})

}

clearInt();

setInt();

})

/script

div id="main"

a class="btnLeft" id="btnLeft" href="javascript:void(0);"/a

a class="btnRight" id="btnRight" href="javascript:void(0);"/a

div class="box"

img style="opacity:1;filter:alpha(opacity=100);" src="images/图片名称1.jpg" /

img src="images/图片名称2.jpg" / img src="images/图片名称3.jpg" / /div

div class="page"

a class="active" href="javascript:void(0);"1/a

a href="javascript:void(0);"2/a a href="javascript:void(0);"3/a

/div

/div

!--效果html结束--

2.最后查看聚焦效果图，如图：

js电商banner焦点图导航布局代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于电商banner图设计、js电商banner焦点图导航布局代码的信息别忘了在本站进行查找喔。