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

jQuery+CSS3自动轮播焦点图代码

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

以下是 jQuery+CSS3自动轮播焦点图代码 的示例演示效果:

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

部分效果截图:

jQuery+CSS3自动轮播焦点图代码

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery+CSS3自动轮播焦点图</title>
<link type="text/css" href="css/css.css" rel="stylesheet">
</head>
<body>
<br>
<div class="banner">
  <ul class="list">
    <li style="display: list-item;" class="bg2">
      <a href="#" target="_blank">
      <img src="images/bannerImg2.jpg" alt="" height="408" width="980">
      <p class="text1"><img src="images/banner2-1.png" alt="" height="511" width="543"></p>
      <p class="text2"><img src="images/banner2-2.png" alt="" height="511" width="543"></p>
      <p class="text3"><img src="images/banner2-3.png" alt="" height="164" width="401"></p>
      <p class="text4"><img src="images/banner2-4.png" alt="" height="72" width="144"></p>
      <p class="text5"><img src="images/banner2-5.png" alt="" height="66" width="378"></p>
      <p class="text6"><img src="images/banner2-6.png" alt="" height="33" width="321"></p>
      <p class="text7"><img src="images/banner2-7.png" alt="" width="390"></p>
      </a>
    </li>
    <li style="display: none;" class="bg4">
      <a href="#" target="_blank">
      <img src="images/bannerImg4.jpg" alt="" height="408" width="980">
      <p class="text1">我想</p>
      <p class="text2"><img src="images/banner4-1.png" alt="" height="18" width="66"></p>
      <p class="text3"><img src="images/banner4-4.png" alt="" height="94" width="167"></p>
      <p class="text4"><img src="images/banner4-6.png" alt="" height="106" width="432"></p>
      <p class="text5"><img src="images/banner4-5.png" alt="" height="57" width="237"></p>
      <p class="text6"><img src="images/banner4-2.png" alt="" height="62" width="304"></p>
      <p class="text7"><img src="images/banner4-3.png" alt="" height="240" width="197"></p>
      </a>
    </li>
    <li style="display: none;" class="bg3">
      <a href="#" target="_blank">
      <p class="text1"><img src="images/banner3-1.png" alt="" height="59" width="980"></p>
      <p class="text2-1"><img src="images/banner3-2-1.png" alt="" height="277" width="359"></p>
      <p class="text2-2"><img src="images/banner3-2-2.png" alt="" height="408" width="437"></p>
      <p class="text3"><img src="images/banner3-3.png" alt="" height="408" width="871"></p>
      <p class="text4">选择资海，选择品质</p>
      <p class="text5"><img src="images/banner3-4.png" alt="" height="44" width="782"></p>
      <p class="text6">优秀的销售团队</p>
      <p class="text7">雄厚的技术团队</p>
      <p class="text8">贴心的客户服务</p>
      </a>
    </li>
    <li style="display: none;" class="bg1">
      <a href="#" target="_blank">
      <img src="images/1383531804.jpg" alt="" height="408" width="980">
      <p class="text1 hover"><img src="images/1383539870.png" alt="" height="228" width="219"></p>
      <p class="text2 hover"><img src="images/1383535692.png" alt="" height="53" width="423"></p>
      <p class="text3 hover"><img src="images/1383533951.png" alt="" height="25" width="286"></p>
      </a>
    </li>
  </ul>
  <ul class="btn"></ul>
</div>
<script type="text/javascript" src="js/jquery-1.js"></script> 
<script type="text/javascript" src="js/focus.js"></script> 
</body>
</html>

JS代码(focus.js):

// JavaScript Document$(function(){
	function banner(){
	var index = 1;
	var len = $(".banner .list li").length;
	var time;
	for(i=1;
	i<=len;
	i++){
	var Obtn = $("<li>"+i+"</li>").appendTo($(".banner .btn"));
}
$(".banner .btn li").eq(0).addClass('hover');
	$(".banner .list li").eq(0).css("z-index","1");
	$(".banner .btn li").mouseover(function(){
	index = $(".banner .btn li").index(this);
	show(index);
}
)time = setInterval(function(){
	show(index);
	index++;
	if(index==len){
	index = 0}
}
,5000);
	function show(index){
	$(".banner .list li p").removeClass('hover');
	$(".banner .list li").eq(index).find("p").addClass('hover');
	$(".banner .btn li").eq(index).addClass('hover').siblings("li").removeClass('hover');
	$(".banner .list li").eq(index).fadeIn(900).siblings("li").fadeOut(600);
}
}
banner();
}
)

CSS代码(css.css):

@charset "utf-8";/* CSS Document */
body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dd,dt,img,form{padding:0px;margin:0px;border:0;font-size:12px;}
h1,h2,h3,h4,h5,h6{font-size:12px;font-weight:100;}
select{padding:0px;margin:0px;overflow:scroll;}
td,tr,td{font-size:12px;}
ul,ol li{list-style:none;}
input{padding:0px;margin:0px;}
.left{float:left;}
.right{float:right;}
.clear{clear:both;font-size:0px;height:0px;overflow:hidden;}
a:link,a:visited{text-decoration:none;}
a:hover{text-decoration:underline;}
a:focus{outline:none;}
a{text-decoration:none;blr:expression(this.onFocus=this.blur());}
a{outline:none;}
/*骞垮憡*/
.banner{width:100%;height:408px;position:relative;}
.banner .list{width:100%;height:408px;overflow:hidden;position:relative;z-index:1;}
.banner .list li{width:100%;height:408px;position:absolute;left:0px;top:0px;display:none;}
.banner .list li a{width:980px;margin:0 auto;position:relative;display:block;overflow:hidden;height:408px;}
.banner .list li a:hover{text-decoration:none;}
.banner .list li.bg1{background:#2398f8;}
.banner .list li.bg1 a .text1{width:200px;left:180px;height:200px;top:60px;position:absolute;z-index:3;}
.banner .list li.bg1 a .text1.hover{animation:img1 1s ease-out;-webkit-animation:img1 1s ease-out;}
.banner .list li.bg1 a .text2{right:90px;top:95px;position:absolute;z-index:3;width:423px;}
.banner .list li.bg1 a .text2.hover{animation:img2 0.7s ease-out;-webkit-animation:img2 0.7s ease-out;}
.banner .list li.bg1 a .text3{right:220px;width:286px;top:165px;position:absolute;z-index:3;}
.banner .list li.bg1 a .text3.hover{animation:img3 1s ease-out;-webkit-animation:img3 1s ease-out;}
.banner .btn{position:absolute;top:20px;left:50%;margin-left:340px;z-index:100;}
.banner .btn li{margin-left:12px;background:#fff;text-indent:-999em;float:left;width:14px;height:14px;cursor:pointer;border-radius:50%;}
.banner .btn li.hover{background:#FC3;}
@keyframes img1{0%{left:-200px;transform:rotate(-180deg);}
100%{left:180px;transform:rotate(0deg);}
}
@-webkit-keyframes img1{0%{left:-200px;-webkit-transform:rotate(-180deg);}
100%{left:180px;-webkit-transform:rotate(0deg);}
}
@keyframes img2{0%{right:-350px;opacity:0.3;}
100%{right:90px;opacity:1;}
}
@-webkit-keyframes img2{0%{right:-350px;opacity:0.3;}
100%{right:90px;opacity:1;}
}
@keyframes img3{0%{right:-350px;opacity:0.3;}
100%{right:220px;opacity:1;}
}
@-webkit-keyframes img3{0%{right:-350px;opacity:0.3;}
100%{right:220px;opacity:1;}
}
.banner .list li.bg2{background:#0ecbc9;}
.banner .list li.bg2 .text1{position:absolute;left:22px;top:-15px;}
.banner .list li.bg2 .text1.hover{animation:img2_1 1.5s ease;-webkit-animation:img2_1 1.5s ease;}
.banner .list li.bg2 .text2{position:absolute;left:0;top:-20px;}
.banner .list li.bg2 .text2.hover{animation:img2_2 2s ease;-webkit-animation:img2_2 2s ease;}
.banner .list li.bg2 .text3{position:absolute;left:20px;top:90px;}
.banner .list li.bg2 .text3.hover{animation:img2_3 1.2s ease-out;-webkit-animation:img2_3 1.2s ease-out;}
.banner .list li.bg2 .text4{position:absolute;left:262px;top:253px;transform:scale(1);-webkit-transform:scale(1);}
.banner .list li.bg2 .text4.hover{animation:img2_4 1.7s ease-out;-webkit-animation:img2_4 1.7s ease-out;}
.banner .list li.bg2 .text5{position:absolute;right:48px;top:95px;}
.banner .list li.bg2 .text5.hover{animation:img2_5 1.5s ease-out;-webkit-animation:img2_5 1.5s ease-out;}
.banner .list li.bg2 .text6{position:absolute;right:90px;top:180px;}
.banner .list li.bg2 .text6.hover{animation:img2_6 1.8s ease-out;-webkit-animation:img2_6 1.8s ease-out;}
.banner .list li.bg2 .text7{position:absolute;right:28px;top:235px;}
.banner .list li.bg2 .text7.hover{animation:img2_7 2s ease-out;-webkit-animation:img2_7 2s ease-out;}
@keyframes img2_1{0%{transform:rotate(150deg);}
100%{transform:rotate(0deg);}
}
@-webkit-keyframes img2_1{0%{-webkit-transform:rotate(150deg);}
100%{-webkit-transform:rotate(0deg);}
}
@keyframes img2_2{0%{transform:rotate(280deg);}
100%{transform:rotate(0deg);}
}
@-webkit-keyframes img2_2{0%{-webkit-transform:rotate(280deg);}
100%{-webkit-transform:rotate(0deg);}
}
@keyframes img2_3{20%{transform:rotateY(180deg);left:-500px;}
90%{transform:rotateY(0deg);left:20px;}
92%{top:85px;}
94%{top:95px;}
96%{top:83px;}
98%{top:97px;}
100%{top:90px;}
}
@-webkit-keyframes img2_3{20%{-webkit-transform:rotateY(180deg);left:-500px;}
90%{-webkit-transform:rotateY(0deg);left:20px;}
92%{top:85px;}
94%{top:95px;}
96%{top:83px;}
98%{top:97px;}
100%{top:90px;}
}
@keyframes img2_4{0%{transform:scale(0);}
40%{transform:scale(0);}
100%{transform:scale(1);}
}
@-webkit-keyframes img2_4{0%{-webkit-transform:scale(0);}
40%{-webkit-transform:scale(0);}
100%{-webkit-transform:scale(1);}
}
@keyframes img2_5{0%{right:-400px;}
50%{right:-400px;opacity:0.3;}
100%{right:48px;opacity:1;}
}
@-webkit-keyframes img2_5{0%{right:-400px;}
50%{right:-400px;opacity:0.3;}
100%{right:48px;opacity:1;}
}
@keyframes img2_6{0%{right:-400px;}
50%{right:-400px;opacity:0.3;}
100%{right:90px;opacity:1;}
}
@-webkit-keyframes img2_6{0%{right:-400px;}
50%{right:-400px;opacity:0.3;}
100%{right:90px;opacity:1;}
}
@keyframes img2_7{0%{right:-400px;}
50%{right:-400px;opacity:0.3;}
100%{right:28px;opacity:1;}
}
@-webkit-keyframes img2_7{0%{right:-400px;}
50%{right:-400px;opacity:0.3;}
100%{right:28px;opacity:1;}
}
.banner .list li.bg3{background:#ffc028;}
.banner .list li.bg3 .text1{position:absolute;left:0px;top:85px;z-index:10;}
.banner .list li.bg3 .text2-1{position:absolute;left:32px;top:131px;}
.banner .list li.bg3 .text2-2{position:absolute;left:389px;top:0px;}
.banner .list li.bg3 .text3{position:absolute;left:106px;top:0px;}
.banner .list li.bg3 .text4{position:absolute;left:345px;top:162px;font-size:30px;color:#fff;text-align:center;}
.banner .list li.bg3 .text5{position:absolute;left:99px;top:218px;}
.banner .list li.bg3 .text6{position:absolute;left:130px;top:220px;font-size:30px;color:#e9dcff;text-align:center;}
.banner .list li.bg3 .text7{position:absolute;left:386px;top:220px;font-size:30px;color:#e9dcff;text-align:center;}
.banner .list li.bg3 .text8{position:absolute;left:640px;top:220px;font-size:30px;color:#e9dcff;text-align:center;}
.banner .list li.bg3 .text1.hover{animation:img3_1 1s ease;-webkit-animation:img3_1 1s ease;}
.banner .list li.bg3 .text2-1.hover{transform-origin:right bottom;-webkit-transform-origin:right bottom;animation:img3_2-1 30s linear;-webkit-animation:img3_2-1 30s linear;}
.banner .list li.bg3 .text2-2.hover{transform-origin:left bottom;-webkit-transform-origin:left bottom;animation:img3_2-2 30s linear;-webkit-animation:img3_2-2 30s linear;}
.banner .list li.bg3 .text4.hover{animation:img3_4 1.5s ease;-webkit-animation:img3_4 1.5s ease;}
.banner .list li.bg3 .text6.hover{animation:img3_6 0.7s ease;-webkit-animation:img3_6 0.7s ease;}
.banner .list li.bg3 .text7.hover{animation:img3_7 0.7s ease;-webkit-animation:img3_7 0.7s ease;}
.banner .list li.bg3 .text8.hover{animation:img3_8 0.7s ease;-webkit-animation:img3_8 0.7s ease;}
@keyframes img3_1{0%{top:-100px;}
50%{top:-80px;}
100%{top:85px;}
}
@-webkit-keyframes img3_1{0%{top:-100px;}
50%{top:-80px;}
100%{top:85px;}
}
@keyframes img3_2-1{0%{transform:rotate(-20deg);}
10%{transform:rotate(100deg);}
20%{transform:rotate(-20deg);}
30%{transform:rotate(100deg);}
40%{transform:rotate(-20deg);}
50%{transform:rotate(100deg);}
60%{transform:rotate(-20deg);}
70%{transform:rotate(100deg);}
80%{transform:rotate(-20deg);}
90%{transform:rotate(100deg);}
100%{transform:rotate(0deg);}
}
@-webkit-keyframes img3_2-1{0%{-webkit-transform:rotate(-20deg);}
10%{-webkit-transform:rotate(100deg);}
20%{-webkit-transform:rotate(-20deg);}
30%{-webkit-transform:rotate(100deg);}
40%{-webkit-transform:rotate(-20deg);}
50%{-webkit-transform:rotate(100deg);}
60%{-webkit-transform:rotate(-20deg);}
70%{-webkit-transform:rotate(100deg);}
80%{-webkit-transform:rotate(-20deg);}
90%{-webkit-transform:rotate(100deg);}
100%{-webkit-transform:rotate(0deg);}
}
@keyframes img3_2-2{0%{transform:rotate(10deg);}
10%{transform:rotate(-100deg);}
20%{transform:rotate(10deg);}
30%{transform:rotate(-100deg);}
40%{transform:rotate(10deg);}
50%{transform:rotate(-100deg);}
60%{transform:rotate(10deg);}
70%{transform:rotate(-100deg);}
80%{transform:rotate(10deg);}
90%{transform:rotate(-100deg);}
100%{transform:rotate(0deg);}
}
@-webkit-keyframes img3_2-2{0%{-webkit-transform:rotate(10deg);}
10%{-webkit-transform:rotate(-100deg);}
20%{-webkit-transform:rotate(10deg);}
30%{-webkit-transform:rotate(-100deg);}
40%{-webkit-transform:rotate(10deg);}
50%{-webkit-transform:rotate(-100deg);}
60%{-webkit-transform:rotate(10deg);}
70%{-webkit-transform:rotate(-100deg);}
80%{-webkit-transform:rotate(10deg);}
90%{-webkit-transform:rotate(-100deg);}
100%{-webkit-transform:rotate(0deg);}
}
@keyframes img3_4{0%{opacity:0;transform:scale(0);}
30%{opacity:0;transform:scale(0);}
80%{opacity:0.7;transform:scale(1.2);}
100%{opacity:1;transform:scale(1);}
}
@-webkit-keyframes img3_4{0%{opacity:0;-webkit-transform:scale(0);}
30%{opacity:0;-webkit-transform:scale(0);}
80%{opacity:0.7;-webkit-transform:scale(1.2);}
100%{opacity:1;-webkit-transform:scale(1);}
}
@keyframes img3_6{0%{left:-210px;}
100%{left:130px;}
}
@-webkit-keyframes img3_6{0%{left:-210px;}
100%{left:130px;}
}
@keyframes img3_7{0%{opacity:0;transform:scale(4);}
100%{opacity:1;transform:scale(1);}
}
@-webkit-keyframes img3_7{0%{opacity:0;-webkit-transform:scale(4);}
100%{opacity:1;-webkit-transform:scale(1);}
}
@keyframes img3_8{0%{right:-210px;}
100%{right:130px;}
}
@-webkit-keyframes img3_8{0%{right:-210px;}
100%{right:130px;}
}
.banner .list li.bg4{background:#ff7575;}
.banner .list li.bg4 .text1{position:absolute;left:250px;top:45px;font-size:69px;color:#ffe9e9;}
.banner .list li.bg4 .text2{overflow:hidden;width:66px;position:absolute;left:251px;top:137px;}
.banner .list li.bg4 .text3{opacity:0;position:absolute;left:485px;top:55px;}
.banner .list li.bg4 .text4{opacity:0;transform-origin:left bottom;-webkit-transform-origin:left bottom;position:absolute;left:500px;top:105px;}
.banner .list li.bg4 .text5{opacity:0;position:absolute;left:508px;top:192px;}
.banner .list li.bg4 .text6{opacity:0;transform-origin:left bottom;-webkit-transform-origin:left bottom;position:absolute;left:510px;top:230px;}
.banner .list li.bg4 .text7{position:absolute;left:5px;bottom:40px;}
.banner .list li.bg4 .text3.hover{animation:img4_3 1s 0.5s ease forwards;-webkit-animation:img4_3 1s 0.5s ease forwards;}
.banner .list li.bg4 .text4.hover{animation:img4_4 1.2s 0.5s ease forwards;-webkit-animation:img4_4 1.2s 0.5s ease forwards;}
.banner .list li.bg4 .text5.hover{animation:img4_5 1.5s 0.5s ease forwards;-webkit-animation:img4_5 1.5s 0.5s ease forwards;}
.banner .list li.bg4 .text6.hover{animation:img4_6 0.3s 1.5s ease-out forwards;-webkit-animation:img4_6 0.3s 1.5s ease-out forwards;}
.banner .list li.bg4 .text7.hover{animation:img4_7 0.8s ease-in;-webkit-animation:img4_7 0.8s ease-in;}
@keyframes img4_3{0%{top:-100px;opacity:0;}
100%{top:50px;opacity:1;}
}
@-webkit-keyframes img4_3{0%{top:-100px;opacity:0;}
100%{top:50px;opacity:1;}
}
@keyframes img4_4{0%{transform:scale(0);}
100%{transform:scale(1);opacity:1;}
}
@-webkit-keyframes img4_4{0%{-webkit-transform:scale(0);}
100%{-webkit-transform:scale(1);opacity:1;}
}
@keyframes img4_5{0%{transform:scale(0);}
100%{transform:scale(1);opacity:1;}
}
@-webkit-keyframes img4_5{0%{-webkit-transform:scale(0);}
100%{-webkit-transform:scale(1);opacity:1;}
}
@keyframes img4_6{0%{transform:rotate(30deg);opacity:0;}
100%{transform:rotate(0deg);opacity:1;}
}
@-webkit-keyframes img4_6{0%{-webkit-transform:rotate(30deg);opacity:0;}
100%{-webkit-transform:rotate(0deg);opacity:1;}
}
@keyframes img4_7{0%{bottom:-300px;opacity:0;}
100%{bottom:40px;opacity:1;}
}
@-webkit-keyframes img4_7{0%{bottom:-300px;opacity:0;}
100%{bottom:40px;opacity:1;}
}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
365.19 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
365.19 KB
立即下载
盛茗
了解
打赏作者 鼓励作者
Html 动画效果1
最新结算
股权转让协议意向书模板
类型: .docx 金额: CNY 2.23￥ 状态: 待结算 详细>
股权转让协议意向书模板
类型: .docx 金额: CNY 0.28￥ 状态: 待结算 详细>
CSS3图片向上3D翻转渐隐消失特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3图片向上3D翻转渐隐消失特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
.net c# 将金额转人名币大写金额
类型: .rar 金额: CNY 2.39￥ 状态: 待结算 详细>
.net c# 将金额转人名币大写金额
类型: .rar 金额: CNY 0.3￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 2.23￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 0.28￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 2.23￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 0.28￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章