jquery實(shí)現(xiàn)自適應(yīng)banner焦點(diǎn)圖
更新時(shí)間：2017年02月16日 15:54:08 作者：jenn89
本文主要分享了jquery實(shí)現(xiàn)自適應(yīng)banner焦點(diǎn)圖的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
效果如下：
代碼如下：
<!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自適應(yīng)banner焦點(diǎn)圖</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結(jié)束，應(yīng)用特效時(shí)，以上樣式可刪除*/
/* 效果CSS開(kāi)始 */
.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;
}
/*設(shè)置背景圖片-------開(kāi)始*/
/*#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);
}*/
/*設(shè)置背景圖片--------結(jié)束*/
#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結(jié)束 */
</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開(kāi)始-->
<div style="margin: 0px auto; width:1200px; padding:0px; ">
<div class="lit">
<p><a 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 rel="external nofollow" target="_blank"><img src="http://smzdqiang.com/data/attachment/forum/201609/20/162016tenownjn8wse6n8n.jpg" border="0" /></a></p>
<p><a 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 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 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 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 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 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 rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank" class="astysa">活動(dòng)標(biāo)題1</a></li>
<li style="width:1px;"></li>
<li class="styclsa"><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank" class="astysa">活動(dòng)標(biāo)題2</a></li>
<li style="width:1px;"></li>
<li class="styclsa"><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank" class="astysa">活動(dòng)標(biāo)題3</a></li>
<li style="width:1px;"></li>
<li class="styclsa"><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank" class="astysa">活動(dòng)標(biāo)題4</a></li>
<li style="width:1px;"></li>
<li class="styclsa"><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank" class="astysa">活動(dòng)標(biāo)題5</a></li>
</ul>
</div>
</div>
<!--效果html結(jié)束-->
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)的自適應(yīng)焦點(diǎn)圖效果完整實(shí)例
- jQuery焦點(diǎn)圖左右轉(zhuǎn)換效果
- 輕量級(jí)jQuery插件slideBox實(shí)現(xiàn)帶底欄輪播(焦點(diǎn)圖)代碼
- 基于JQuery實(shí)現(xiàn)圖片輪播效果(焦點(diǎn)圖)
- jQuery插件實(shí)現(xiàn)帶圓點(diǎn)的焦點(diǎn)圖片輪播切換
- 基于Jquery實(shí)現(xiàn)焦點(diǎn)圖淡出淡入效果
- jQuery右側(cè)選項(xiàng)卡焦點(diǎn)圖片輪播特效代碼分享
- jQuery插件bxSlider實(shí)現(xiàn)響應(yīng)式焦點(diǎn)圖
- jQuery焦點(diǎn)圖輪播效果實(shí)現(xiàn)方法
- 基于jquery實(shí)現(xiàn)輪播焦點(diǎn)圖插件
相關(guān)文章
jQuery扁平化風(fēng)格下拉框美化插件FancySelect使用指南
這篇文章主要介紹了jQuery扁平化風(fēng)格下拉框美化插件FancySelect使用指南,需要的朋友可以參考下2015-02-02
jQuery動(dòng)態(tài)創(chuàng)建元素以及追加節(jié)點(diǎn)的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇jQuery動(dòng)態(tài)創(chuàng)建元素以及追加節(jié)點(diǎn)的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
本文為大家介紹下使用JQuery實(shí)現(xiàn)在頁(yè)面中添加和除移DOM主要使用了以下幾個(gè)方法，感興趣的朋友可以了解下哈，希望對(duì)大家有所幫助2013-06-06
這篇文章主要介紹了jQuery制作效果超棒的手風(fēng)琴折疊菜單的效果，這里推薦給大家，有需要的小伙伴可以參考下2015-04-04
jQuery學(xué)習(xí)筆記之jQuery的動(dòng)畫(huà)
jQuery學(xué)習(xí)筆記之jQuery的動(dòng)畫(huà)，需要的朋友可以參考下。2010-12-12
批量修改標(biāo)簽css樣式以input標(biāo)簽為例
本節(jié)主要介紹了jquery如何批量修改標(biāo)簽css樣式以input標(biāo)簽為例,需要的朋友可以參考下2014-07-07
分析了一下JQuery中的extend方法實(shí)現(xiàn)原理
這篇文章主要介紹了通過(guò)jQuery.extend的源碼分析了一下JQuery中的extend方法實(shí)現(xiàn)原理以及使用方式，非常的詳細(xì)，這里推薦給大家，有需要的小伙伴來(lái)參考下吧。2015-02-02
網(wǎng)格系統(tǒng)的實(shí)現(xiàn)原理，是通過(guò)定義容器大小，平分12份(也有平分成24份或32份，但12份是最常見(jiàn)的)，再調(diào)整內(nèi)外邊距，最后結(jié)合媒體查詢(xún)，就制作出了強(qiáng)大的響應(yīng)式網(wǎng)格系統(tǒng)2017-03-03
使用jQuery實(shí)現(xiàn)驗(yàn)證上傳圖片的格式與大小
在項(xiàng)目中，我們經(jīng)常要遇到上傳圖片，這就需要我們必須要驗(yàn)證圖片的格式與大小，那么如何來(lái)操作呢，今天就給大家分享一個(gè)非常簡(jiǎn)單的jQuery驗(yàn)證上傳圖片的格式與大小的代碼。2014-12-12
jQuery的開(kāi)發(fā)速度很快，幾乎每半年一個(gè)大版本，每?jī)蓚€(gè)月一個(gè)小版本。每個(gè)版本都會(huì)引入一些新功能。今天我想介紹的，就是從jQuery 1.5.0版本開(kāi)始引入的一個(gè)新功能----deferred對(duì)象。2011-08-08