jQuery图片轮播滚动切换特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery图片轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery图片轮播滚动切换代码</title>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class="Div1">
    <b class="Div1_prev Div1_prev1" ><img src="images/lizi_img011.jpg" title="上一页" /></b>
    <b class="Div1_next Div1_next1" ><img src="images/lizi_img012.jpg"  title="下一页"/></b>
    <div class="Div1_main">
    	<div>
        	<span class="Div1_main_span1">
            	<a href="javascript:void(0)" class="Div1_main_a1"><img src="images/lizi_img007.jpg" /></a>

     
                <a href="javascript:void(0)" class="Div1_main_a2">+详情点击</a>
            </span>
            <span>
            	<a href="javascript:void(0)" class="Div1_main_a1"><img src="images/lizi_img007.jpg" /></a>
 
    
                <a href="javascript:void(0)" class="Div1_main_a2">+详情点击</a>
            </span>
            <span>
            	<a href="javascript:void(0)" class="Div1_main_a1"><img src="images/lizi_img007.jpg" /></a>

          
                <a href="javascript:void(0)" class="Div1_main_a2">+详情点击</a>
            </span>
            <span>
            	<a href="javascript:void(0)" class="Div1_main_a1"><img src="images/lizi_img007.jpg" /></a>
  
        
                <a href="javascript:void(0)" class="Div1_main_a2">+详情点击</a>
            </span>
        </div>
        <div>
        	<span>
            	<a href="javascript:void(0)" class="Div1_main_a1"><img src="images/lizi_img007.jpg" /></a>

              
                <a href="javascript:void(0)" class="Div1_main_a2">+详情点击</a>
            </span>
            <span>
            	<a href="javascript:void(0)" class="Div1_main_a1"><img src="images/lizi_img007.jpg" /></a>
      
  
                <a href="javascript:void(0)" class="Div1_main_a2">+详情点击</a>
            </span>
            <span>
            	<a href="javascript:void(0)" class="Div1_main_a1"><img src="images/lizi_img007.jpg" /></a>

                <a href="javascript:void(0)" class="Div1_main_a2">+详情点击</a>
            </span>
            <span>
            	<a href="javascript:void(0)" class="Div1_main_a1"><img src="images/lizi_img007.jpg" /></a>
       
  
                <a href="javascript:void(0)" class="Div1_main_a2">+详情点击</a>
            </span>
        </div>
        <div>
        	<span>
            	<a href="javascript:void(0)" class="Div1_main_a1"><img src="images/lizi_img007.jpg" /></a>
       

                <a href="javascript:void(0)" class="Div1_main_a2">+详情点击</a>
            </span>
            <span>
            	<a href="javascript:void(0)" class="Div1_main_a1"><img src="images/lizi_img007.jpg" /></a>


                <a href="javascript:void(0)" class="Div1_main_a2">+详情点击</a>
            </span>
            <span>
            	<a href="javascript:void(0)" class="Div1_main_a1"><img src="images/lizi_img007.jpg" /></a>


                <a href="javascript:void(0)" class="Div1_main_a2">+详情点击</a>
            </span>
            <span>
            	<a href="javascript:void(0)" class="Div1_main_a1"><img src="images/lizi_img007.jpg" /></a>

                <a href="javascript:void(0)" class="Div1_main_a2">+详情点击</a>
            </span>
        </div>
    </div>
</div>
</body>
</html>

JS代码(script.js):

$(function(){
	$(".Div1_main div span").mouseover(function(){
	$(this).addClass("Div1_main_span1").siblings("span").removeClass("Div1_main_span1");
}
).mouseout(function(){
	$(this).removeClass("Div1_main_span1").siblings("span");
}
)var index = 0;
	Swidth = 1000;
	timer = null;
	len = $(".Div1_title span a").length;
	function NextPage(){
	if(index>2){
	index = 0;
}
$(".Div1_title span a").removeClass("Div1_title_a1").eq(index).addClass("Div1_title_a1");
	$(".Div1_main").stop(true,false).animate({
	left:-index*Swidth+"px"}
,600)}
function PrevPage(){
	if(index<0){
	index = 2;
}
$(".Div1_title span a").removeClass("Div1_title_a1").eq(index).addClass("Div1_title_a1");
	$(".Div1_main").stop(true,false).animate({
	left:-index*Swidth+"px"}
,600)}
$(".Div1_title span a").each(function(a){
	$(this).mouseover(function(){
	index = a;
	NextPage();
}
);
}
);
	//下一页$(".Div1_next img").click(function(){
	index++;
	NextPage();
}
);
	//上一页$(".Div1_prev img").click(function(){
	index--;
	PrevPage();
}
);
	//自动滚动var timer = setInterval(function(){
	index++;
	NextPage();
}
,4000);
	$(".Div1_next img,.Div1_main,.Div1_prev img,.Div1_title span").mouseover(function(){
	clearInterval(timer);
}
);
	$(".Div1_next img,.Div1_main,.Div1_prev img,.Div1_title span").mouseleave(function(){
	timer = setInterval(function(){
	index++;
	NextPage();
}
,4000);
}
);
}
)//建站套餐

CSS代码(style.css):

@charset "utf-8";*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
a,a:hover{color:#333;text-decoration:none;}
body{font:12px/180% Arial,Helvetica,sans-serif,"新宋体";}
/* Div1 */
.Div1{width:1000px;height:auto;margin:30px auto;overflow:hidden;position:relative;}
.Div1_title{height:32px;width:1000px;padding-bottom:3px;background:url(../images/lizi_img001.jpg) repeat-x;}
.Div1_title em{float:left;font-style:normal;line-height:32px;padding-left:13px;font-size:14px;}
.Div1_title span{float:right;display:block;padding:8px 15px 0 0;height:20px;}
.Div1_title span b,.Div1_title span a{display:block;float:left;}
.Div1_title span b,.Div1_title span b img{width:11px;height:11px;}
.Div1_title span b img{cursor:pointer;}
.Div1_prev{padding:2px 10px 0 0;}
.Div1_next{padding:2px 0 0 0px;}
.Div1_title span a{font-size:12px;background:url(../images/lizi_img005.jpg) no-repeat left center;padding-left:15px;margin-right:10px;}
.Div1_title span a:hover{color:#f34d01;background:url(../images/lizi_img004.jpg) no-repeat left center;}
.Div1_title span a.Div1_title_a1{color:#f34d01;background:url(../images/lizi_img004.jpg) no-repeat left center;}
.Div1_main{padding-top:13px;height:480px;width:10000px;overflow:hidden;position:relative;z-index:1;}
.Div1_main div{width:1000px;height:480px;float:left;}
.Div1_main div span{background:url(../images/lizi_img006.jpg) no-repeat;width:218px;padding:0 16px;height:480px;display:block;float:left;}
.Div1_main div span a{display:block;}
.Div1_main_a1{padding:4px 3px 4px 4px;margin-bottom:4px;}
.Div1_main_a1,.Div1_main_a1 img{width:210px;height:380px;}
.Div1_main div span b{display:block;padding-left:10px;color:#787878;}
.Div1_main div span p{line-height:20px;padding:0 10px;height:87px;color:#787878;}
.Div1_main_a2{background:url(../images/lizi_img009.jpg) no-repeat;width:77px;height:19px;color:#fff;text-align:center;line-height:19px;margin-left:10px;}
.Div1_main_a2:hover{background:url(../images/lizi_img008.jpg) no-repeat;}
.Div1_main div span.Div1_main_span1 .Div1_main_a1{background:url(../images/lizi_img010.jpg) no-repeat;}
.Div1_main div span.Div1_main_span1 b,.Div1_main div span.Div1_main_span1 p{color:#33a0ff;}
.Div1_main div span.Div1_main_span1 .Div1_main_a2{background:url(../images/lizi_img008.jpg) no-repeat;}
.Div1_main div span.Div1_main_span1 .Div1_main_a2:hover{background:url(../images/lizi_img009.jpg) no-repeat;}
.Div1 .Div1_prev1,.Div1 .Div1_next1{display:block;width:31px;height:30px;position:absolute;cursor:pointer;z-index:2;top:102px;}
.Div1 .Div1_prev1 img,.Div1 .Div1_next1 img{width:31px;height:30px;}
.Div1 .Div1_prev1:hover,.Div1 .Div1_next1:hover{opacity:0.7;.filter:alpha(opacity=70)}
.Div1 .Div1_prev1{left:18px;}
.Div1 .Div1_next1{left:954px;}

附件:下载该文件资源,减少时间成本(增值服务)