经验分享程序开发文档资料数据资源其它资源

华强北商城jQuery焦点图轮播滚动切换特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 华强北商城jQuery焦点图轮播滚动切换特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

华强北商城jQuery焦点图轮播滚动切换特效代码

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>华强北商城jQuery焦点图</title>
<meta property="qc:admins" content="14756677076730126375" />
<meta name="viewport" content="width=device-width,maximum-scale=2.0, user-scalable=yes" />
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/skin0.css" />
<link rel="stylesheet" type="text/css" href="css/layout.css" />
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery.lazyload.js" type="text/javascript"></script>
<script src="js/jquery-easing.1.3.js" type="text/javascript"></script>
<script src="js/jquery.cookie.js" type="text/javascript"></script>
</head>

<body ishome="1">

<!-- 内容部分 -->
<div class="okhqb_content cfix">
	<!-- 轮换部分 -->
	<div class="banner_box cfix">
		<!-- 焦点图片 -->
		<div class="focus_box fl">
			<ul class="focus_list">
				<li>
				<a title="四重豪礼喜相送" href="#" target="_blank">
				<img class="lazy_focus" width="790" height="330" data-original="images/2528f2eb9fd4839fce42438c0d83eab0.jpg" alt="四重豪礼喜相送" title="四重豪礼喜相送" src="images/blank.gif">
				<noscript>
				<img disabled="disabled" alt="四重豪礼喜相送" src="images/2528f2eb9fd4839fce42438c0d83eab0.jpg" width="790" height="330" />
				
				
				
				</noscript></a></li>
				<li>
				<a title="国货七夕大促" href="#" target="_blank">
				<img class="lazy_focus" width="790" height="330" data-original="images/1e0b7b98bb47bdb4cfadcef02486db3d.jpg" alt="国货七夕大促" title="国货七夕大促" src="images/blank.gif">
				<noscript>
				<img disabled="disabled" alt="国货七夕大促" src="images/1e0b7b98bb47bdb4cfadcef02486db3d.jpg" width="790" height="330" />
				
				
				
				</noscript></a></li>
				<li>
				<a title="9.9元购" href="#" target="_blank">
				<img class="lazy_focus" width="790" height="330" data-original="images/f6f11299f8822f6065c5c8b2f4aa3c09.jpg" alt="9.9元购" title="9.9元购" src="images/blank.gif">
				<noscript>
				<img disabled="disabled" alt="9.9元购" src="images/f6f11299f8822f6065c5c8b2f4aa3c09.jpg" width="790" height="330" />
				
				
				
				</noscript></a></li>
				<li>
				<a title="海外机购七夕狂促" href="#" target="_blank">
				<img class="lazy_focus" width="790" height="330" data-original="images/145a9fab43c50ecdc198001f10139592.jpg" alt="海外机购七夕狂促" title="海外机购七夕狂促" src="images/blank.gif">
				<noscript>
				<img disabled="disabled" alt="海外机购七夕狂促" src="images/145a9fab43c50ecdc198001f10139592.jpg" width="790" height="330" />
				
				
				
				</noscript></a></li>
				<li>
				<a title="爷们必备-大屏手机" href="#" target="_blank">
				<img class="lazy_focus" width="790" height="330" data-original="images/c5b06b7beac79d665c8bd44534df021f.jpg" alt="爷们必备-大屏手机" title="爷们必备-大屏手机" src="images/blank.gif">
				<noscript>
				<img disabled="disabled" alt="爷们必备-大屏手机" src="images/c5b06b7beac79d665c8bd44534df021f.jpg" width="790" height="330" />
				
				
				
				</noscript></a></li>
			</ul>
			<div class="focus_nav_box">
				<p class="focus_nav">
				<a class="oncur" href="#" target="_blank">四重豪礼喜相送</a>
				<a href="#" target="_blank">国货七夕大促</a>
				<a href="#" target="_blank">9.9元购</a>
				<a href="#" target="_blank">海外机购七夕狂促</a>
				<a href="#" target="_blank">爷们必备-大屏手机</a>
				</p>
			</div>
		</div>
		<!-- 焦点图片 end --></div>
	<!-- 轮换部分 end -->
	<script type="text/javascript" src="js/home.js"></script>
</div>
</body>
</html>

JS代码(home.js):

// JavaScript Document$(function(){
	//lazyload$("img.lazy").show().lazyload({
	effect:"fadeIn"}
);
	$("img.lazy_focus").show().lazyload({
	event:"lazy_focus",effect:"fadeIn"}
);
	$('.focus_list li:eq(0) img').trigger("lazy_focus").addClass("complete");
	//通栏伸缩广告var _tslide;
	function timesl(){
	var _img = $('.w_ads_slide_bg').find('img').attr('src');
	if($.trim(_img)){
	$('.w_ads_bg').hide()}
_tslide = setTimeout(function(){
	$('.w_ads_slide').slideUp(1500,'easeOutQuad',function(){
	$('.w_ads_slide_bg').hide();
	$('.w_ads_bg').slideDown(1000);
}
);
}
,5000);
}
timesl();
	$('.w_ads_slide_bg').hover(function(){
	if(_tslide){
	clearTimeout(_tslide);
}
}
,function(){
	timesl();
}
);
	//轮播动画var _AdList = $('.focus_box .focus_list');
	var _listWidth = $('.focus_box .focus_list li:eq(0)').width();
	var _listCount = $('.focus_box .focus_list li').length;
	var _nav = $('.focus_box .focus_nav a');
	var _AdWarp = $('.focus_box');
	var _speed = 500;
	var _wait = 4500;
	var _sue = 0;
	_AdList.css({
	'width':_listCount*_listWidth}
);
	var scrollAd = function(sue,speed){
	_AdList.stop().animate({
	left:-_listWidth*sue}
,speed,'easeInOutQuad');
	_nav.removeClass('oncur').eq(sue).addClass('oncur');
	lazy_focus(sue);
}
//scrollAd();
	var scrollAdRun = setInterval(function(){
	_sue++;
	if(_sue == _listCount)_sue = 0;
	scrollAd(_sue,_speed);
}
,_wait+_speed);
	var lazy_focus = function (s){
	if(!$('.focus_list li:eq('+s+') img').hasClass("complete")){
	$('.focus_list li:eq('+s+') img').trigger("lazy_focus").addClass("complete");
}
}
_AdWarp.live('mouseleave mouseenter',function(e){
	var type = e.type;
	if(type == 'mouseenter'){
	clearInterval(scrollAdRun);
}
else if(type == 'mouseleave'){
	scrollAdRun = setInterval(function(){
	_sue++;
	if(_sue == _listCount)_sue = 0;
	scrollAd(_sue,_speed);
}
,_wait+_speed);
}
}
).delegate('p.focus_nav a','mouseenter',function(e){
	_sue = $(e.target).index();
	var type = e.type;
	_AdList.stop().animate({
	left:-_listWidth*_sue}
,_speed,'easeInOutQuad');
	_nav.removeClass('oncur').eq(_sue).addClass('oncur');
	lazy_focus(_sue);
}
);
	//滚动公告var i = 0;
	var tlen = $('.notice_box ul li').length;
	var noticeShow;
	if(tlen > 1){
	noticeShow = setInterval(function(){
	i++;
	if(i == tlen){
	i = 0;
}
$('.notice_box ul').animate({
	top:-30*i}
,500);
}
,5000);
	$('.notice_box ul li').hover(function(){
	if(noticeShow){
	clearInterval(noticeShow);
}
}
,function(){
	noticeShow = setInterval(function(){
	i++;
	if(i == tlen){
	i = 0;
}
$('.notice_box ul').animate({
	top:-30*i}
,500);
}
,5000);
}
);
}
//mini三点惠切换效果var j = 0;
	var _arr = $('.mini_qiang .q_list a.arr');
	var _len = $('.mini_qiang .q_list ul:visible li').length;
	_arr.hover(function(){
	$(this).stop().animate({
	opacity:1}
,500);
}
,function(){
	$(this).stop().animate({
	opacity:0.5}
,500);
}
);
	function goodSlide(j){
	$('.mini_qiang .q_list ul:visible').stop().animate({
	left:-200*j}
,300);
}
_arr.click(function(){
	var id = this.id;
	if(id == 'arr_l'){
	j--;
	if(j < 0) j = _len-1;
}
else{
	j++;
	if(j > _len-1) j = 0;
}
goodSlide(j);
}
);
	//三点惠时间段切换效果var _timecur = $('.mini_qiang:visible .q_time a');
	var _glist = $('.mini_qiang:visible .q_list ul');
	_timecur.hover(function(){
	var _n = _timecur.index(this);
	$(this).addClass('oncur').siblings().removeClass('oncur');
	_glist.eq(_n).show().siblings('ul').hide();
}
);
	//周末清仓倒计时var _time;
	function _tC(_time){
	__d = parseInt( _time/3600/24 );
	__h = parseInt( (_time/3600)%24 );
	__m = parseInt( (_time/60)%60 );
	__s = parseInt( _time%60 );
	_timebox.find('.day').html(__d);
	_timebox.find('.hour').html(__h);
	_timebox.find('.min').html(__m);
	_timebox.find('.sec').html(__s);
	if( _time == '0' || _time == '5' ){
	return false;
}
}
var _stime = $('.index_surplus').val();
	var _timebox = $('.funny_day .q_time');
	if(_stime == 'undefined' || _stime == ''){
	return;
}
else{
	_time = _stime;
	var _timeCount = setInterval(function(){
	_tC(_time);
	_time--}
,1000 );
}
//升降价提醒效果var _parr = $('.goods_list .okhqb_goods li .pro_pr a.pr_status');
	_parr.hover(function(){
	var _cpr = Number($('.pr_count',this).val());
	var _cprs = Math.abs(_cpr);
	$('.pr_info',this).stop().fadeIn(200);
	if(_cpr > 0){
	$('.pr_info',this).find('i.sta').html('上涨');
	$('.pr_info',this).find('i.price').html(_cprs);
}
if(_cpr < 0){
	$('.pr_info',this).find('i.sta').html('下跌').show();
	$('.pr_info',this).find('i.price').html(_cprs);
}
}
,function(){
	$('.pr_info',this).stop().fadeOut(200);
}
);
	//特价配件切换效果var k = 0;
	var _arr = $('.fitting_hot_list a.arr');
	var _fitlen = $('.fitting_hot_list ul li').length;
	$('.fitting_hot_list ul').css("width",_fitlen*200);
	_arr.hover(function(){
	$(this).stop().animate({
	opacity:1}
,500);
}
,function(){
	$(this).stop().animate({
	opacity:0.5}
,500);
}
);
	function fittingSlide(k){
	$('.fitting_hot_list ul').stop().animate({
	left:-200*k}
,300);
}
_arr.click(function(){
	var id = this.id;
	if(id == 'arr_l'){
	k--;
	if(k < 0) k = _fitlen-1;
}
else{
	k++;
	if(k > _fitlen-1) k = 0;
}
fittingSlide(k);
}
);
	//phone rechargefunction phone_recharge(){
	var _am = $('select[name="phone_recharge_amount"]').val() || 100;
	var _phoneRechargeSellingPrice = $('.phoneRechargeSellingPrice');
	var tips_nav = $('#homeRecharge .tips_nav');
	$('select[name="phone_recharge_amount"]').after('<span style="padding-left:8px;
	color:#ff0000;
	font-size:12px;
	display:none;
	" class="s_tips_nav"></span>');
	$.get('http://www.okhqb.com/detail/findGoodsVirtualMaxAndMinPrice.json?amount=' + _am + '.00',function( result ){
	if( result.code == 200 && result.data != null ){
	_phoneRechargeSellingPrice.html( result.data.retailMinPrice + '-' + result.data.retailMaxPrice + '元' );
}
}
);
	$('input[name="phone_recharge_mobile"]').blur(function(){
	var _mobile = $('input[name="phone_recharge_mobile"]').val(),_amount = $('select[name="phone_recharge_amount"]').val();
	_mobile = _mobile.replace(/(^\s*)|(\s*$)/g,'');
	if( _mobile.length < 1 ){
	tips_nav.html('请填写充值号码').show();
	$(this).attr('is_mobile_licit',0);
	$(this).attr('s',0);
	$('#homeRecharge .s_tips_nav').html('').hide();
	return;
}
else if( _mobile.length != 11 ){
	tips_nav.html('号码必须是11位').show();
	$(this).attr('is_mobile_licit',0);
	$(this).attr('s',0);
	$('#homeRecharge .s_tips_nav').html('').hide();
	return;
}
else if( ! (/^1[3|5|8][0-9]\d{
	8}
$/.test( _mobile )) ){
	tips_nav.html('格式不正确').show();
	$(this).attr('is_mobile_licit',0);
	$(this).attr('s',0);
	$('#homeRecharge .s_tips_nav').html('').hide();
	return;
}
else{
	tips_nav.css('color','#999999').html('').hide();
	$.ajax({
	url:'http://my.okhqb.com/my/mobileItemInfo.json?mobile=' + _mobile + '&amount=' + _amount + '&callback=?',success:function( result ){
	if( result.code == 200 && result.data != null ){
	tips_nav.html( result.data.provider + '(' + result.data.area + ')' ).show();
	_phoneRechargeSellingPrice.html( result.data.retailPrice ).show();
	$('input[name="phone_recharge_mobile"]').attr('is_mobile_licit',1);
	$('input[name="phone_recharge_mobile"]').attr('s',1);
	$('#homeRecharge .s_tips_nav').html('').hide();
}
else{
	//tips_nav.css('color','#ff0000').html( '暂不支持该号码' ).show();
	$('#homeRecharge .s_tips_nav').html('暂不支持该面值').show();
	$('input[name="phone_recharge_mobile"]').attr('is_mobile_licit',0);
	$('input[name="phone_recharge_mobile"]').attr('s',0);
}
}
,dataType:'jsonp',jsonp:'callback'}
);
}
}
);
	$('select[name="phone_recharge_amount"]').live('change',function(){
	var _mobile = $('input[name="phone_recharge_mobile"]').val(),_amount = $(this).val();
	var is_mobile_licit = $('input[name="phone_recharge_mobile"]').attr('is_mobile_licit');
	if( is_mobile_licit == 1 ){
	$.ajax({
	url:'http://my.okhqb.com/my/mobileItemInfo.json?mobile=' + _mobile + '&amount=' + _amount + '&callback=?',jsonp:true,success:function( result ){
	if( result.code == 200 && result.data != null ){
	var _s = Number( $('input[name="phone_recharge_mobile"]').attr('s') );
	if( !_s ){
	tips_nav.css('color','#999999').html('').hide();
}
_phoneRechargeSellingPrice.html( result.data.retailPrice ).show();
	$('input[name="phone_recharge_mobile"]').attr('s',1);
	$('#homeRecharge .s_tips_nav').html('').hide();
	$('input[name="phone_recharge_mobile"]').blur();
}
else{
	$('#homeRecharge .s_tips_nav').html( '暂不支持该面值' ).show();
}
}
,dataType:'jsonp',jsonp:'callback'}
);
}
else{
	var _s = Number( $('input[name="phone_recharge_mobile"]').attr('s') );
	if( !_s ){
	tips_nav.css('color','#999999').html('').hide();
}
$.get('http://www.okhqb.com/detail/findGoodsVirtualMaxAndMinPrice.json?amount=' + _amount + '.00',function( result ){
	if( result.code == 200 && result.data != null ){
	_phoneRechargeSellingPrice.html( result.data.retailMinPrice + '-' + result.data.retailMaxPrice + '元' );
	$('input[name="phone_recharge_mobile"]').attr('s',1);
	$('#homeRecharge .s_tips_nav').html('').hide();
	$('input[name="phone_recharge_mobile"]').blur();
}
}
);
}
}
);
	$('#home_rechar_submit').live('click',function(){
	var _mobile = $('input[name="phone_recharge_mobile"]').val(),_amount = $('select[name="phone_recharge_amount"]').val();
	_mobile = _mobile.replace(/(^\s*)|(\s*$)/g,'');
	if( _mobile.length < 1 ){
	tips_nav.html('请填写充值号码').show();
	return;
}
else if( _mobile.length != 11 ){
	tips_nav.html('号码必须是11位').show();
	return;
}
else if( ! (/^1[3|5|8][0-9]\d{
	8}
$/.test( _mobile )) ){
	tips_nav.html('格式不正确').show();
	return;
}
else{
	window.location.href = 'http://my.okhqb.com/my/recharge.html?mobile=' + _mobile + '&amount=' + _amount;
}
}
);
}
/* phone_recharge();
	去掉手机充值 */
//今天特卖加购物车$('.okhqb_hot li a.to_cart').live('click',function(){
	var $this = $(this);
	var quantity = 1;
	var skuId = $this.attr('data-sku-id');
	var cartStr = '<form id="formToCart" method="post" name="formToCart" action="http://buy.okhqb.com/buy/cart.html" style="display:none"><input type="hidden" name="quantity" value="'+quantity+'"><input type="hidden" name="skuId" value="'+skuId+'"></form>';
	$('body').append(cartStr);
	$('#formToCart').submit();
}
)//friend link$('.f_link').hover(function(){
	$('.flink_hover').show();
}
,function(){
	$('.flink_hover').hide();
}
);
	/*$('.f_link').click(function(){
	if($('.flink_hover').is(':visible')){
	$('.flink_hover').hide();
}
else{
	$('.flink_hover').show();
}
}
);
	*/
$('.flink_hover').hover(function(){
	$(this).show();
}
,function(){
	$(this).hide();
}
);
}
);

CSS代码(skin0.css):

@charset "utf-8";/* CSS Document */
/* 焦点图标 */
.okhqb_content .focus_box .focus_nav_box .focus_nav a.oncur{opacity:0.8;filter:alpha(opacity=80);}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
698.30 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
698.30 KB
立即下载
危雁洁
了解
打赏作者 鼓励作者
Html 焦点滚动特效2
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章