<!DOCTYPE html>
<head><title>flash图片</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<style>
ul{ margin:0px;
padding:0px;
list-style-type:none;}
.demo{padding:10px; *zoom:1;}
.flash_img {
overflow: hidden;
width: 710px;
height: 144px;
position: relative
}
.flash_img .img-box {
position: absolute;
}
.flash_img img {
display: block;
border:none;
}
.flash_item {
position: absolute;
right: 10px;
bottom: 10px;
height: 18px;
padding-top: 2px;
}
.flash_item li {
background-color: #FFE0EB;
border: 1px solid #FF6699;
color: #D94B01;
cursor: pointer;
float: left;
font-size: 12px;
height: 16px;
line-height: 16px;
margin-left: 3px;
text-align: center;
width: 16px;
}
.flash_item li.on {
background-color: #EB3C65;
border-color: #9A102F;
color: #FFFFFF;
font-weight: bold;
height: 18px;
line-height: 18px;
margin-top: -2px;
width: 18px;
}
.flash_item li img {
display: block
}
</style>
<script type="text/javascript">
/*
*settings{
* speed:滚动速度；
* timer:滚动时间间隔；
* direction:滚动方向；
* }
*/
(function($){
$.fn.scrollImg = function(settings) {
settings = jQuery.extend($.fn.scrollImg.defaults,settings);
return this.each(function() {
scrollCore($(this),settings);
});
}
var scrollCore = $.fn.scrollImg.scrollCore;
scrollCore = function(obj,opts) {
var index=0;
var showBox = $(".img-box",obj);
var getLi = $(".img-box li",obj);
var size = getLi.size();
var getLiStep = ''; //步长；
var getLiAllWidth; //图片总宽度；
if(opts.direction=="left" || opts.direction=="right"){
getLiStep = getLi.outerWidth();
getLiAllWidth = getLiStep * size;
showBox.css("width",getLiAllWidth+"px");
getLi.css("float","left");
}else{
getLiStep = getLi.outerHeight();
showBox.css("width","auto");
getLi.css("float","none")
}
//alert(getLiStep);
//alert(size);
//alert(opts.timer)
$("<ul></ul>",{
"class":"flash_item",
html:function() {
var setItemInnerHTML="";
if(size==1){
return;
}else if(size>1) {
for(i=0;i<size;i++){
i == 0 ? setItemInnerHTML += "<li class='on'>"+(i+1)+"</li>" : setItemInnerHTML += "<li >"+(i+1)+"</li>"
}
}
return setItemInnerHTML;
}
}).appendTo(obj);
var itemNum =$(".flash_item li",obj);
//光标停于图片上时；
showBox.hover(function(){
if(intervalTime){
clearInterval(intervalTime);
}
},function(){
clearInterval(intervalTime);
interval();
});
//光标停于数签时；
itemNum.hover(function(e){
var that=this;
if (intervalTime) {
clearInterval(intervalTime);
}
intervalTime = setTimeout(function() {
index = itemNum.index(that);
AdvertiseArea(index);
}, 200);
},function(){
clearInterval(intervalTime);
interval();
});
//设置持续滚动时间间隔函数；
function interval(){
intervalTime = setInterval(function(){
AdvertiseArea(index);
index++;
if(index==size){
index=0;
}
},opts.timer)
}
interval();
var AdvertiseArea = function(i){
var direction=opts.direction;
switch(direction){
case "left":
showBox.animate({'left' : -i * getLiStep}, opts.speed);
break;
case "right":
showBox.animate({'right' : -i* getLiStep}, opts.speed);
break;
case "top":
showBox.animate({'top' : -i* getLiStep}, opts.speed);
break;
case "bottom":
showBox.animate({'bottom' : -i* getLiStep}, opts.speed);
break;
}
itemNum.eq(i).addClass("on").siblings().removeClass("on");
}
}
$.fn.scrollImg.defaults ={
speed:"normal",
timer:2000,
direction:"left"
}
})(jQuery)
</script>
<script type="text/javascript">
$(function(){
$("#fadImgs").scrollImg({
speed:"normal",
timer:2000,
direction:"left"
})
})
</script>
</head>
<body>
<div class="demo">
<div class="flash_img" id="fadImgs">
<ul class="img-box" style="">
<li>
<a href="http://www.sodao.com/huangye/100001733" target="_blank"><img height="144" alt="" title="" src="http://imgcache.mysodao.com/img1/M00/7E/CE/CgAPDE2AUlG0-2u2AACQfGY7VEg114-063a578a.JPG" width="710"></a></li>
<li><a href="http://www.sodao.com/zone/100541782" target="_blank"><img height="144" alt="" title="" src="http://img1.mysodao.com/201101/12/20110112-5977f8f713b5c0a9.jpg" width="710"></a></li>
<li><a href="http://www.sodao.com/zone/100000049" target="_blank"><img height="144" alt="" title="" src="http://css.sodao.com/home/img/kuaisou/g1.jpg" width="710"></a></li>
</ul>
</div>
</div>
</body>
</html>