<!---------------------------------------------HTML-------------------------------------------------------- >
<! DOCTYPE html>
<meta charset= "Utf-8" >
<metaname= "Viewport" content= "Width=device-width, initial-scale=1″/>
<title> Dynamic Full-screen width adaptive banner</title>
<link rel= "stylesheet" type= "Text/css" href= "Index.css" >
<script type= "Text/javascript" src= "Jquery-3.1.0.min.js" ></script>
<script src= "Index.js" type= "Text/javascript" ></script>
<body>
<div id= "All" >
<div id= "Mainscre" >
<ul id= "main" class= "ul" >
<li id= "IMG1" ></li>
<li id= "Img2" ></li>
<li id= "IMG3" ></li>
</ul>
</div>
<div class= "dir" >
<div id= "left" onclick= "Leftclick ()" >
<a href= "#" id= "LEFT1" ><</a>
</div>
<div id= "Right" onclick= "RightClick ()" >
<a href= "#" id= "right1" >></a>
</div>
</div>
</div>
<div class= "Dian" >
<a href= "#" mouseover= "Mouseon ()" >o</a><a href= "#" onclick= "Mouseon ()" >o</a><a href= "#" Onclick= "Mouseon ()" >o</a>
</div>
</div>
</body>
<!---------------------------------------------JS-------------------------------------------------------- >
$ (document). Ready (function () {
var Winwid = $ (window). width ();
$ (". UL li"). css (' width ', winwid);
$ ("#main"). CSS (' width ', winwid* ('. UL li '). Length) + ' px ');
Used for the dot operation to calculate the left value that the current page may be in for determination
var a = 0;
var B =-(WINWID);
var c =-(2*WINWID);
/*-----------------------------------------Turn left----------------------------------------------*/
Leftclick=function () {
var aleft = parseint ($ ("#main"). CSS (' left '));
var newl = aleft+ (winwid) + "px";
if (Aleft = = 0) {
$ ("Li:last"). InsertBefore ($ ("Li:first"));
var innewl = 0-winwid+ "px";
$ ("#main"). CSS (' left ', INNEWL);
$ ("#main"). Animate ({left:0}, "slow");
}else {
$ ("#main"). Animate ({LEFT:NEWL}, "slow");
}
}
/*-------------------------------------------Turn right--------------------------------------------*/
Rightclick=function () {
var aleft = parseint ($ ("#main"). CSS (' left '));
var newl = aleft-winwid+ "px";
var num = 0-($ (". UL li"). length-1) *winwid;
if (aleft = = num) {
$ ("Li:first"). InsertAfter ($ ("li:last"));
var innewl = 0-winwid+ "px";
$ ("#main"). CSS (' left ', INNEWL);
$ ("#main"). Animate ({Left:num}, "slow");
}else {
$ ("#main"). Animate ({LEFT:NEWL}, "slow");
}
}
/*---------------------------------------------Origin event------------------------------------------*/
$ (". Dian>a:first"). MouseOver (function () {
Cleartimeout (ATime);
var aleft = parseint ($ ("#main"). CSS (' left '));
if (Aleft = = a) {
Switch ($ ("Li:first"). attr ("id")) {
Case "IMG1": break;
Case "Img2": Leftclick ();
Case "IMG3": RightClick ();
}
}else if (aleft = = b) {
Leftclick ();
}else if (aleft = = c) {
Switch ($ ("Li:last"). attr ("id")) {
Case "IMG1": break;
Case "Img2": Leftclick ();
Case "IMG3": RightClick ();
}
}
});
$ (". Dian>a:eq (1)"). MouseOver (function () {
Cleartimeout (ATime);
var aleft = parseint ($ ("#main"). CSS (' left '));
if (Aleft = = a) {
Switch ($ ("Li:first"). attr ("id")) {
Case "IMG1": RightClick ();
Case "IMG2": break;
Case "IMG3": Leftclick ();
}
}else if (aleft = = b) {
Don't move
}else if (aleft = = c) {
Switch ($ ("Li:last"). attr ("id")) {
Case "IMG1": RightClick ();
Case "IMG2": break;
Case "IMG3": Leftclick ();
}
}
});
$ (". Dian>a:last"). MouseOver (function () {
Cleartimeout (ATime);
var aleft = parseint ($ ("#main"). CSS (' left '));
if (Aleft = = a) {
Switch ($ ("Li:first"). attr ("id")) {
Case "IMG1": Leftclick ();
Case "Img2": RightClick ();
Case "IMG3": break;
}
}else if (aleft = = b) {
RightClick ();
}else if (aleft = = c) {
Switch ($ ("Li:last"). attr ("id")) {
Case "IMG1": Leftclick ();
Case "Img2": RightClick ();
Case "IMG3": break;
}
}
});
$ (". Dian>a"). Mouseout (function () {
SetTimeout ("Timecount ()", 2000);
});
/*---------------------------------------------Action Event------------------------------------------*/
var aTime = SetTimeout ("Timecount ()", 2000);
Timecount=function () {
RightClick ();
ATime = SetTimeout ("Timecount ()", 2000);
}
});
<!---------------------------------------------CSS-------------------------------------------------------- >
*{
margin:0;
padding:0;
}
#all {
position:relative;
top:0;
left:0;
height:736px;
width:100%;
}
#mainscre {
position:relative;
top:0;
left:0;
Overflow:hidden;
}
. ul{
position:relative;
Float:left;
Width:auto;
left:0;
top:0;
List-style-type:none;
}
. UL li{
position:relative;
List-style:none;
Float:left;
}
. UL Li Img{
MARGIN:-1PX 0;
height:100%;
width:100%;
}
a{
Text-decoration:none;
Color: #ffffff;
Padding:0 10px;
}
a:hover{
Color:rgb (247,126,94);
}
. dir{
width:100%;
top:45%;
Position:absolute;
z-index:1000;
Float:left;
}
#left {
Float:left;
Font-size:4em;
left:5%;
width:60px;
height:60px;
opacity:0.3;
}
#right {
Float:right;
Font-size:4em;
right:5%;
width:60px;
height:60px;
opacity:0.3;
}
. dian{
Position:absolute;
width:100%;
right:0;
top:700px;
Text-align:center;
Font-size:1em;
opacity:0.7;
}
As a newcomer, just made a width adaptive banner also look at the nudge