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

window.open(_u, '转播到腾讯微博', 'width=700, height=580, top=320, left=180, toolbar=no, menubar=no, scrollbars=no, location=yes, resizable=no, status=no')

}

</script>

</div>

</body>

</html>

自己修改一下就可以了

1、考虑高宽比

对于绝大多数的网站而言，图片展示的位置都很相近，大同小异。而设计师的任务，是要确保网站随着屏幕和设备变化的时候，图片的展示不会在页面布局的伸缩变化过程中变得奇怪和失真。

2、尺寸和比例的一致性

响应式设计就不能不说断点，为了照顾不同的屏幕，我们需要将图片裁剪成不同比例不同尺寸的大小，而这也直接影响着整个设计与开发的设计流程。

3、使用轮播图或者图库

轮播图控件和图库控件是网站中最常见的图片载体，并且也可以更加自如的管理图片，尤其是当你使用了那些比较著名或者适配范围比较广的第三方控件的时候，控制图片元素的粗活重活基本上都会被这些控件接手过去。

4、只使用高素质的图片

虽然这个道理不言自明，但是它仍然必须反复提醒，如果你没有高素质的图片，那么还不如干脆不要用图片得了。

5、尽量避免使用图片说明(Captions)

虽然图片说明能够让你的图片的信息更加丰富，但是它会非常直接地影响到网页的运作，尽量避免使用它们，如果实在是需要，尽量用其他的方式来呈现。

6、创建新图像格式

针对响应式图片创建一种新的图像格式，该新的格式包含了几种不同大小版本的图片，比如100k的文件里有75k的版本、20k的版本和5k版本的图像。

7、图片和视频混用要小心

如果网站中同时存在图片和视频类的多媒体，用户和设计者应该都是能够接受的，甚至许多用户已经习惯了这样的设计。

8、削减不必要的元素

虽然轮播图和图库控件非常好用，但是许多设计师常常会往其中添加许多垃圾的内容，最常见的就是塞入一堆导航箭头、按钮、文本甚至行为召唤按钮，这样的例子不胜枚举。

9、创建一个新的（html）元素

图片响应式化的第一步是让它自适应，移除高、宽属性然后设置max-width属性为100%。然而这并不能从根本上解决问题。主要的问题在于，那样做会不得不创建一张大尺寸高分辨率的图像，很明显这种图片并不利于移动终端设备的接收。

简介

slick 是一个基于 jQuery 的响应触摸式幻灯片插件，支持IE8+，Chrome, Firefox, and Safari，具有以下特点：

支持响应式

浏览器支持 CSS3 时，则使用 CSS3 过度/动画

支持移动设备滑动

支持桌面浏览器鼠标拖动

支持循环

支持左右控制

支持动态添加、删除、过滤

支持自动播放、圆点、箭头、回调等等

兼容

浏览器兼容：兼容 IE7+ 及其他主流浏览器，若要兼容 IE7，需修改 CSS（slick.css）。

jQuery兼容：兼容 1.7 及以上版本。

使用方法

1、引入文件

注意：需jQuery 1.7 +

2、HTML

</div>

3、JavaScript

$(function(){

$('.slick').slick({

dots: true

})

参数

参数类型默认值说明

accessibility布尔值true启用Tab键和箭头键导航

autoplay布尔值false自动播放

autoplaySpeed整数3000自动播放间隔

centerMode布尔值false中心模式

centerPadding字符串’50px’中心模式左右内边距

cssEase字符串‘ease’CSS3 动画

customPagingfunctionn/a自定义分页

dots布尔值false指示点

draggable布尔值true启用桌面拖动

easing字符串‘linear’animate() fallback easing

fade布尔值false淡入淡出

arrows布尔值true左右箭头

infinite布尔值true循环播放

lazyLoad字符串‘ondemand’延迟加载，可选 ondemand 和 progressive

onBeforeChange(this, index)methodnull开始切换前的回调函数

onAfterChange(this, index)methodnull切换后的回调函数

onInit(this)methodnull第一次初始化后的回调函数

onReInit(this)methodnull再次初始化后的回调函数

pauseOnHover布尔值true鼠标悬停暂停自动播放

responsiveobjectnull断点触发设置

slide字符串‘div’滑动元素查询

slidesToShow整数1幻灯片每屏显示个数

slidesToScroll整数1幻灯片每次滑动个数

speed整数300滑动时间

swipe布尔值true移动设备滑动事件

touchMove布尔值true触摸滑动

touchThreshold整数5滑动切换阈值，即滑动多少像素后切换

useCSS布尔值true使用 CSS3 过度

vertical布尔值false垂直方向

方法

方法Argument说明

slick()options : object初始化 slick

unslick() 销毁 slick

slickNext() 切换下一张

slickPrev() 切换上一张

slickPause() 暂停自动播放

slickPlay() 开始自动播放

slickGoTo()index : int切换到第 x 张

slickCurrentSlide() 返回当前幻灯片索引

slickAdd()element : html or DOM object, index: int, addBefore: boolAdd a slide. If an index is provided, will add at that index, or before if addBefore is set. If no index is provided, add to the end or to the beginning if addBefore is set. Accepts HTML String

slideRemove()index: int, removeBefore: boolRemove slide by index. If removeBefore is set true, remove slide preceding index, or the first slide if no index is specified. If removeBefore is set to false, remove the slide following index, or the last slide if no index is set.

slickFilter()filter : selector or functionFilters slides using jQuery .filter syntax

slickUnfilter() Removes applied filter

slickSetOption(option,value,refresh)option : string(option name), value : depends on option, refresh : 布尔值Sets an option live. Set refresh to true if it is an option that changes the display

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/6172925.html

HTML轮播图片代码，带解释

发表评论

评论列表（0条）