HTML5轮播效果……

2023-02-19 07:59:02html-css025

HTML5轮播效果……,第1张

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>jQuery背景和banner图片一起切换全屏焦点图切换代码</title>

</head>

<body>

/* 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>

/*新468*15*/

var cpro_id = "u1425128"

</script>

</span>

</div>

$(document).ready(function(){

var iframeHeight = function () {

var _height = $(window).height() - 34

$('#content').height(_height)

}

window.onresize = iframeHeight

$(function () {

iframeHeight()

})

</script>

</body>

</html>

<span><DIV class=J_TWidget data-widget-type="Tabs"

data-widget-config="{'effect': 'fade', 'circular': true ,'navCls':'toseise','activeTriggerCls':'odslos','contentCls':'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