JavaScript

超轻量级php框架startmvc

jquery实现自适应banner焦点图

更新时间:2020-04-23 21:10:01 作者:startmvc
效果如下:代码如下:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DT

效果如下:

代码如下:


<!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>jq自适应banner焦点图</title>
 <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.3.min.js"></script>
 <style>
 @charset "UTF-8";
 /*通用css*/
 body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input {
 margin: 0;
 padding: 0;
 -webkit-text-size-adjust: none;
 }
 h1, h2, h3, h4, h5, h6 {
 font-size: 12px;
 font-weight: normal;
 }
 body > div {
 margin: 0 auto;
 }
 div {
 text-align: left;
 }
 a img {
 border: 0;
 }
 body {
 color: #333;
 text-align: center;
 font: 12px "宋体";
 }
 ul, ol, li {
 list-style-type: none;
 vertical-align: 0;
 }
 a {
 outline-style: none;
 color: #535353;
 text-decoration: none;
 }
 a:hover {
 color: #D40000;
 text-decoration: none;
 }
 /*通用CSS结束,应用特效时,以上样式可删除*/
 /* 效果CSS开始 */
 .lit {
 position: absolute;
 z-index: 999;
 margin-top: 10px;
 }
 .lit p {
 margin-bottom: 2px;
 }
 .lit a:hover {
 filter: alpha(opacity=80);
 opacity: 0.8;
 }
 .wrapper {
 width: 986px;
 margin: 0 auto;
 position: relative;
 height: 390px;
 }
 #banner {
 width: 100%;
 height: 390px;
 background: none;
 overflow: hidden;
 position: relative;
 }
 #banner_img {
 display: block;
 position: relative;
 }
 #banner_img li {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 background-position: center;
 background-size: cover;
 display: none;
 }
 /*设置背景图片-------开始*/
 /*#banner_img li.item1 {
 background-image: url(http://smzdqiang.com/data/attachment/forum/201609/20/161359xzxwkl82k22d08r3.jpg);
 display: block;
 }
 #banner_img li.item2 {
 background-image: url(http://smzdqiang.com/data/attachment/forum/201609/20/161359viql2criqg5aw776.jpg);
 }
 #banner_img li.item3 {
 background-image: url(http://smzdqiang.com/data/attachment/forum/201609/20/161359eczultzb2c88mquq.jpg);
 }
 #banner_img li.item4 {
 background-image: url(http://smzdqiang.com/data/attachment/forum/201609/20/161400d3idxa6dfao84x1l.jpg);
 }
 #banner_img li.item6 {
 background-image: url(http://smzdqiang.com/data/attachment/forum/201609/20/161400eifr1ozgkikk99k1.jpg);
 }*/
 /*设置背景图片--------结束*/
 #banner_img .ad_img {
 position: absolute;
 right: 10px;
 top: 80px;
 width: 506px;
 height: 404px;
 }
 #banner_img .ad_txt {
 position: absolute;
 left: 10px;
 top: 170px;
 color: #fff;
 text-shadow: 1px 1px rgba(51, 51, 51, 0.3);
 }
 #banner_img .ad_txt h2 {
 font: bold 36px/60px Microsoft YaHei;
 }
 #banner_img .ad_txt a {
 display: block;
 width: 100px;
 height: 25px;
 line-height: 25px;
 text-align: center;
 margin-top: 10px;
 background: #fff;
 color: #666;
 }
 #banner_ctr {
 position: absolute;
 width: 960px;
 height: 122px;
 margin-left: -90px;
 left: 35%;
 bottom: -75px;
 z-index: 1;
 }
 #banner_ctr ul {
 width: 100%;
 }
 #banner_ctr li {
 float: left;
 display: inline-block;
 height: 27px;
 text-align: center;
 vertical-align: middle;
 cursor: pointer;
 }
 .styclsa {
 line-height: 27px;
 background: url(http://smzdqiang.com/data/attachment/forum/201609/20/161609g5xjijj1x5lgiq4j.png) no-repeat;
 height: 27px;
 color: #ffffff;
 font-size: 12.48px;
 padding: 0px 0px 0 0px;
 width: 119px;
 margin: 0 auto;
 overflow: hidden;
 font-family: "宋体";
 zoom: 1;
 }

 .astysa {
 color: #ffffff;
 font-size: 12.48px;
 text-align: center;
 }

 #drag_ctr {
 position: absolute;
 top: -5px;
 cursor: pointer;
 left: 0px;
 width: 119px;
 height: 32px;
 bottom: 120px;
 background: url(http://smzdqiang.com/data/attachment/forum/201609/20/161611aooapbzu0da7oand.png) no-repeat;
 padding: 0px 0px 0 0px;
 margin: 0 auto;
 overflow: hidden;
 color: #fff;
 filter: alpha(opacity=50);
 color: #ffffff;
 }
 /* 效果CSS结束 */
 </style>
 <script>
 $(function () {
 var curIndex = 0;
 var time = 800;
 var slideTime = 6000;
 var adTxt = $("#banner_img>li>div>.ad_txt");
 var adImg = $("#banner_img>li>div>.ad_img");
 var int = setInterval("autoSlide()", slideTime);
 $("#banner_ctr>ul>li[class!='first-item'][class!='last-item']").mouseover(function () {
 var ct = $(this).index("#banner_ctr>ul>li[class!='first-item'][class!='last-item']");
 if (ct == 1 || ct == 0) {
 ct = 0;
 }
 if (ct == 2 || ct == 3) {
 ct = 1;
 }
 if (ct == 5 || ct == 4) {
 ct = 2;
 }
 if (ct == 6 || ct == 7) {
 ct = 3;
 }
 if (ct == 8 || ct == 9) {
 ct = 4;
 }
 if (ct < 0) {
 ct = 0;
 }
 show(ct);
 window.clearInterval(int);
 int = setInterval("autoSlide(1)", slideTime);
 });
 function autoSlide(ct) {
 curIndex + 1 >= 5 ? curIndex = -1 : 0;
 show(curIndex + 1);
 }
 function show(index) {
 $.easing.def = "easeOutQuad";
 $("#drag_ctr").stop(false, true).animate({ left: index * 120 + 0 }, time);
 $("#banner_img>li").eq(curIndex).stop(false, true).fadeOut(time);
 adTxt.eq(curIndex).stop(false, true).animate({ top: "340px" }, time);
 adImg.eq(curIndex).stop(false, true).animate({ right: "700px" }, time);
 setTimeout(function () {
 $("#banner_img>li").eq(index).stop(false, true).fadeIn(time);
 adTxt.eq(index).children("p").css({ paddingTop: "50px", paddingBottom: "50px" }).stop(false, true).animate({ paddingTop: "0", paddingBottom: "0" }, time);
 adTxt.eq(index).css({ top: "0", opacity: "0" }).stop(false, true).animate({ top: "170px", opacity: "1" }, time);

 adImg.eq(index).css({ right: "700px", opacity: "0" }).stop(false, true).animate({ right: "500px", opacity: "1" }, time);
 }, 200)

 curIndex = index;
 }
 });

 </script>
</head>
<body>
<!--效果html开始-->
<div style="margin: 0px auto; width:1200px; padding:0px; ">
 <div class="lit">
 <p><a href="http://smzdqiang.com/quan/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><img src="http://smzdqiang.com/data/attachment/forum/201609/20/162016tenownjn8wse6n8n.jpg" border="0" /></a></p>
 <p><a href="http://www.smzdqiang.com/" rel="external nofollow" target="_blank"><img src="http://smzdqiang.com/data/attachment/forum/201609/20/162016tenownjn8wse6n8n.jpg" border="0" /></a></p>
 <p><a href="http://smzdqiang.com/dataoke/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><img src="http://smzdqiang.com/data/attachment/forum/201609/20/162016tenownjn8wse6n8n.jpg" border="0" /></a></p>
 </div>
</div>
<div id="banner">
 <ul id="banner_img">
 <li class="item1" style="display: list-item;"><a href="http://smzdqiang.com/quan/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><img src="http://smzdqiang.com/data/attachment/forum/201609/20/161359xzxwkl82k22d08r3.jpg" border="0" /></a></li>
 <li class="item2"><a href="http://smzdqiang.com/dataoke/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><img src="http://smzdqiang.com/data/attachment/forum/201609/20/161359viql2criqg5aw776.jpg" border="0" /></a></li>
 <li class="item3"><a href="http://smzdqiang.com/quan/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><img src="http://smzdqiang.com/data/attachment/forum/201609/20/161359eczultzb2c88mquq.jpg" /></a></li>
 <li class="item4"><a href="http://smzdqiang.com/dataoke/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><img src="http://smzdqiang.com/data/attachment/forum/201609/20/161400d3idxa6dfao84x1l.jpg" /></a></li>
 <li class="item6"><a href="http://smzdqiang.com/dataoke/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><img src="http://smzdqiang.com/data/attachment/forum/201609/20/161400eifr1ozgkikk99k1.jpg" /></a></li>
 </ul>
 <div id="banner_ctr">
 <div id="drag_ctr">
 </div>
 <ul>
 <li style="width:0px;"></li>
 <li class="styclsa"><a href="http://smzdqiang.com/dataoke/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank" class="astysa">活动标题1</a></li>
 <li style="width:1px;"></li>
 <li class="styclsa"><a href="http://smzdqiang.com/dataoke/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank" class="astysa">活动标题2</a></li>
 <li style="width:1px;"></li>
 <li class="styclsa"><a href="http://smzdqiang.com/quan/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank" class="astysa">活动标题3</a></li>
 <li style="width:1px;"></li>
 <li class="styclsa"><a href="http://smzdqiang.com/quan/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank" class="astysa">活动标题4</a></li>
 <li style="width:1px;"></li>
 <li class="styclsa"><a href="http://smzdqiang.com/quan/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank" class="astysa">活动标题5</a></li>
 </ul>
 </div>
</div>
<!--效果html结束-->
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

jquery 焦点图 jquery自适应焦点图 自适应banner轮播