HTML5轮播效果……

2023-03-04 18:13:02html-css030

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>

我有代码，如果不是学网页的，我怕你看不懂！

<!doctype html>

<html>

<head>

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

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

</ul>

<li><a class="flex-prev" href="javascript:">Previous</a></li>

</ul>

</ol>

</div>

$(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>

<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