固定尺寸的产品轮播

最新推荐文章于 2022-04-23 21:27:34 发布

原创最新推荐文章于 2022-04-23 21:27:34 发布 · 190 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #产品轮播

Dreamweaver 专栏收录该内容

2 篇文章

订阅专栏

<div class="proscroll clearfix">
        <ul class="proimg">
            	<li><a href="###"><img src="images/ind_22.jpg" alt="" /></a></li>
                <li><a href="###"><img src="images/ind_37.jpg" alt="" /></a></li>
                <li><a href="###"><img src="images/ind_39.jpg" alt="" /></a></li>
                <li><a href="###"><img src="images/ind_59.jpg" alt="" /></a></li>
                <li><a href="###"><img src="images/ind_62.jpg" alt="" /></a></li>
        </ul>
        <ul class="protitle">
                <li><a href="###">循环式热泵水机组系列</a></li>
                <li><a href="###">第二组</a></li>
                <li><a href="###">第三组</a></li>
                <li><a href="###">444444444444</a></li>
                <li><a href="###">555555555555</a></li>
        </ul>
        <div class="pronum"></div>
        <div class="nextpic">下一页</div>
</div>

样式

.proscroll{width:530px; height:368px; border:1px solid #ddd; float:left; overflow:hidden; margin:0 10px; position:relative;}
.proscroll .proimg{ position:absolute; top:0; left:0;}
.proimg li{ width:530px; height:368px;}
.proimg li a{display:block;}
.proimg li a img{width:100%; min-height:368px;}
.protitle{background:rgba(0,0,0,0.5); width:100%; height:40px; position:absolute; left:0; bottom:0;}
.protitle li a{ display:block; line-height:40px; color:#fff; padding-left:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.protitle li a:hover{color:#34d2d0;}
.pronum{ width:80px; position:absolute; right:0; bottom:16px; overflow:hidden;}
.pronum span{width:8px; height:8px; background:#fff; border-radius:50%; display:inline-block; margin-right:4px; text-indent:-100px;}
.pronum .ddcur{ background:#34d2d0 !important;}
.nextpic{position:absolute; bottom:20px; left:40px; background:red; width:50px; height:30px; z-index:999; cursor:pointer; display:none;}

//********************首页产品轮播开始********************//

//确定轮播小点个数
var plen = $(".proimg li").length;
for(var a=0;a<plen;a++){
	$(".pronum").append("<span>"+a+"</span>");	
}
//全局变量
var i=0;
var plength = $(".proimg li").length;
var everytime = 2000;//切换时间

$(function(){
	$(".proimg li").eq(i).show().siblings().hide();
	$(".protitle li").eq(i).show().siblings().hide();
	$(".pronum span").eq(i).addClass("ddcur").siblings().removeClass("ddcur");
	//点击
	$(".nextpic").click(function(){
		i++;
		if(i==plength){
			i=0;
		}
		proShow();			
	});
	//上浮停止轮播
	$(".proimg li").hover(function(){
		i=$(this).index();
		proShow();
		clearInterval(timer);
	},function(){
		startL();
	});
	
	startL();

});
//
function proShow(){
	$(".proimg li").eq(i).fadeIn(200).siblings().fadeOut(200);
	$(".protitle li").eq(i).show().siblings().hide();		
	$(".pronum span").eq(i).addClass("ddcur").siblings().removeClass("ddcur");			
}

//自动轮播
function startL(){
	 timer=setInterval(function(){
		i++;
		if(i==plength){
			i=0;
		}
		proShow();			
		
	},everytime);	
}
//********************首页产品轮播结束********************//