jQuery快播网站焦点图轮播滚动切换特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery快播网站焦点图轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>jQuery快播网站焦点图</title>
    <meta http-equiv="X-UA-COMPATIBLE" content="IE=9" />
    <link type="text/css" rel="stylesheet" href="css/zzsc.css" />
    <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
    <div class="hdp">
        <div class="right_R" style="position:relative;z-index:10;">
            <div class="pic_link">
                <ul>

                    <li mid="0" class="xz">超级雷达 </li>

                    <li mid="1">私有云-存储随时随地 </li>

                    <li mid="2">云播放公测 </li>

                </ul>
            </div>
            <div class="pic_bg"></div>
            <div class="pic">
                <ul>

                    <li mid="0 "><a href="#" title="超级雷达 " alt="超级雷达 "><img src="images/1.jpg " title="超级雷达 " alt="超级雷达 " /></a></li>

                    <li mid="1 "><a href="#" title="私有云-存储随时随地 " alt="私有云-存储随时随地 "><img src="images/2.jpg " title="私有云-存储随时随地 " alt="私有云-存储随时随地 " /></a></li>

                    <li mid="2 "><a href="#" title="云播放公测 " alt="云播放公测 "><img src="images/3.jpg " title="云播放公测 " alt="云播放公测 " /></a></li>

                </ul>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="js/index.js"></script>
</body>
</html>

JS代码(index.js):

// index login$('#index-login-form').live('submit',function(){
	var user_name = $('#index-login-form input[name=user_name]').val().replace(/(^\s+)|(\s+)$/g,'').toLowerCase();
	var user_pwd = $('#index-login-form input[name=user_pwd]').val();
	var captcha = $('#index-login-form input[name=captcha]').val().replace(/(^\s+)|(\s+)$/g,'');
	var u_n_reg = /^[a-z\d_\-\@\.]+$/gi;
	if(user_name == '' || user_name.length < 3 || user_name.length > 50 || !u_n_reg.test(user_name)){
	$('#index-login-form input[name=user_name]').focus().parents('tr').find('em').removeClass().addClass('error').html('帐号不正确').show();
	return false;
}
else{
	$('#index-login-form input[name=user_name]').parents('tr').find('em').removeClass().html('').hide();
}
if(user_pwd == '' || user_pwd.length < 6 || user_pwd.length > 20){
	$('#index-login-form input[name=user_pwd]').focus().parents('tr').find('em').removeClass().addClass('error').html('密码不正确').show();
	return false;
}
else{
	$('#index-login-form input[name=user_pwd]').parents('tr').find('em').removeClass().html('').hide();
}
if(captcha.length !=4){
	$('#index-login-form input[name=captcha]').focus().val('').parents('tr').find('em').removeClass().addClass('error').html('验证码不正确').show();
	return false;
}
else{
	$('#index-login-form input[name=captcha]').parents('tr').find('em').removeClass().html('').hide();
}
$('#index-login-form input').trigger('blur');
	$('#index-login-form #loading_tips').removeClass().addClass('m_loading_8d6b6b');
	dynamic_login(function(){
	if(!sha1_vm_test()){
	return false;
}
user_pwd = dynamic_encrypt(user_pwd);
	$.ajax({
	type:'POST',url:'/member/login',data:{
	user_name:user_name,user_pwd:user_pwd,captcha:captcha,t:Math.random()}
,dataType:'json',complete:function(){
	$('#index-login-form #loading_tips').removeClass();
}
,success:function(ret){
	if(ret.ok){
	window.location.reload();
}
else{
	$('#index-login-form input[name='+ret.data.identify+']').focus().parents('tr').find('em').addClass('error').html(ret.reason).show();
	$('#index-login-form input[name=captcha]').val('');
	$('.captcha img').click();
}
}
}
)}
);
	return false;
}
);
	$('#index-login-form input').live('focus',function(){
	$(this).parent().addClass('focus');
}
)$('#index-login-form input').live('blur',function(){
	$(this).parent().removeClass('focus');
}
);
	$('.hdp .captcha img').live('click',function(){
	var self = this;
	var captchaImg = new Image();
	captchaImg.onload = function(){
	$(self).attr('src',captchaImg.src);
}
captchaImg.src = "/member/captcha?t=" + Math.random();
}
);
	//$('#index-login-form input[name=user_name]').trigger('focus');
	//var n_c_ser = 0;
	function t_player(cur){
	$('.hdp .pic_link ul > li').eq(n_c_ser).removeClass("xz");
	if(cur==null){
	n_c_ser = ++n_c_ser % 3;
}
else{
	n_c_ser = cur;
}
if(n_c_ser !=0 ){
	$('.hdp .pic ul > li').eq(0).children('div').remove();
}
$('.hdp .pic ul').animate({
	marginLeft:(-1 * n_c_ser * $('.hdp .pic ul > li').width()) + 'px'}
);
	$('.hdp .pic_link ul > li').eq(n_c_ser).addClass("xz");
}
var n_t = setInterval('t_player()',5000);
	$('.hdp .pic_link ul > li,.hdp .pic ul>li').live('mouseover',function(){
	var self = this;
	clearInterval(n_t);
	$('.hdp .pic ul').stop();
	var mid = $(self).attr('mid');
	t_player(mid);
}
).live('mouseout',function(e){
	if(checkHover(e,this)){
	n_t = setInterval('t_player()',5000);
}
}
);
	var current_serial_id = 4;
	$('.hy_lanmu li a').bind('click',function(e){
	var serial_id = $(this).parent().attr('serial_id');
	//if(checkHover(e,this.parent()) && serial_id != current_serial_id){
	$('.hy_lanmu li:visible').removeClass('xz');
	$(this).parent().addClass('xz');
	$('.hytq_pic').children('ul:visible').hide().end().children('#tequan_' + serial_id).fadeIn('slow');
	current_serial_id = serial_id;
	//}
return false;
}
);
	$('.hy_lanmu li a').bind('focus',function(e){
	$(this).trigger('blur');
}
);
	var s_hy_c_ser = 0;
	function say_hy_player(){
	$('.hy_name ul li').eq(s_hy_c_ser).slideUp('slow',function(){
	s_hy_c_ser = ++s_hy_c_ser % ($('.hy_name ul li').length / 2);
	if(s_hy_c_ser == 0){
	$('.hy_name ul').append($('.hy_name ul li:hidden').clone().show()).children(':hidden').remove();
}
}
);
}
$('.hy_name').hover(function(e){
	clearInterval(s_hy_t);
}
,function(e){
	if(!checkHover(e,this)){
	s_hy_t = setInterval('say_hy_player()',3000);
}
}
);
	$('.hy_name ul').append($('.hy_name ul li').clone());
	var s_hy_t = setInterval('say_hy_player()',3000);
	var s_tms_c_ser = 0;
	function say_tms_player(){
	var _h = $.browser.msie && ($.browser.version.substr(0,1) == '6') ? 64:62;
	marginTop = -(s_tms_c_ser +1) * _h;
	//alert(li_height + ',' + marginTop + ',' + $('.tms ul').css('marginTop'));
	$('.tms ul li').eq(s_tms_c_ser).parent().animate({
	marginTop:marginTop + 'px'}
,'slow',function(){
	//s_tms_c_ser = ++s_tms_c_ser % ($('.tms ul li').length / 2);
	s_tms_c_ser++;
	if(s_tms_c_ser >= $('.tms ul li').length / 2){
	//$('.tms ul').append($('.tms ul li:hidden').clone().show()).children(':hidden').remove();
	$(this).css({
	marginTop:'0px'}
);
	s_tms_c_ser = 0;
}
}
);
}
$('.tms').hover(function(e){
	clearInterval(s_tms_t);
}
,function(e){
	if(!checkHover(e,this)){
	s_tms_t = setInterval('say_tms_player()',3000);
}
}
);
	$('.tms ul').append($('.tms ul li').clone());
	var s_tms_t = setInterval('say_tms_player()',3000);
	//var swf_is_init = false;
	function show_new_guide(ob){
	if(!swfobject.hasFlashPlayerVersion('10.2.0')){
	$('<div><a href="http://www.adobe.com/go/getflashplayer" target="_blank">观看教程请安装Flash Player</a></div>').appendTo($('.hdp .pic ul>li').eq(0)).css({
	position:'absolute',top:'10px',right:'5px',color:'#000'}
);
	return;
}
var innerHtml = "";
	innerHtml += "<div class=\"new_guide\">";
	innerHtml += "<div class=\"swf_box\">";
	innerHtml += " <div class=\"flash_content\">";
	innerHtml += "<div id=\"flashContent\" class=\"flashContent\"></div>";
	innerHtml += " </div>";
	innerHtml += " <div class=\"flash_bg\"></div>";
	innerHtml += " </div>";
	innerHtml += "</div>";
	innerHtml += "<div class=\"new_guide_bg\"></div>";
	$('body').append(innerHtml);
	var swfVersionStr = "10.2.0";
	var xiSwfUrlStr = "/static/official/swf/playerProductInstall.swf";
	var flashvars ={
}
;
	var params ={
}
;
	params.quality = "high";
	params.bgcolor = "#000000";
	params.allowscriptaccess = "always";
	params.allowfullscreen = "true";
	params.wmode = "transparent";
	var attributes ={
}
;
	attributes.id = "swf_new_guide";
	attributes.name = "swf_new_guide";
	attributes.align = "middle";
	swfobject.embedSWF( "/static/official/swf/swf_player.swf","flashContent","695","586",swfVersionStr,xiSwfUrlStr,flashvars,params,attributes);
	swfobject.createCSS("#flashContent","display:block;
	text-align:left;
	");
	$('.new_guide_bg').height($('body').height() > $(window).height() ? $('body').height():$(window).height());
}
function hide_new_guide(){
	$('.new_guide_bg').remove();
	$('.new_guide').remove();
}

CSS代码(zzsc.css):

body{height:100%;text-align:left;margin:0px;padding:0px;font-size:12px;color:#4F4E4E;font-family:宋体,Verdana,Arial,Helvetica,sans-serif;}
div,form,img,ul,ol,li,dl,dt,dd,h1,h2,h3,p{margin:0px;padding:0px;border:0px;}
input,textarea,select{font-size:12px;color:#121212;outline:none;}
li{list-style-type:none;}
/* links */
a:link{color:#4F4E4E;text-decoration:none;}
a:visited{color:#4F4E4E;text-decoration:none;}
a:hover{color:#FF0000;text-decoration:none;}
a:active{color:#4F4E4E;}
a.red{font-size:12px;font-weight:bold;}
a.red:link{color:#EC0820;text-decoration:underline;}
a.red:visited{color:#EC0820;text-decoration:underline;}
a.red:hover{color:#EC0820;text-decoration:underline;}
a.write:link{color:#FFFFFF;text-decoration:underline;}
a.write:visited{color:#FFFFFF;text-decoration:underline;}
a.write:hover{color:#FFFFFF;text-decoration:underline;}
.hdp{width:600px;height:329px;margin:0px auto;}
.right_R{width:553px;height:284px;float:right;margin:22px 36px 0 0;display:inline;}
.pic{width:551px;height:283px;overflow:hidden;border:1px solid #C09999;}
.pic ul{width:2000px;}
.pic ul li{float:left;}
.right_R .pic a{display:block;}
.pic img{width:551px;height:283px;}
.pic_bg{width:551px;height:34px;position:absolute;left:1px;bottom:0px;z-index:1;background-image:url(http://is.kuaibo.com/vip/vip/themes/default/images/pic_bg.png)!important;background-repeat:no-repeat;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://is.kuaibo.com/vip/vip/themes/default/images/pic_bg.png');/* IE6 */
_background-image:none;/* IE6 */
}
.pic_link{width:552px;height:38px;position:absolute;left:1px;bottom:0px;z-index:2;}
.pic_link li{width:183px;height:33px;line-height:33px;padding-top:5px;padding-right:1px;float:left;color:#af8d8d;text-align:center;cursor:pointer;}
.pic_link li.xz{background:url(http://is.kuaibo.com/vip/vip/themes/default/images/vip_bg.gif) no-repeat 0px -583px;color:#FFFFFF;}
.pic_link li a:link{color:#AF8D8D;text-decoration:none;}
.pic_link li a:visited{color:#AF8D8D;text-decoration:none;}
.pic_link li a:hover{color:#AF8D8D;text-decoration:none;}

附件:下载该文件资源,减少时间成本(增值服务)