以下是 腾讯qq娱乐频道焦点图轮播滚动切换特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>腾讯qq娱乐频道焦点图</title>
<link href="css/zzsc.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="js/zzsc.js"></script>
</head>
<body>
<div class="slider-container" id="slide" style="width: 100%; height: 480px;">
<div id="_slide" class="slider-wrap">
<ul id="slide_list">
<li bosszone="Jdt">
<a href="#" class="pic">
<img src="images/zzsc1.jpg" width="830" height="350" border="0" />
<p class="st_ty">《北爱》陈思诚激吻佟丽娅 公主抱不慎走光</p>
</a>
<div class="slide_Bg"></div>
</li>
<li bosszone="Jdt">
<a href="#" class="pic">
<img src="images/zzsc2.jpg" width="830" height="350" border="0" />
<p class="st_ty">林志玲捞金鱼尾纹再现 遭男子摸背熊抱尴尬挤笑</p>
</a>
<div class="slide_Bg"></div>
</li>
<li bosszone="Jdt">
<a href="#" class="pic">
<img src="images/zzsc3.jpg" width="830" height="350" border="0" />
<p class="st_ty">芙蓉姐姐大摆S型秀瘦腰长腿 调戏记者：想追求我？</p>
</a>
<div class="slide_Bg"></div>
</li>
<li bosszone="Jdt">
<a href="#" title="" class="pic">
<img src="images/zzsc4.jpg" width="830" height="350" border="0" />
<p class="st_ty">柳岩：消费我 你们在我胸前也看不出一朵花来</p>
</a>
<div class="slide_Bg"></div>
</li>
<li>
<dl>
<dd id="ad1" bosszone="jdtAd1">
<a href="#" class="pic">
<img src="images/89854294.jpg" width="363" height="350" border="0" />
<p class="st_ty">萌妹教你白全身</p>
</a>
</dd>
<dd id="ad2" bosszone="jdtAd2">
<a href="#" class="pic">
<img src="images/90233983.jpg" width="156" height="350" border="0" />
<p class="st_ty">学我按3穴位变大胸</p>
</a>
</dd>
<dd id="ad3" bosszone="jdtAd3">
<a href="#" class="pic">
<img src="images/89854500.jpg" width="156" height="350" border="0" />
<p class="st_ty">男人更爱“坏”女人</p>
</a>
</dd>
<dd id="ad4" bosszone="jdtAd4">
<a href="#" class="pic">
<img src="images/89858252.jpg" width="156" height="350" border="0" />
<p class="st_ty">女神自曝美胸手法</p>
</a>
</dd>
</dl>
<div class="slide_Bg"></div>
</li>
</ul>
</div>
<a href="javascript:void(0);" class="slider-btn slider-btn-l" id="sliderL" bosszone="photoPre"></a>
<a href="javascript:void(0);" class="slider-btn slider-btn-r" id="sliderR" bosszone="photoNext"></a>
<ul id="focus_dot">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<script>
var $ = function (s) {
return document.getElementById(s);
}
//参数配置
slide.init({
//width: 100%, // 焦点图宽度（非必须，默认值自适应）
height: 390, // 焦点图高度（非必须，默认值自适应）
auto: true, // 是否自动切换（非必须，默认值 false）
interval: 5000, // 切换间隔时间（非必须，默认值 3000，当 auto 为 true 时有效）
targetId: 'slide', // html 对应的焦点图 ID（必须）
data: $('_slide').getElementsByTagName('li').length// 焦点图数据（必须）
});
</script>
<script>window.onerror = function () { return true; };</script>
</body>
</html>JS代码(zzsc.js):
/*������ͼ����*/
var slide = (function(){
var quadEaseOut;
var doc = document;
var $ = function(s){
return document.getElementById(s);
}
/** ��ȡ����ֵ�������� @param{
Element}
current ��ǰԪ�� @param{
Object}
obj Ԫ�ؼ���**/
var getIndex = function(current,obj){
for (var i=0;
i<obj.length;
i++){
if (obj[i] == current){
return i;
}
}
}
;
/** @param{
Element}
el Ŀ��Ԫ��**/
var siblings = function(el){
var r = [],n = el.parentNode.firstChild;
for (;
n;
n = n.nextSibling ){
if ( n.nodeType === 1 && n !== el ){
r.push( n );
}
}
return r;
}
;
/** ���� Slide ��� @param{
Element}
el Slide Ԫ�� @param{
Number}
width Slide ��� @param{
Number}
height Slide �߶�**/
var setSlideWH = function(el,width,height){
var styleW,styleH;
if (width == '100%'){
// ����Ӧ���styleW = '100%';
}
else{
// ����styleW = width + 'px';
}
if (height == '100%'){
// ����Ӧ�߶�styleH = '100%';
}
else{
// ����styleH = height + 'px';
}
el.style.width = styleW;
el.style.height = styleH;
}
;
var readStyle = function(obj,name){
if(obj.style[name]){
return obj.style[name];
}
else if(obj.currentStyle){
return obj.currentStyle[name]}
else if(document.defaultView && document.defaultView.getComputedStyle){
var d=document.defaultView.getComputedStyle(obj,null);
return d.getPropertyValue(name)}
else{
return null}
}
;
var style ={
setOpacity:function(obj,opacity){
if(typeof(obj.style.opacity) != 'undefined'){
obj.style.opacity = opacity;
}
else{
obj.style.filter = 'Alpha(Opacity=' + (opacity*100) + ')';
}
;
}
}
;
/* ���� */
var extend ={
/** ����Ԫ�� @param{
Element}
target Ŀ��Ԫ��**/
fadeIn:function(obj,time){
if(readStyle(obj,'display') == 'none'){
obj.style.display = 'block';
}
;
style.setOpacity(obj,0);
time = time || 200;
var opacity = 0,step = time / 20;
clearTimeout(obj.showT);
obj.showT = setTimeout(function(){
if(opacity >= 1){
style.setOpacity(obj,1);
return;
}
opacity +=1/step;
style.setOpacity(obj,opacity);
obj.showT = setTimeout(arguments.callee,20);
}
,20);
}
,/** ����Ԫ�� @param{
Element}
target Ŀ��Ԫ��**/
fadeOut:function(obj,time){
time = time || 200;
style.setOpacity(obj,1);
var opacity = 1,step = time / 20;
clearTimeout(obj.showT);
obj.showT = setTimeout(function(){
if(opacity <= 0){
obj.style.display = 'none';
style.setOpacity(obj,0);
return;
}
;
opacity -= 1/step;
obj.showT = setTimeout(arguments.callee,20);
}
,20);
}
,/** ����Ԫ�� @param{
Element}
target Ŀ��Ԫ�� @param{
String}
key target��ʽ @param{
Number}
start key��ʼֵ @param{
Number}
end key����ֵ @param{
Number}
speed �ٶ� @param{
Function}
endFn ����ʱ�Ļص� @param{
String}
u ��ʽ��λ**/
actPX:function(obj,key,start,end,speed,endFn,u){
if(typeof(u) == 'undefined'){
u = 'px'}
;
clearTimeout(obj['_extend_actPX' + key.replace(/\-\.\=/,'_') + '_timeOut']);
if(start > end){
speed = - Math.abs(speed);
}
else{
speed = Math.abs(speed);
}
;
var now = start;
var length = end - start;
obj['_extend_actPX' + key.replace(/\-\.\=/,'_') + '_timeOut'] = setTimeout(function(){
now += speed;
var space = end - now;
if(start < end){
if(space < length/3){
speed = Math.ceil(space/3);
}
;
if(space <= 0){
obj[key] = end + u;
if(endFn){
endFn()}
;
return;
}
;
}
else{
if(space > length/3){
speed = Math.floor(space/3);
}
;
if(space >= 0){
obj[key] = end + u;
if(endFn){
endFn()}
;
return;
}
;
}
;
obj[key] = now + u;
obj['_extend_actPX' + key.replace(/\-\.\=/,'_') + '_timeOut'] = setTimeout(arguments.callee,20);
}
,20);
}
}
/** ����**/
var config ={
imgData:[],// ��ʹ��ͼƬ��ϢimgTargetId:'',// ��ʹ�� Slide Ŀ�� IDimgWidth:'100%',// ��ʹ��ͼƬ���imgHeight:'100%',// ��ʹ��ͼƬ�߶�imgAuto:false,// ��ʹ���Զ�����imgInterval:3000,// ��ʹ�����ʱ��imgDataLen:0,// ��ʹ��ͼƬ����goSwitch:true,// �����ͣʱ�л�״̬index:4,// ������������ֵ_index:0,curImg:5,indexShow:5}
;
/** ���ɲ����� Slide �ṹ**/
var buildSlide = function(){
// ע�� Slide �ṹ var panelHtml = $('_slide').getElementsByTagName('ul')[0].innerHTML;
var aLi = $('_slide').getElementsByTagName('ul')[0].getElementsByTagName('li');
$('_slide').getElementsByTagName('ul')[0].innerHTML = panelHtml + panelHtml;
// ���ÿ��setSlideWH($(config.imgTargetId),config.imgWidth,config.imgHeight);
$('_slide').getElementsByTagName('ul')[0].style.left = '-' + aLi[0].offsetWidth * 4 + 'px';
}
;
quadEaseOut = function (t,b,c,d,s){
return -c *(t/=d)*(t-2) + b;
}
;
var move = function(){
//var e = this;
clearTimeout(config.timer),config.t < 50 ? (boxMoveTo(Math.round(quadEaseOut(config.t += 3,config.b,config.c,50))),config.timer=setTimeout(function(){
move()}
,30)):boxMoveTo(config.target)}
var boxMoveTo = function(e){
$('slide_list').style.left = e+"px"}
//var dotNum = 0;
var d = false;
var run = function(e,t){
var slideList = $('slide_list').getElementsByTagName('li');
dotList = $("focus_dot").getElementsByTagName('li');
slideList[config._index].className = '';
for(var i=0;
i<config.imgData*2;
i++){
slideList[i].className = '';
slideList[i].getElementsByTagName("p")[0].style.display = 'none';
}
for(var i=0;
i<config.imgData;
i++){
dotList[i].className = '';
}
e = e < 0 ? config.imgData - 1:e > config.imgData ? 1:e,config.target = -Math.abs(slideList[0].offsetWidth)*(config.index = e),config.t = 0,config.b = t ? config.target - slideList[0].offsetWidth:config.target + slideList[0].offsetWidth,config.c = config.target - config.b,move();
config.curImg = config.index + 1 > 6 ? 1:(config.index + 1);
slideList[config.curImg].className = 'cur';
var dotN = 0;
if(config.index >= 4){
dotN = config.index - 4;
}
else{
dotN = config.curImg;
}
dotList[dotN].className = "current";
slideList[config.curImg].getElementsByTagName("p")[0].style.display = 'block';
config._index = config.curImg;
}
/** �Զ��л�**/
var b = false,c = false,timerA = null;
var autoSwitch = function(){
var slideList = $('slide_list').getElementsByTagName('li');
// ����������for (var i=0;
i<config.imgDataLen;
i++){
// �ҵ���ǰ������if (slideList[i].className == 'cur'){
// ��õ�ǰ������������config.index = getIndex(slideList[i],slideList);
}
}
var autoFun = function(){
if (config.goSwitch){
config.index = config.index == 5 ? 0:config.index;
if(!b){
b = true;
config.index = 0;
}
if(config.index == 3 && !c){
clearInterval(timerA);
timerA = setInterval(autoFun,10000);
c = true;
}
else if(c){
c = false;
clearInterval(timerA);
timerA = setInterval(autoFun,config.imgInterval);
}
//console.log(config.index);
run(config.index,!1);
config.index += 1;
}
}
;
timerA = setInterval(autoFun,config.imgInterval);
}
;
/** ��ָ�¼�**/
var touchFun = function(evt){
var $ = function(o){
return document.querySelector(o)}
,$$ = function(o){
return document.querySelectorAll(o)}
,touchInfo ={
startX:0,endX:0}
,slide = $('#slide'),btnL = $('#sliderL'),btnR = $('#sliderR');
slide.addEventListener('touchstart',function(evt){
evt.preventDefault();
if(evt.changedTouches.length == 0) return;
touchInfo.startX = evt.changedTouches[0].pageX;
}
,false);
slide.addEventListener('touchend',function(evt){
evt.preventDefault();
if(evt.changedTouches.length == 0) return;
touchInfo.endX = evt.changedTouches[0].pageX;
var offset = touchInfo.endX - touchInfo.startX;
if(offset < 0){
run(++config.index,!1)}
else if(offset > 0){
run(--config.index,!0)}
else{
if(evt.target.parentNode.parentNode.className == 'cur'){
window.open(evt.target.parentNode.getAttribute('href'),'_blank');
}
else{
return;
}
}
}
,false);
btnL.addEventListener('touchend',function(){
run(++config.index,!1)}
,false)btnR.addEventListener('touchend',function(){
run(--config.index,!0)}
,false)}
;
return{
init:function(obj,e){
// ��ȡ������Ϣconfig.imgData = obj.data;
// ����ͼƬ��Ϣconfig.imgTargetId = obj.targetId;
// ���� Slide Ŀ�� IDconfig.imgWidth = obj.width || config.imgWidth;
// ����ͼƬ���config.imgHeight = obj.height || config.imgHeight;
// ����ͼƬ�߶�config.imgAuto = obj.auto || config.imgAuto;
// �����Զ�����config.imgInterval = obj.interval || config.imgInterval;
// ���ü��ʱ��//config.imgDataLen = config.imgData.length;
// ����ͼƬ����// ���� Slide �ṹbuildSlide();
var slideList = $('slide_list').getElementsByTagName('li');
$('slide_list').style.width = slideList[0].offsetWidth*slideList.length + 'px';
slideList[config.curImg].className = 'cur';
var btnL = $('sliderL'),btnR = $('sliderR'),btnClose = $('slidClosed');
btnR.onclick = function(){
clearInterval(timerA);
config.index += 1;
run(config.index,!1)}
btnL.onclick = function(){
clearInterval(timerA);
config.index -= 1;
run(config.index,!0)}
$('slide').onmouseover = function(event){
config.index = Math.ceil(Math.abs(parseInt($('_slide').getElementsByTagName('ul')[0].style.left)/slideList[0].offsetWidth));
clearInterval(timerA);
timerA = null;
event.stopPropagation();
}
$('slide').onmouseout = function(event){
if (config.imgAuto){
autoSwitch();
}
config.index = config.curImg;
event.stopPropagation();
}
if(/ipad;
/i.test(navigator.userAgent.toLowerCase())){
touchFun(e);
}
// �Զ��л�if (config.imgAuto){
autoSwitch();
}
dotList = $("focus_dot").getElementsByTagName('li');
var n;
for(n = 0;
n < dotList.length;
n++ ){
dotList[n].index = n;
dotList[n].onclick = function(){
if(config.curImg == this.index || config.curImg == this.index + 5) return;
var n = 0;
n = config.curImg > 4 ? 0:config.curImg;
if(this.index > n){
run(this.index-1,!1);
}
else{
run(this.index-1,!0)}
config.curImg = this.index;
}
}
}
}
}
)();
CSS代码(zzsc.css):
@charset "utf-8";*{margin:0;padding:0;}
ul,li{list-style:none;}
img{border:none;}
.slider-container{margin:0 auto;width:960px;overflow:hidden;position:relative;background:#e1e1e1;border-bottom:9px solid #d9d9d9;height:390px;overflow:hidden;z-index:9;min-width:960px}
.slider-wrap{width:5100px;height:360px;font-size:0;position:absolute;left:49%;top:0;margin-left:-1275px;overflow:hidden}
.slider{width:100%;height:100%;float:left}
.slider-container ul{}
#_slide li{width:870px;height:360px;float:left;position:relative;text-align:center;}
.slider-container .pic{width:830px;height:350px;display:block;margin:0 20px;position:relative;}
.slider-container .pic img{width:830px;height:350px;display:block;border:0 none;}
.slider-container dl{width:830px;height:350px;overflow:hidden;margin:0 auto;}
.slider-container dl .pic{margin:0;}
.slider-container #ad1,.slider-container #ad1 .pic{width:359px;height:350px}
.slider-container #ad2,.slider-container #ad2 .pic,.slider-container #ad3,.slider-container #ad3 .pic,.slider-container #ad4,.slider-container #ad4 .pic{width:156px;height:350px}
.slider-container dd{float:left;display:inline;overflow:hidden;}
.slider-container #ad2,.slider-container #ad3,.slider-container #ad4{margin-left:1px;}
.slider-container #ad1 .pic img{width:359px;height:350px;display:block;border:0 none;}
.slider-container #ad2 .pic img,.slider-container #ad3 .pic img,.slider-container #ad4 .pic img{width:156px;height:350px;display:block;border:0 none;}
.slider-container .slide_thumb{display:none;}
.slide_Bg{width:830px;height:350px;position:absolute;left:20px;top:0;background:#fff;filter:alpha(opacity=30);opacity:0.5;}
.cur .slide_Bg{display:none}
#slide_list{position:absolute;left:0}
#topPic{display:none}
.slider-container li img{position:relative}
.slider-container li p{width:100%;height:50px;line-height:50px;font-family:"微软雅黑","黑体";font-size:21px;color:#fff;position:absolute;bottom:0;left:0;z-index:100;display:none;background:rgba(0,0,0,0.6);filter:progid:DXImageTransform.Microsoft.gradient( GradientType = 0,startColorstr = "#60000000",endColorstr = "#60000000") 6}
.slider-container li dd p{font-size:16px;}
.cur .st_ty{display:block;}
#focus_dot{width:120px;height:13px;position:absolute;top:365px;left:50%;margin-left:-60px;}
#focus_dot li{width:13px;height:13px;float:left;text-indent:-999em;overflow:hidden;cursor:pointer;display:inline;margin-right:10px;background:url(http://mat1.gtimg.com/ent/mc/picture2013/bg_ico.png) -23px -129px no-repeat;}
#focus_dot li.current{background-position:0 -129px;}
.slider-container .pic:hover,.twC3 a:hover,.gqsjMod .bd a:hover{text-decoration:none;}
.st_ty{cursor:pointer;}
.slide_Bg{width:830px;height:350px;position:absolute;left:20px;top:0;background:#fff;filter:alpha(opacity=70);opacity:0.7;}
#focusMain li .text{display:block;width:100%;height:80px;position:absolute;bottom:20px;background:rgba(255,255,255,0.8);filter:progid:DXImageTransform.Microsoft.gradient( GradientType = 0,startColorstr = "#ccffffff",endColorstr = "#ccffffff");}
.gqsjMod .bd a:hover p{background:rgba(3,107,170,0.6);filter:progid:DXImageTransform.Microsoft.gradient( GradientType = 0,startColorstr = "#99036baa",endColorstr = "#99036baa")}
.twC3 .pic{text-align:center;}
#cardBody1 .tabBody{overflow:hidden;zoom:1;+padding-bottom:20px;}
.mrjxMod .ft a p{text-align:center;}
.slider-wrap{width:5100px;height:360px;font-size:0;position:absolute;left:50%;margin-left:-1305px;top:0;verflow:hidden}
.hzlxMod .hd h2{background-position:left -6px;}
.slider-btn{position:absolute;top:148px;width:54px;height:54px;background:url(../images/arrow-btn.png);cursor:pointer;}
.slider-btn-l{left:0;}
.slider-btn-r{right:0;}
.slider-btn-l{left:50%;margin-left:-509px;background-position:0px 0px;}
.slider-btn-l:hover{background-position:0px -54px;}
.slider-btn-r{right:50%;margin-right:-509px;background-position:-54px 0px;}
.slider-btn-r:hover{background-position:-54px -54px;}
分享到QQ
分享到微博
微信扫一扫
