English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
The effect is as follows:
The code is as follows:
<!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 responsive banner focus image</title>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.3.min.js"></script>
<style>
@charset "UTF-8";
/*General 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 "Songti";
}
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;
}
/*General CSS ends, the above styles can be deleted when applying effects*/
/* Effect CSS starts */
.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;
}
/*Set background image-------Start*/
/*#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);
}*/
/*Set background image--------End*/
#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: "Songti";
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;
}
/* Effect CSS ends */
</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: ""5"0px", 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">//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">//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">//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">//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">Activity Title1</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">Activity Title2</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">Activity Title3</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">Activity Title4</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">Activity Title5</a></li>
</ul>
</div>
</div>
<!--Effect ends with html-->
</body>
</html>
This is the full content of this article. I hope the content of this article can bring a certain amount of help to everyone's learning or work, and I also hope to support the呐喊 tutorial more!
Declaration: The content of this article is from the network, the copyright belongs to the original author, the content is contributed and uploaded by Internet users spontaneously, this website does not own the copyright, has not been manually edited, and does not assume relevant legal responsibility. If you find any content suspected of copyright infringement, please send an email to: notice#w3Please report by email to codebox.com (replace # with @ when sending an email) and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.