<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>单独图片轮换 - 豪情</title>
<style type="text/css">
*{margin:0;padding:0;}
body{font:12px/1.125 Arial,Helvetica,sans-serif;background:#000;}
table{border-collapse:collapse;border-spacing:0;}
li{list-style:none;}
fieldset,img{border:0;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
a:focus,input,textarea{outline-style:none;}
textarea{resize:none}
a{color:#0a8cd2;text-decoration:none;}
a:hover{color:#f60;text-decoration:underline;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-block;}
.clearfix{display:block;}
.none{display:none}
.demo{width:180px;height:210px;margin:40px auto;background:#fff;padding:25px;border:2px solid #ccc;border-radius:5px;}
.scrollBox{display:inline;float:left;height:223px;position:relative;width:180px;overflow:hidden;}
.prev,.next{background:url(http://images.cnitblog.com/blog/100150/201305/01234427-d9c492e118d040ffb59ec9d80955edbb.png) 0 0 no-repeat;}
.prev{background-position:0 0;bottom:7px;cursor:pointer;display:inline-block;height:13px;position:absolute;right:20px;width:15px;z-index:99;}
.next{background-position:-22px 0;bottom:7px;cursor:pointer;display:inline-block;height:13px;position:absolute;right:0;width:15px;z-index:99;}
.control{display:inline;float:left;margin:0 auto;width:180px;}
.control div{float:left;}
#control_scroll{height:223px;overflow:hidden;position:relative;width:180px;}
.pic{position:absolute;float:left;}
.pic li{display:inline;float:left;text-align:left;width:180px;}
.pic li img.lbimg{height:190px;margin:0 auto 12px;overflow:hidden;width:180px;}
</style>
</head>
<body>
<!--http://sports.qq.com/photo/?pgv_ref=aio2012&ptlang=2052-->
<!--http://news.qq.com/base2011/ued_scroll.js-->
<div class="demo">
<div class="scrollBox">
<div id="prev" class="prev"></div>
<div class="control" id="container">
<ul class="pic">
<li><a href="#"><img class="lbimg" alt="张蓝心登杂志秀美腿" src="http://img1.gtimg.com/sports/pics/hv1/235/122/1287/83718520.jpg" /><br />
张蓝心登杂志秀美腿</a> </li>
<li><a href="#"><img class="lbimg" alt="潘晓婷蕾丝装身姿动人" src="http://img1.gtimg.com/sports/pics/hv1/242/122/1287/83718527.jpg" /><br />
潘晓婷蕾丝装身姿动人</a> </li>
<li><a href="#"><img class="lbimg" alt="泛珠赛车宝贝清丽登场" src="http://img1.gtimg.com/sports/pics/hv1/249/122/1287/83718534.jpg" /><br />
泛珠赛车宝贝清丽登场</a> </li>
<li><a href="#"><img class="lbimg" alt="CBA宝贝热舞助阵" src="http://img1.gtimg.com/sports/pics/hv1/24/188/1286/83670114.jpg" /><br />
CBA宝贝热舞助阵</a> </li>
<li><a href="#"><img class="lbimg" alt="徐冬冬写真姿态优雅" src="http://img1.gtimg.com/sports/pics/hv1/237/122/1287/83718522.jpg" /><br />
徐冬冬写真姿态优雅</a> </li>
</ul>
</div>
<div id="next" class="next"></div>
</div>
</div>
<script type="text/javascript">
(function(window){
function id(node){
return typeof node == ‘string‘ ? document.getElementById(node) : node;
}
function SingleSlide(obj){
for(var p in obj){
this[p] = id(obj[p]);
}
this.init.apply(this, arguments);
}
SingleSlide.prototype = {
init : function(){
var that = this,
timer = null;
this.oUl = this.container.getElementsByTagName(‘ul‘)[0];
this.aLi = this.oUl.getElementsByTagName(‘li‘);
this.iMaxWidth = this.aLi[0].offsetWidth;
this.iNow = 0; // 当前标记
var bigBox = this.container.parentNode;
this.oUl.innerHTML += this.oUl.innerHTML;
this.oUl.style.width = this.aLi[0].offsetWidth * this.aLi.length + ‘px‘;
timer = setInterval(function(){
that.auto(that, that.oUl);
}, 2000);
this.prevBtn.onclick = function(){
that.prev(that, that.oUl);
}
this.nextBtn.onclick = function(){
that.auto(that, that.oUl);
}
bigBox.onmouseover = function(){
clearInterval(timer);
}
bigBox.onmouseout = function(){
timer = setInterval(function(){
that.auto(that, that.oUl);
}, 2000);
}
},
auto : function(obj, ul){
obj.iNow++;
if(obj.iNow >= obj.aLi.length){
obj.iNow = 0;
}
obj.move(ul, -obj.iNow * obj.iMaxWidth);
},
prev : function(obj, ul){
obj.iNow--;
if(obj.iNow <= -1){
obj.iNow = obj.aLi.length - 1;
}
obj.move(ul, -obj.iNow * obj.iMaxWidth);
},
move : function(obj, end){
var that = this,
iSpeed = 0;
clearInterval(obj.timer);
obj.timer = setInterval(function(){
iSpeed = (end - obj.offsetLeft) / 5;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
obj.style.left = obj.offsetLeft + iSpeed + ‘px‘;
}, 30);
}
}
new SingleSlide({
container : ‘container‘,
//container : ‘control‘,
prevBtn : ‘prev‘,
nextBtn : ‘next‘
});
}(window));
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
body{background:url("images/bg.jpg");}
*{margin:0px;padding:0px;}
#box{
width:735px;height:350px;
margin:50px auto;position:relative;
background:#fff;
}
.con{
width:735px;height:350px;overflow:hidden;
}
.con ul li{list-style-type:none;}
.prev{
width:45px;height:100px;
position:absolute;left:0px;top:50%;margin-top:-50px;
background:url("images/button.png");cursor:pointer;
display:none;opacity:0.5;
}
.next{
width:45px;height:100px;
position:absolute;right:0px;top:50%;margin-top:-50px;
background:url("images/button.png");
background-position:-55px 0px;cursor:pointer;
display:none;opacity:0.5;
}
.nav{
width:720px;height:30px;
position:absolute;left:50%;margin-left:-360px;
bottom:10px;
}
.nav ul li{
width:119px;height:30px;background:rgba(255,255,255,0.6);
list-style-type:none;float:left;
margin-right:1px;text-align:center;
line-height:30px;font-size:12px;color:#333;cursor:pointer;
}
.nav ul .bg{background:rgba(0,0,0,0.6);color:#fff;}
</style>
</head>
<body>
<div id="box">
<div class="con">
<ul>
<li><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
<li><img src="images/5.jpg" /></li>
<li><img src="images/6.jpg" /></li>
</ul>
</div>
<div class="prev"></div>
<div class="next"></div>
<div class="nav">
<ul>
<li class="bg">春天赏花去</li>
<li>疯狂特卖</li>
<li>海岛错峰游</li>
<li>三亚超值爆款</li>
<li>春游要出境</li>
<li>日韩赏樱</li>
</ul>
</div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var i=0;
var time=0;
$("#box").hover(function(){
$(".prev").fadeIn(300);
},function(){
$(".prev").fadeOut(300);
})
$("#box").hover(function(){
$(".next").fadeIn(300);
},function(){
$(".next").fadeOut(300);
})
$(".nav ul li").hover(function(){
i = $(this).index();
$(".con ul li").eq(i).fadeIn(100).siblings().fadeOut(100);
$(this).addClass("bg").siblings().removeClass("bg");
clearInterval(time);
},function(){
time=setInterval("junmper()",3000);
})
$(".prev").click(function(){
i--;
if(i<0)
i=5;
$(".con ul li").eq(i).fadeIn(100).siblings().fadeOut(100);
$(".nav ul li").eq(i).addClass("bg").siblings().removeClass("bg");
})
$(".next").click(function(){
i++;
if(i>5)
i=0;
$(".con ul li").eq(i).fadeIn(100).siblings().fadeOut(100);
$(".nav ul li").eq(i).addClass("bg").siblings().removeClass("bg");
})
$(".prev").hover(function(){
clearInterval(time);
},function(){
time=setInterval("junmper()",3000);
})
$(".next").hover(function(){
clearInterval(time);
},function(){
time=setInterval("junmper()",3000);
})
function junmper(){
i++;
if(i>5)
i=0;
$(".con ul li").eq(i).fadeIn(100).siblings().fadeOut(100);
$(".nav ul li").eq(i).addClass("bg").siblings().removeClass("bg");
}
time=setInterval("junmper()",3000);
</script>
</body>
</html>
时间： 2024-10-02 09:26:43