<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>jQuery背景和banner图片一起切换全屏焦点图切换代码</title>
</head>
<body>
<style type="text/css">
/* reset */
*{margin:0padding:0list-style-type:none}
a{blr:expression(this.onFocus=this.blur())}/*去掉a标签的虚线框，避免出现奇怪的选中区域*/
:focus{outline:0}
label{cursor:pointer}
img{vertical-align:middle}
table{empty-cells:showborder-collapse:collapseborder-spacing:0}
h1{font-size:16px}h2,h3,h4{font-size:14px}h5,h6{font-size:12px}
abbr,acronym{border:0font-variant:normal}
address,caption,cite,code,dfn,em,th,var,optgroup{font-style:normalfont-weight:normal}
input,button,textarea,select,optgroup,option{font-family:inheritfont-size:inheritfont-style:inheritfont-weight:inherit}
input,button,textarea,select{*font-size:100%}
a,img{border:0}
a,a:visited{color:#5e5e5e text-decoration:none}
a:hover{color:#4183C4text-decoration:underline}
.clear{display:blockoverflow:hiddenclear:bothheight:0line-height:0font-size:0}
.clearfix:after{content:"."display:blockheight:0clear:bothvisibility:hidden}
.clearfix{display:inline-table}/* Hides from IE-mac \*/
*html .clearfix{height:1%}
.clearfix{display:block}/* End hide from IE-mac */
*+html .clearfix{min-height:1%}
body{font:12px/180% Arial,Lucida,Verdana,"宋体",Helvetica,sans-serifcolor:#333background:#fff}
/* shortcut */
.shortcut{height:32pxline-height:32pxfont-size:12pxbackground:#eeetext-transform:uppercasebox-shadow:1px 0px 2px rgba(0,0,0,0.2)border-bottom:1px solid #DDDDDD}
.shortcut h1{font-size:14pxfont-family:"微软雅黑","宋体"}
.shortcut a,.shortcut h1{padding:0px 10pxletter-spacing:1pxcolor:#333text-shadow:0px 1px 1px #fffdisplay:blockfloat:leftwidth:360pxheight:32pxoverflow:hidden}
.shortcut a:hover{background:#fff}
.shortcut span.right{float:rightdisplay:inline-blockwidth:468pxheight:15pxoverflow:hiddenmargin:8px 5px 0 0}
.shortcut .close{
background:url(/Public/images/close-demo.gif) no-repeat 0 0width:20pxheight:20pxline-height:99emoverflow:hiddendisplay:inline-blockmargin:6px 10px 0 10pxfloat:rightpadding:0
-webkit-transition:all .3s ease-out 0s
-moz-transition:all .3s ease-out 0s
-ms-transition:all .3s ease-out 0s
-o-transition:all .3s ease-out 0s
transition:all .3s ease-out 0s
}
.shortcut .close:hover{background:url(/Public/images/close-demo.gif) no-repeat 0 -20px}
.shortcut .close:active{background:url(/Public/images/close-demo.gif) no-repeat 0 -40px}
</style>
<div class="shortcut">
<span class="right">
<script type="text/javascript">
/*新468*15*/
var cpro_id = "u1425128"
</script>
<script type="text/javascript" src="http://cpro.baidustatic.com/cpro/ui/c.js"></script>
</span>
</div><!-- shortcut end -->
<script type="text/javascript" src="http://www.17sucai.com/static/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var iframeHeight = function () {
var _height = $(window).height() - 34
$('#content').height(_height)
}
window.onresize = iframeHeight
$(function () {
iframeHeight()
})
})
</script>
</body>
</html>
<div class="skin-box-bd clear-fix"><span><DIV class=J_TWidget data-widget-type="Tabs"
data-widget-config="{'effect': 'fade', 'circular': true ,'navCls':'toseise','activeTriggerCls':'odslos','contentCls':'piaofu'}">
<DIV style="HEIGHT: 550px" class=piaofu>
<DIV
style="Z-INDEX: 0PADDING-BOTTOM: 0pxMARGIN: 0pxPADDING-LEFT: 0pxWIDTH: 1920pxPADDING-RIGHT: 0pxTOP: 0pxPADDING-TOP: 0pxLEFT: -485px"
class=J_TWidget data-widget-type="Carousel"
data-widget-config="{ 'contentCls': 'slide-kun1362899830209content', 'triggerCls': 'slide-kun1362899830209triggers', 'navCls': 'slide-kun1362899830209triggers', 'triggerType': 'mouse', 'effect': 'scrollx', 'prevBtnCls':'prev', 'nextBtnCls':'next', 'steps': 1, 'autoplay': true, 'viewSize':[1920], 'circular': true }">
<DIV style="DISPLAY: none" class=J_TWidget data-widget-type="Popup"
data-widget-config="{'trigger':'.first-trigger2','align':{'node':'.first-trigger2','offset':[0,0],'points':['cc','cc']}}">
<DIV style="WIDTH: 90pxFLOAT: leftHEIGHT: 90px" class=prev><IMG
src="左点击"></DIV>
<DIV style="WIDTH: 90pxHEIGHT: 90pxMARGIN-LEFT: 950px" class=next><IMG
src="右点击"></DIV></DIV>
<DIV
style="PADDING-BOTTOM: 0pxMARGIN: 0pxPADDING-LEFT: 0pxWIDTH: 1920pxPADDING-RIGHT: 0pxHEIGHT: 570pxOVERFLOW: hiddenPADDING-TOP: 0px"
class=first-trigger2>
<UL
style="PADDING-BOTTOM: 0pxMARGIN: 0pxPADDING-LEFT: 0pxWIDTH: 1920pxPADDING-RIGHT: 0pxHEIGHT: 570pxPADDING-TOP: 0px"
class=slide-kun1362899830209content>
<LI
style="PADDING-BOTTOM: 0pxLIST-STYLE-TYPE: noneMARGIN: 0pxPADDING-LEFT: 0pxWIDTH: 1920pxPADDING-RIGHT: 0pxHEIGHT: 570pxPADDING-TOP: 0px"><A
style="PADDING-BOTTOM: 0pxMARGIN: 0pxPADDING-LEFT: 0pxPADDING-RIGHT: 0pxPADDING-TOP: 0px"
href="链接网站地址" target=_blank><IMG border=0
src="大图链接地址" width=1920
height=570></A></LI>
<LI
style="PADDING-BOTTOM: 0pxLIST-STYLE-TYPE: noneMARGIN: 0pxPADDING-LEFT: 0pxWIDTH: 1920pxPADDING-RIGHT: 0pxHEIGHT: 570pxPADDING-TOP: 0px"><A
style="PADDING-BOTTOM: 0pxMARGIN: 0pxPADDING-LEFT: 0pxPADDING-RIGHT: 0pxPADDING-TOP: 0px"
href="链接网站地址" target=_blank><IMG border=0
src="大图链接地址" width=1920
height=570></A></LI>
<LI
style="PADDING-BOTTOM: 0pxLIST-STYLE-TYPE: noneMARGIN: 0pxPADDING-LEFT: 0pxWIDTH: 1920pxPADDING-RIGHT: 0pxHEIGHT: 570pxPADDING-TOP: 0px"><A
style="PADDING-BOTTOM: 0pxMARGIN: 0pxPADDING-LEFT: 0pxPADDING-RIGHT: 0pxPADDING-TOP: 0px"
href="链接网站地址" target=_blank><IMG border=0
src="大图链接地址" width=1920
height=570></A></LI>
<LI
style="PADDING-BOTTOM: 0pxLIST-STYLE-TYPE: noneMARGIN: 0pxPADDING-LEFT: 0pxWIDTH: 1920pxPADDING-RIGHT: 0pxHEIGHT: 570pxPADDING-TOP: 0px"><A
style="PADDING-BOTTOM: 0pxMARGIN: 0pxPADDING-LEFT: 0pxPADDING-RIGHT: 0pxPADDING-TOP: 0px"
href="链接网站地址" target=_blank><IMG border=0
src="大图链接地址" width=1920
height=570></A></LI>
<LI
style="PADDING-BOTTOM: 0pxLIST-STYLE-TYPE: noneMARGIN: 0pxPADDING-LEFT: 0pxWIDTH: 1920pxPADDING-RIGHT: 0pxHEIGHT: 570pxPADDING-TOP: 0px"><A
style="PADDING-BOTTOM: 0pxMARGIN: 0pxPADDING-LEFT: 0pxPADDING-RIGHT: 0pxPADDING-TOP: 0px"
href="链接网站地址" target=_blank><IMG border=0
src="大图链接地址" width=1920
height=570></A></LI>
</UL></DIV>
</DIV></DIV></DIV>
</span>
</div>
我有代码，如果不是学网页的，我怕你看不懂！
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>jQuery图片轮播代码</title>
<style>
.flexslider {
margin: 0px auto 20px
position: relative
width: 100%
height: 482px
overflow: hidden
zoom: 1
}
.flexslider .slides li {
width: 100%
height: 100%
}
.flex-direction-nav a {
width: 70px
height: 70px
line-height: 99em
overflow: hidden
margin: -35px 0 0
display: block
background: url(images/ad_ctr.png) no-repeat
position: absolute
top: 50%
z-index: 10
cursor: pointer
opacity: 0
filter: alpha(opacity=0)
-webkit-transition: all .3s ease
border-radius: 35px
}
.flex-direction-nav .flex-next {
background-position: 0 -70px
right: 0
}
.flex-direction-nav .flex-prev {
left: 0
}
.flexslider:hover .flex-next {
opacity: 0.8
filter: alpha(opacity=25)
}
.flexslider:hover .flex-prev {
opacity: 0.8
filter: alpha(opacity=25)
}
.flexslider:hover .flex-next:hover,
.flexslider:hover .flex-prev:hover {
opacity: 1
filter: alpha(opacity=50)
}
.flex-control-nav {
width: 100%
position: absolute
bottom: 10px
text-align: center
}
.flex-control-nav li {
margin: 0 2px
display: inline-block
zoom: 1
*display: inline
}
.flex-control-paging li a {
background: url(images/dot.png) no-repeat 0 -16px
display: block
height: 16px
overflow: hidden
text-indent: -99em
width: 16px
cursor: pointer
}
.flex-control-paging li a.flex-active,
.flex-control-paging li.active a {
background-position: 0 0
}
.flexslider .slides a img {
width: 100%
height: 482px
display: block
}
</style>
</head>
<body>
<br/><br/><br/>
<!-- 轮播广告 -->
<div id="banner_tabs" class="flexslider">
<ul class="slides">
<li>
<a title="" target="_blank" href="#">
<img width="1920" height="482" alt="" style="background: url(images/banner1.jpg) no-repeat center" src="images/alpha.png">
</a>
</li>
<li>
<a title="" href="#">
<img width="1920" height="482" alt="" style="background: url(images/banner2.jpg) no-repeat center" src="images/alpha.png">
</a>
</li>
<li>
<a title="" href="#">
<img width="1920" height="482" alt="" style="background: url(images/banner3.jpg) no-repeat center" src="images/alpha.png">
</a>
</li>
</ul>
<ul class="flex-direction-nav">
<li><a class="flex-prev" href="javascript:">Previous</a></li>
<li><a class="flex-next" href="javascript:">Next</a></li>
</ul>
<ol id="bannerCtrl" class="flex-control-nav flex-control-paging">
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>2</a></li>
</ol>
</div>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/slider.js"></script>
<script type="text/javascript">
$(function() {
var bannerSlider = new Slider($('#banner_tabs'), {
time: 5000,
delay: 400,
event: 'hover',
auto: true,
mode: 'fade',
controller: $('#bannerCtrl'),
activeControllerCls: 'active'
})
$('#banner_tabs .flex-prev').click(function() {
bannerSlider.prev()
})
$('#banner_tabs .flex-next').click(function() {
bannerSlider.next()
})
})
</script>
</body>
</html>
