求首页js轮播图代码

2023-04-13 20:15:02JavaScript015

求首页js轮播图代码,第1张

<!DOCTYPE html>

<html>

<head>

<title>query焦点轮播图</title>

*{ margin: 0padding: 0text-decoration: none}

body { padding: 20px}

#container { width: 600pxheight: 400pxborder: 3px solid #333overflow: hiddenposition: relative}

#list { width: 4200pxheight: 400pxposition: absolutez-index: 1}

#list img { float: left}

#buttons { position: absoluteheight: 10pxwidth: 100pxz-index: 2bottom: 20pxleft: 250px}

#buttons span { cursor: pointerfloat: leftborder: 1px solid #fffwidth: 10pxheight: 10pxborder-radius: 50%background: #333margin-right: 5px}

#buttons .on { background: orangered}

.arrow { cursor: pointerdisplay: noneline-height: 39pxtext-align: centerfont-size: 36pxfont-weight: boldwidth: 40pxheight: 40px position: absolutez-index: 2top: 180pxbackground-color: RGBA(0,0,0,.3)color: #fff}

.arrow:hover { background-color: RGBA(0,0,0,.7)}

#container:hover .arrow { display: block}

#prev { left: 20px}

#next { right: 20px}

</style>

$(function () {

var container = $('#container')

var list = $('#list')

var buttons = $('#buttons span')

var prev = $('#prev')

var next = $('#next')

var index = 1

var len = 5

var interval = 3000

var timer

function animate (offset) {

var left = parseInt(list.css('left')) + offset

if (offset>0) {

offset = '+=' + offset

}

else {

offset = '-=' + Math.abs(offset)

}

list.animate({'left': offset}, 300, function () {

if(left >-200){

list.css('left', -600 * len)

}

if(left <(-600 * len)) {

list.css('left', -600)

}

})

}

function showButton() {

buttons.eq(index-1).addClass('on').siblings().removeClass('on')

}

function play() {

timer = setTimeout(function () {

next.trigger('click')

play()

}, interval)

}

function stop() {

clearTimeout(timer)

}

next.bind('click', function () {

if (list.is(':animated')) {

return

}

if (index == 5) {

index = 1

}

else {

index += 1

}

animate(-600)

showButton()

})

prev.bind('click', function () {

if (list.is(':animated')) {

return

}

if (index == 1) {

index = 5

}

else {

index -= 1

}

animate(600)

showButton()

})

buttons.each(function () {

$(this).bind('click', function () {

if (list.is(':animated') || $(this).attr('class')=='on') {

return

}

var myIndex = parseInt($(this).attr('index'))

var offset = -600 * (myIndex - index)

animate(offset)

index = myIndex

showButton()

})

container.hover(stop, play)//鼠标移入停止轮播

play()

})

</script>

</head>

<body>

</div>

</div>

</div>

</body>

</html>

可以直接复制用，记得引入JQ库！

HTML中图片轮播代码如下：

<!DOCTYPE html>

<html>

<head><title>图片轮播代码</title>

</head>

body{max-width: 640pxmargin: 0 auto}

#lunbo ul li{width:100%list-style: nonewidth:640px height:250pxbackground-color: #f00text-align: center}

#lunbo ul li:not(:first-child){display: none}</style><body><div id="lunbo">

<ul>

</ul></div><script type="text/javascript">

//因为使用了document，所以js需要放在需要执行的代码下面生效才能生效

var li=document.getElementById('lunbo').getElementsByTagName("li")

var num=0

var len=li.length

setInterval(function(){

li[num].style.display="none"

num=++num==len?0:num

li[num].style.display="inline-block"

},3000)//切换时间

</script>

</body>

</html>

<!DOCTYPE HTML>

<html>

<head>

<title>五图三屏轮播js特效代码</title>

var theme_list_open = false

$(document).ready(function () {

function fixHeight() {

var headerHeight = $("#switcher").height()

$("#iframe").attr("height", $(window).height()-84 + "px")

}

$(window).resize(function () {

fixHeight()

}).resize()

//响应式预览

$('.icon-monitor').addClass('active')

$(".icon-mobile-3").click(function () {

$("#by").css("overflow-y", "auto")

$('#iframe-wrap').removeClass().addClass('mobile-width-3')

$('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active')

$(this).addClass('active')

return false

})

$(".icon-mobile-2").click(function () {

$("#by").css("overflow-y", "auto")

$('#iframe-wrap').removeClass().addClass('mobile-width-2')

$('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active')

$(this).addClass('active')

return false

})

$(".icon-mobile-1").click(function () {

$("#by").css("overflow-y", "auto")

$('#iframe-wrap').removeClass().addClass('mobile-width')

$('.icon-tablet,.icon-mobile,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active')

$(this).addClass('active')

return false

})

$(".icon-tablet").click(function () {

$("#by").css("overflow-y", "auto")

$('#iframe-wrap').removeClass().addClass('tablet-width')

$('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active')

$(this).addClass('active')

return false

})

$(".icon-monitor").click(function () {

$("#by").css("overflow-y", "hidden")

$('#iframe-wrap').removeClass().addClass('full-width')

$('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active')

$(this).addClass('active')

return false

})

</script>

function Responsive($a) {

if ($a == true) $("#Device").css("opacity", "100")

if ($a == false) $("#Device").css("opacity", "0")

$('#iframe-wrap').removeClass().addClass('full-width')

$('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active')

$(this).addClass('active')

return false

}

</script>

</head>

<ul>

</div>

</ul>

<a href="/ppt/" class="l726active" target="_blank">ppt模板</a>

<a href="/psd/" class="l713active" target="_blank">PSD素材</a>

</div>

</div>

</div>

<a href="/jiaoben/160419378420.htm" title="点击下载" class="down" target="_blank">五图三屏轮播js特效代码</a>

</p>

</p>

</div>

var description = '五图三屏轮播js特效代码: 五图三屏轮播js特效代码是一款ZHIME织蜜内衣丝袜五图三屏图片切换特效。'

var sendT = {

getHeader: function () {

var g_title = description

var re = /<[^<>]*?font[^<>]*?>/gi

g_title = g_title.replace(re, "")

return g_title

getFirstImgSrc: function () {

var allPageTags = document.getElementsByTagName("div")

for (var i = 0i <allPageTags.lengthi++) {

if (allPageTags[i].className == 'downtext') {

if (allPageTags[i].getElementsByTagName("img")[0] &&allPageTags[i].getElementsByTagName("img")[0].width >200) {

return allPageTags[i].getElementsByTagName("img")[0].src

}

else {

return null

}

getContent: function () {

var allPageTagss = document.getElementsByTagName("div")

for (var i = 0i <allPageTagss.lengthi++) {

if (allPageTagss[i].className == 'downtext') {

return allPageTagss[i].innerHTML

}

document.getElementById("fxwb").onclick = function () {

(function (s, d, e, r, l, p, t, z, c) {

var f = 'http://service.weibo.com/share/share.php?appkey=872996044&', u = z || d.location, p = ['url=', e(u), '&title=', e(sendT.getHeader()), '&source=', e(r), '&sourceUrl=', e(l), '&content=', c || 'gb2312', '&pic=', e(p || '')].join('')

function a() {

if (!window.open([f, p].join(''), 'mb', ['toolbar=0,status=0,resizable=1,width=440,height=430,left=', (s.width - 440) / 2, ',top=', (s.height - 430) / 2].join(''))) u.href = [f, p].join('')

}

if (/Firefox/.test(navigator.userAgent)) setTimeout(a, 0)else a()

})(screen, document, encodeURIComponent, 'CHINAZ', 'http://sc.chinaz.com/', sendT.getFirstImgSrc(), null, null, null)

}

function posttoWb() {

var _tt = description

var _t = encodeURI(_tt.replace(/\s+$/, ''))

var _url = encodeURI(window.location)

var _appkey = encodeURI("258efff116d2466da9b7513cbae7de0b")

var _site = encodeURI('sc.chinaz.com')

var _pic = sendT.getFirstImgSrc()

var _u = 'http://v.t.qq.com/share/share.php?title=' + _t + '&url=' + _url + '&appkey=' + _appkey + '&site=' + _site + '&pic=' + _pic