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

搜狗输入法jQ焦点图轮播滚动切换特效代码

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

以下是 搜狗输入法jQ焦点图轮播滚动切换特效代码 的示例演示效果:

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

部分效果截图:

搜狗输入法jQ焦点图轮播滚动切换特效代码

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=gb2312">
<title>搜狗输入法jQuery焦点图</title>
<style>
/*样式格式化*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; }
fieldset, img { border: 0; }
img { display:inline-block; }

ol, ul { list-style: none outside none; }
#wrapper{ width:1000px;margin:auto;position:relative; }
.show_images_list_li {
position: absolute;
cursor: pointer;
vertical-align:bottom; display:block
}

#belt {display: block;height: 122px;left: 200px;line-height: 1000px;overflow: hidden;position: absolute;top: 1px;width: 149px;
background:url(features6.6/images/beltnew1.png) no-repeat; background:url(features6.6/images/images/beltnew.png) no-repeat\0; z-index:100;}

.btn { background:url(features6.6/images/btn.jpg) no-repeat; width:101px; height:25px; margin:auto; position:relative; padding-top:350px;}
.btn  a{width:17px; height:15px; overflow:none; display:block;background:url(features6.6/images/btn.jpg)  no-repeat; cursor: pointer;float:left;}
.btn  a.active{ background:url(features6.6/images/btn.jpg) -17px 0 no-repeat;}


</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	$(".btn").show();
	$(".btn  a:first").addClass("active");	
	$().gallery({
		current: [".show_images_1",".show_images_1_img"],
		left: [".show_images_2",".show_images_2_img"],
		right: [".show_images_3",".show_images_3_img"],
	none: [".show_images_4",".show_images_4_img"],
		duration: 500,
		start: function() {
			$(".header_text").fadeOut(150);
		},
		end: function() {
			$(".header_text").fadeIn(150);
		},
		autoChange : true,
		changeTimeout: 3000,
		stopTarget : ".header_stage"
	});
});
</script>
<link href="css/reset.css" type="text/css" rel="stylesheet" />
</head>
<body>
<br>
<div id="wrapper">
  <div id="maincontent">
    <div id="huadong">
      <ul class="show_images_list">
        <li class="show_images_list_li show_images_1" style="z-index: 15; top: 1px; left: 200px;"><a href="#" ><img  class="show_images_1_img" src="images/1.png" alt="" title="" style="width: 599px; height: 353px;"></a></li>
        <li class="show_images_list_li show_images_2" style="z-index: 10; top: 20px; left: 0px;"><a href="#" ><img class="show_images_2_img" src="images/4.png"alt="" title="" style="width: 527px; height: 310px;"></a></li>
        <li class="show_images_list_li show_images_3" style="z-index: 5; top: 20px; left: 459px;"><a href="#" ><img class="show_images_3_img" src="images/2.png" alt="" title="" style="width: 527px; height: 310px;"></a></li>
        <li class="show_images_list_li show_images_4" style="z-index: 0; top: 20px; left: 200px;"><a href="#" ><img class="show_images_4_img" src="images/3.png" alt="" title="" style="width: 527px; height: 310px;"></a></li>
      </ul>
      <script type="text/javascript" src="js/image_gallery.js"></script>
      <div class="header_text"  id="belt"></div>
    </div>
    <div class="btn"> <a class="btn1" rel="1" ></a> <a class="btn2" rel="2" ></a> <a class="btn3" rel="3" ></a> <a class="btn4" rel="4" ></a> </div>
  </div>
</div>
</body>
</html>

JS代码(image_gallery.js):

var time=new Date();
	time=time.getTime();
	var userAgent = navigator.userAgent.toLowerCase();
	jQuery.browser ={
	version:(userAgent.match( /.+(?:rv|it|ra|ie)[\/:]([\d.]+)/ ) || [0,'0'])[1],safari:/webkit/.test(userAgent),//opera:/opera/.test(userAgent),msie:/msie/.test(userAgent) && !/opera/.test(userAgent),//mozilla:/mozilla/.test(userAgent) && !/(compatible|webkit)/.test(userAgent),chrome:/chrome/.test(userAgent)}
;
	jQuery.easing['jswing'] = jQuery.easing['swing'];
	jQuery.fn.gallery = function(config){
	var _self = this;
	var defaults ={
}
;
	var opts = $.extend(defaults,config);
	var clickable = true;
	var changing = false;
	var interval;
	var no_click;
	var positions ={
	current:{
	zIndex:100,top:"1px",left:"200px"}
,left:{
	zIndex:50,top:"20px",left:"0"}
,right:{
	zIndex:25,top:"20px",left:"459px"}
,none:{
	zIndex:0,top:"20px",left:"200px"}
}
;
	var currentD ={
	width:"599px",height:"353px"}
;
	var backD ={
	width:"527px",height:"310px"}
;
	var $current ={
	li:$(config.current[0]),img:$(config.current[1])}
;
	var $left ={
	li:$(config.left[0]),img:$(config.left[1])}
;
	var $right ={
	li:$(config.right[0]),img:$(config.right[1])}
;
	var $none ={
	li:$(config.none[0]),img:$(config.none[1])}
;
	var go = function(target,jqueryCssJson,callback){
	setTimeout(function(){
	if(jqueryCssJson.zIndex){
	target.css("z-index",jqueryCssJson.zIndex+1);
}
}
,config.duration/4 * 2);
	setTimeout(function(){
	target.animate(jqueryCssJson,config.duration || 1000,callback);
}
,config.actionTime || 50);
}
;
	var setBlur = function(target){
	var src = target.img.attr("src");
	if(src.indexOf("blur") != -1){
	return;
}
src = src.substr(0,src.lastIndexOf("."));
	src+=".png"+"?version="+time;
	target.img.attr("src",src);
}
;
	var setClear = function(target){
	var src = target.img.attr("src");
	if(src.indexOf("blur") == -1){
	return;
}
src = src.substr(0,src.lastIndexOf("_"));
	src+=".jpg"+"?version="+time;
	target.img.attr("src",src);
}
;
	var toLeft = function(callback){
	$active = $('.btn a.active').next();
	if ( $active.length === 0){
	//If paging reaches the end...$active = $('.btn a:first');
	//go back to first //alert($active.length);
}
$(".btn a").removeClass('active');
	//Remove all active class $active.addClass('active');
	//Add active class (the $active is declared in the rotateSwitch function) if(!clickable) return;
	clickable = false;
	go($left.li,positions.none);
	go($none.li,positions.right);
	go($right.li,positions.current);
	go($current.li,positions.left);
	go($current.img,backD,function(){
	setBlur($current);
}
);
	go($left.img,backD,function(){
	setBlur($left);
}
);
	go($none.img,backD,function(){
	setBlur($none);
}
);
	go($right.img,currentD,function(){
	setClear($right);
	$temp = $none;
	$none = $left;
	$left = $current;
	$current = $right;
	$right = $temp;
	callback();
	clickable = true;
}
);
}
;
	var toRight = function(callback){
	$active1 = $('.btn a.active').prev();
	if ( $active1.length === 0){
	//If paging reaches the end... $active1 = $('.btn a:last');
	//go back to first}
$(".btn a").removeClass('active');
	//Remove all active class $active1.addClass('active');
	//Add active class (the $active is declared in the rotateSwitch function) if(!clickable) return;
	clickable = false;
	go($current.li,positions.right);
	go($right.li,positions.none);
	go($none.li,positions.left);
	go($left.li,positions.current);
	go($current.img,backD,function(){
	setBlur($current);
}
);
	go($right.img,backD,function(){
	setBlur($current);
}
);
	go($none.img,backD,function(){
	setBlur($current);
}
);
	go($left.img,currentD,function(){
	setClear($left);
	$temp = $current;
	$current = $left;
	$left = $none;
	$none = $right;
	$right = $temp;
	callback();
	clickable = true;
}
);
}
;
	var clearEvents = function(){
	$current.img.unbind("click");
	$left.img.unbind("click");
	$right.img.unbind("click");
	$none.img.unbind("click");
	$(".btn1").unbind("click");
	$(".btn2").unbind("click");
	$(".btn3").unbind("click");
	$(".btn4").unbind("click");
}
;
	function start(){
	interval = autoGo();
}
function is_start(){
	if(no_click){
	clearTimeout(no_click);
	no_click = setTimeout(start,1000);
}
else{
	no_click = setTimeout(start,1000);
}
}
var bindEvent = function(){
	$left.img.bind("click",function(){
	stopAutoGo();
	if(config.start){
	config.start();
}
clearEvents();
	toRight(function(){
	bindEvent();
}
);
	if(config.end){
	setTimeout(config.end,config.duration || 1000);
}
is_start();
}
);
	$right.img.bind("click",function(){
	stopAutoGo();
	if(config.start){
	config.start();
}
clearEvents();
	toLeft(function(){
	bindEvent();
}
);
	if(config.end){
	setTimeout(config.end,config.duration || 1000);
}
is_start();
}
)function Rightmove(){
	if(config.start){
	config.start();
}
toLeft(function(){
	clearEvents();
	// setTimeout(bindEvent,350);
	// bindEvent();
}
);
	if(config.end){
	setTimeout(config.end,2);
}
}
function Leftmove(){
	if(config.start){
	config.start();
}
toRight(function(){
	clearEvents();
	// setTimeout(bindEvent,350);
	// bindEvent();
}
);
	if(config.end){
	setTimeout(config.end,2);
}
}
function Rightmove1(){
	if(config.start){
	config.start();
}
toLeft(function(){
	clearEvents();
	// setTimeout(bindEvent,350);
	bindEvent();
}
);
	if(config.end){
	setTimeout(config.end,2);
}
is_start();
}
function Leftmove1(){
	if(config.start){
	config.start();
}
toRight(function(){
	clearEvents();
	// setTimeout(bindEvent,350);
	bindEvent();
}
);
	if(config.end){
	setTimeout(config.end,2);
}
is_start();
}
function is_bind(){
	if($(".btn2").data("events")["click"] ){
}
}
$(".btn1").bind("click",function(){
	stopAutoGo();
	//is_bind();
	$active = $('.btn a.active');
	var leg = $active.attr("rel")-1;
	if(leg==1){
	Leftmove1();
}
else if(leg==2){
	clearEvents();
	Leftmove();
	setTimeout(Leftmove1,700);
}
else if(leg ==3){
	Rightmove1();
}
}
)$(".btn2").bind("click",function(){
	stopAutoGo();
	$active = $('.btn a.active');
	var leg = $active.attr("rel");
	if(leg==3){
	Leftmove1();
}
else if(leg==4){
	clearEvents();
	Leftmove();
	setTimeout(Leftmove1,700);
}
else if(leg==1){
	Rightmove1();
}
}
)$(".btn3").bind("click",function(){
	stopAutoGo();
	$active = $('.btn a.active');
	var leg = $active.attr("rel");
	if(leg==2){
	Rightmove1();
}
else if(leg== 1){
	clearEvents();
	Rightmove();
	setTimeout(Rightmove1,700);
}
else if(leg ==4){
	Leftmove1();
}
}
)$(".btn4").bind("click",function(){
	stopAutoGo();
	$active = $('.btn a.active');
	var leg = $active.attr("rel");
	if(leg==3){
	Rightmove1();
}
else if(leg== 2){
	clearEvents();
	Rightmove();
	setTimeout(Rightmove1,700);
}
else if(leg == 1){
	Leftmove1();
}
}
)}
;
	bindEvent();
	var autoGo = function(callback){
	if(changing) return;
	changing = true;
	interval = setInterval(function(){
	if(config.start){
	config.start();
}
toLeft(function(){
	clearEvents();
	bindEvent();
}
);
	if(config.end){
	setTimeout(config.end,config.duration || 1000);
}
}
,config.changeTimeout || 3000);
	if(callback) callback();
	return interval;
}
;
	function stopAutoGo(){
	if(interval){
	clearInterval(interval);
}
$current.img.unbind("mouseover");
	changing = false;
}
if(config.autoChange){
	$(config.stopTarget).bind("mouseenter",function(e){
	stopAutoGo();
}
);
	$(config.stopTarget).bind("mouseleave",function(e){
	interval = autoGo();
}
);
	interval = autoGo();
}
}
;

CSS代码(reset.css):

 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
fieldset,img{border:0;}
img{display:inline-block;}
:focus{outline:0;}
address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:normal;font-weight:normal;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
abbr,acronym{border:0;font-variant:normal;}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}
code,kbd,samp,tt{font-size:100%;}
input,button,textarea,select{*font-size:100%;}
ol,ul{list-style:none outside none;}
table{border-collapse:collapse;border-spacing:0;}
sup,sub{font-size:100%;vertical-align:baseline;}
:link,:visited,ins{text-decoration:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
a{+A:expression(this.onFocus=this.blur());}
a:focus{outline:none;}
body{font-size:75%;font-family:Tahoma,Arial;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
432.17 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
432.17 KB
立即下载
方玉菲雁
了解
打赏作者 鼓励作者
Html 焦点滚动特效3
最新结算
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
打赏文章