banner图片切换焦点图代码（banner和焦点图）

今天给各位分享banner图片切换焦点图代码的知识，其中也会对banner和焦点图进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、banner模块实现了焦点图切换效果为什么不显示
• 2、js代码实现banner图片轮播
• 3、网页在淘宝怎么做出鼠标移动切换图片的效果？
• 4、求简单的图片切换代码
• 5、带缩略图多屏轮播的jQuery左右滚动banner焦点图代码，到了第十一张小图片就不自动滚下去了？

banner模块实现了焦点图切换效果为什么不显示

banner模块实现了焦点图切换效果不显示原因：

1、感叹号问题，测试正常显示，考虑不同版本对代码的严格性。

2、ul、li限定了大小，值显示设置大小的范围。

3、top、left、right、bottom设置问题，在调整。

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

});

希望对你有帮助！

网页在淘宝怎么做出鼠标移动切换图片的效果？

切换图片效果：html代码：

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

html xmlns=""

head

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

title布丁移动官网jQuery焦点图/title

link href="styles/zzsc.css" rel="stylesheet" type="text/css" /

/head

body

br

div id="focus"

div id="slides"

style type="text/css"

ul.pagination{width:55px !important;}

/style

div class="slides_container"

a href="i_weiche.html" title="微车" rel="external"

img src="images/focus/weiche_banner.png" alt="微车" //a

a href="i_ticket.html" title="布丁电影票" rel="external"

img src="images/focus/ticket_banner.png" alt="布丁电影票" //a

a href="i_coupon.html" title="布丁优惠券" rel="external"

img src="images/focus/coupon.jpg" alt="布丁优惠券" //a

/div

/div

/div

script src="scripts/jquery.min_v1.0.js" type="text/javascript"/script

script src="scripts/slides.min.jquery_v1.0.js" type="text/javascript"/script

script type="text/javascript"

$(function(){

$('#slides').slides({

preload: true,

preloadImage: 'images/loading.gif',

play: 5000,

pause: 2500,

hoverPause: true,

fadeSpeed: 350,

effect: 'fade'

});

});

/script

div style="text-align:center;clear:both"

/div

/body

/html

css代码：

@charset "utf-8";

/*通用样式*/

html, body, div, img, ul, ol, li, dl, dt, dd, a, span, h1, h2, h3, h4, h5, h6, p, span {

margin: 0;

padding: 0;

}

*html{

background-image: url(about:blank);

background-attachment: fixed;

}

body {

background: url(../images/body_bg.jpg);

font: 14px "微软雅黑", "宋体", "黑体";

}

a {

text-decoration: none;

}

a:hover {

text-decoration: underline;

}

img {

border: 0 none!important;

}

ul, li {

list-style: none;

}

#wrap {

background: url(../images/wrap_bg.jpg);

border-bottom: 1px solid #c3c3c3;

box-shadow: 0 3px 20px #d2d2d2;

position: relative;

width: 100%;

display: table;

}

/*焦点图切换*/

#focus {

width: 1000px;

height: 466px;

margin: 0 auto;

background: url(../images/loading.png) no-repeat 48% 37%;

}

#slides {

position: absolute;

z-index: 1;

}

.slides_container {

width: 1000px;

overflow: hidden;

position: relative;

display: none;

}

.slides_container a {

width: 1000px;

height: 466px;

display: block;

}

.pagination {

position: absolute;

bottom: -8px;

z-index: 999;

padding: 0 10px;

padding-top: 3px;

margin-left: 47%;

background: rgba(255,255,255,0.5);

box-shadow: 0 0 10px #ccc inset;

border-radius: 10px;

width: 72px;

height: 14px;

}

.pagination li {

float: left;

margin: 0 4px;

}

.pagination li a {

display: block;

width: 10px;

height: 0;

padding-top: 10px;

background: url(../images/pagination_1.png) 0 0;

float: left;

overflow: hidden;

}

.pagination li.current a {

background-position: 0 -10px;

_background-position: 0 -9px;

}

/*内容*/

#column_ab_a {

width: 100%;

overflow: hidden;

float: left;

padding: 60px 30px 20px;

}

#column_ab_b {

width: 300px;

overflow: hidden;

float: right;

}

/*#column_ab_a*/

#column_ab_a div {

width: 250px;

float: left;

overflow: hidden;

color: #a1a1a1;

margin: 0 30px;

display: inline;

}

#column_ab_a div h2 {

font-size: 16px;

color: #4d4d4d;

padding-left: 50px;

height: 40px;

}

#column_ab_a div#coupon h2 {

background: url(../images/coupon_h2.jpg) no-repeat left center;

}

#column_ab_a div#ticket h2 {

background: url(../images/ticket_h2.jpg) no-repeat left center;

}

#column_ab_a div h2 span {

font-size: 14px;

font-weight: normal;

color: #a1a1a1;

display: block;

background: none;

}

#column_ab_a div p {

font-size: 14px;

margin-top: 20px;

margin-bottom: 20px;

line-height: 24px;

text-indent: 2em;

}

#column_ab_a div p a {

color: #ee4017;

background: url(../images/more.png) no-repeat right center;

padding-right: 10px;

margin-left: 10px;

}

#column_ab_a div p a:hover {

text-decoration: underline;

}

#column_ab_a div h3,

#column_ab_a div h4 {

text-align: right;

}

#column_ab_a div h3 {

margin-top: 5px;

}

/*#column_ab_b*/

#column_ab_b div {

width: 219px;

overflow: hidden;

color: #a1a1a1;

border-left: 1px solid #cecece;

margin-top: 60px;

padding: 0 40px;

}

#column_ab_b div h2 {

font-size: 16px;

color: #4d4d4d;

background: url(../images/system_h2.jpg) no-repeat left center;

padding-left: 50px;

height: 40px;

}

#column_ab_b div h2 span {

font-size: 14px;

font-weight: normal;

color: #a1a1a1;

display: block;

background: none;

}

#column_ab_b div dl {

margin-top: 20px;

line-height: 24px;

}

#column_ab_b div dt {

color: #4d4d4d;

font-weight: bold;

background: url(../images/dot1.png) no-repeat left center;

padding-left: 15px;

}

#column_ab_b div dd {

padding-left: 15px;

margin-bottom: 10px;

}

#column_ab_b div a {

display: block;

width: 161px;

height: 44px;

background: url(../images/tosystem.jpg);

text-indent: -9999px;

margin: 20px auto;

}

#sbuding {

display: block;

width: 161px;

height: 44px;

background: url(../images/tosystem.jpg);

text-indent: -9999px;

margin-left:60px;

}

切换图片无论在淘宝网页上还是一般的网站上都是非常的常见的一个效果。实现的方法也有多种。只要灵活运用就行。不难。

求简单的图片切换代码

第一种：

把如下代码加入body区域中

body onclick=Clicked()

SCRIPT

!--

transeffect = 0;

theeffects = new Array(24);

theeffects[0] = “盒状收缩“;

theeffects[1] = “盒状向外“;

theeffects[2] = “圆形收缩“;

theeffects[3] = “圆形向内“;

theeffects[4] = “从下向上“;

theeffects[5] = “从上向下“;

theeffects[6] = “从左向右“;

theeffects[7] = “从右向左“;

theeffects[8] = “百页窗形向右“;

theeffects[9] = “百页窗形向下“;

theeffects[10] = “棋盘形交叉向右“;

theeffects[11] = “棋盘形交叉向下“;

theeffects[12] = “随意溶解形“;

theeffects[13] = “左右向内“;

theeffects[14] = “左右向外“;

theeffects[15] = “上下向内“;

theeffects[16] = “上下向外“;

theeffects[17] = “条纹状向左下“;

theeffects[18] = “条纹状向左上“;

theeffects[19] = “条纹状向右下“;

theeffects[20] = “条纹状向右上“;

theeffects[21] = “溶解水平状“;

theeffects[22] = “溶解上下状“;

theeffects[23] = “随着溶解“;

current_image = “image1“;

function Clicked() {

var the_image, the_other;

text2.style.visiblity=“hidden“;

if (image1.style.visibility==“inherit“) {

the_image = image2;

the_other = image1;

}

else {

the_image = image1;

the_other = image2;

}

the_other.style.visibility=“hidden“;

the_image.filters.item(0).Apply();

the_image.filters.item(0).Transition = transeffect;

the_image.filters.item(0).Play(2.0);

the_image.style.visibility=“inherit“;

text2.innerText=theeffects[transeffect];

transeffect++;

if (transeffect == 24)

transeffect = 0;

text2.style.visibility=“visible“;

}

//--

/SCRIPT

DIV id=image

DIV id=text1/DIVIMG id=image1

src=“Upfiles/200422684962.gif“

style=“FILTER: revealTrans(Duration=3.0,Transition=1); VISIBILITY: hidden“ IMG id=image2 src=“Upfiles/200422684962.gif“

style=“FILTER: revealTrans(Duration=3.0,Transition=1); VISIBILITY: hidden“ /DIV

DIV id=text2/DIV

第二步：把body中的内容改为：

body bgcolor=“#fef4d9“ onclick=Clicked()

over feboy

第二种：

第一步、把下面这段代码插入到页面的head与/head之间：

script language=javascript

isns = navigator.appName == "Netscape";

function ztstr(id,picurl,linkurl)

{

this.id=id

this.picurl=picurl

this.linkurl=linkurl

}

zhuanti=new Array()

imgcount=1;

frequency=10*1000;//30秒

//在这里修改图片的路径和链接

zhuanti[1]=new ztstr('1','','')

zhuanti[2]=new ztstr('2','','')

zhuanti[3]=new ztstr('3','','')

zhuanti[4]=new ztstr('4','','')

imgcount=zhuanti.length-1

for(i=1;i=imgcount;i++)

{

eval_r("img"+i+"=new Image()")

eval_r("img"+i+".src=zhuanti["+i+"].picurl")

}

nn=1

var rand1 = 0;

var useRand = 0;

function swapPic() {

var imgnum = zhuanti.length - 1;

do {

var randnum = Math.random();

rand1 = Math.round((imgnum - 1) * randnum) + 1;

} while (rand1 == useRand);

useRand = rand1;

// alert(useRand);

nn=useRand;

change_img();

}

function change_img()

{

eval_r('document.pic.src=img'+nn+'.src');

nn++;

if(nnimgcount) nn=1

if(!isns)

{

pic.filters.item(0).apply()

pic.style.visibility='visible'

pic.filters.item(0).play()

setTimeout("pic.style.visibility='hidden'",frequency);

}

else

document.pic.visibility='visible'

tt=setTimeout('change_img()',frequency)

}

function pictarget()

{

tt=nn-1

if(tt1) tt=imgcount

cururl=zhuanti[tt].linkurl

window.open(cururl);

}

function ini()

{

if(!isns)

{

spacewidth=Math.round((divmask.offsetWidth-770)/2)

dmwidth=770+spacewidth

dmheight=divmask.offsetHeight

totalstep=50

timeout=50

dmstepw=Math.round(770/totalstep)

dmsteph=Math.round(dmheight/totalstep)

setTimeout('hidimg()',3000)

}

else swapPic()

}

function hidimg()

{

dmwidth-=dmstepw

dmheight-=dmsteph

eval_r('divmask.style.clip="rect(0,'+dmwidth+','+dmheight+',0)"')

hdrun=setTimeout('hidimg()',timeout)

if(dmwidth=spacewidthdmheight=0)

{

divmask.style.visibility='hidden'

clearTimeout(hdrun)

swapPic()

}

}

/script

第二步、调用定义好的javascript函数，在body里加上以下代码：

body onload=swapPic()

第三步、在页面中插入图片和链接：

a href=javascript :void(null) onclick='javascript :pictarget();return false;'img src="" width=468 height=60 border=0 name=pic style="visibility:hidden;filter:revealtrans(duration=2.0,transition=12)"/a

好，到这里就大功告成了。另外，试试改变transition的数值，可以得到不同的转换效果哟~~

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

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

关于banner图片切换焦点图代码和banner和焦点图的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。