标签：
<!---------------------------------------------html-------------------------------------------------------->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<metaname=”viewport”content=”width=device-width, initial-scale=1″ />
<title>动态全屏宽度自适应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>
</head>
<body>
<div id="all">
<div id="mainscre">
<ul id="main" class="ul">
<li id="img1"><img src="img/1.jpg"></li>
<li id="img2"><img src="img/2.jpg"></li>
<li id="img3"><img src="img/3.jpg"></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>
</html>
<!---------------------------------------------js-------------------------------------------------------->
$(document).ready(function(){
var winWid = $(window).width();
$(".ul li").css(‘width‘,winWid);
$("#main").css(‘width‘,winWid*($(‘.ul li‘).length)+‘px‘);
//用于圆点操作计算当前页面可能处在的left值以便进行判定
var a = 0;
var b = -(winWid);
var c = -(2*winWid);
/*-----------------------------------------向左翻动----------------------------------------------*/
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");
}
}
/*-------------------------------------------向右翻动--------------------------------------------*/
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");
}
}
/*---------------------------------------------原点事件------------------------------------------*/
$(".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();break;
case "img3":rightClick();break;
}
}else if(aLeft == b){
leftClick();
}else if(aLeft == c){
switch ($("li:last").attr("id")) {
case "img1":break;
case "img2":leftClick();break;
case "img3":rightClick();break;
}
}
});
$(".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();break;
case "img2":break;
case "img3":leftClick();break;
}
}else if(aLeft == b){
//不动
}else if(aLeft == c){
switch ($("li:last").attr("id")) {
case "img1":rightClick();break;
case "img2":break;
case "img3":leftClick();break;
}
}
});
$(".dian>a:last").mouseover(function(){
clearTimeout(aTime);
var aLeft = parseInt($("#main").css(‘left‘));
if (aLeft == a) {
switch ($("li:first").attr("id")) {
case "img1":leftClick();break;
case "img2":rightClick();break;
case "img3":break;
}
}else if(aLeft == b){
rightClick();
}else if(aLeft == c){
switch ($("li:last").attr("id")) {
case "img1":leftClick();break;
case "img2":rightClick();break;
case "img3":break;
}
}
});
$(".dian>a").mouseout(function(){
setTimeout("timeCount()",2000);
});
/*---------------------------------------------动效事件------------------------------------------*/
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;
}
标签：
原文地址：http://www.cnblogs.com/Singzo/p/5735530.html
