codecamp

jQuery超酷旋转轮播


查看演示
下载地址:http://www.jq22.com/jquery-info9676
ie兼容10
插件描述:jQuery旋转类型的轮播图

原理

  • 先设想一个立方体,但是观看本轮播,发现不需要左右两个面,所以去掉左右两个面,留下前后上下4个面。用4个div表示。因为整体不涉及到左右两个面,所以没有左右面。

  • 每一张图片都可以切割成x个立方体,每一个立方体用一个li表示,然后这x个li的4个div的背景图片动态设置。

  • 同一个li里面所有div背景图片相同,通过background-position和js动态设置偏移量。可以控制整个图片的背景不乱。

  • var x=300;//此值代表旋转分成的块数,可以更改,越大效果越明显,分成的越多。建议不超过999.过大会出现卡顿现象。    

大于一定图片可能不清晰。






鼠标经过不同标签触发不同背景
图片全屏自适应轮播
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }