jquery는 왼쪽 및 오른쪽 버튼으로 QQ 몰을 모방하여 초점 이미지 전환 스크롤을 제어합니다.

코드 복사 코드는 다음과 같습니다. jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 *{margin:0;padding:0;} body{font-size:12px;color:#222;font-family:Verdana,Arial,Helvetica,sans-serif;background:#f0f0f0;} .clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;} .clearfix{zoom:1;} ul,li{list-style:none;} img{border:0;} .wrapper{width:800px;margin:0 auto;padding-bottom:50px;} h1{height:50px;line-height:50px;font-size:22px;font-weight:normal;font-family:"Microsoft YaHei",SimHei;margin-bottom:20px;} /* focus */ #focus{width:800px;height:280px;overflow:hidden;position:relative;} #focus ul{height:380px;position:absolute;} #focus ul li{float:left;width:800px;height:280px;overflow:hidden;position:relative;background:#000;} #focus ul li div{position:absolute;overflow:hidden;} #focus .btnBg{position:absolute;width:800px;height:20px;left:0;bottom:0;background:#000;} #focus .btn{position:absolute;width:780px;height:10px;padding:5px 10px;right:0;bottom:0;text-align:right;} #focus .btn span{display:inline-block;_display:inline;_zoom:1;width:25px;height:10px;_font-size:0;margin-left:5px;cursor:pointer;background:#fff;} #focus .btn span.on{background:#fff;} #focus .preNext{width:45px;height:100px;position:absolute;top:90px;background:url(img/sprite.png) no-repeat 0 0;cursor:pointer;} #focus .pre{left:0;} #focus .next{right:0;background-position:right top;} $(function() { var sWidth = $("#focus").width(); //获取焦点图的宽度（显示面积） var len = $("#focus ul li").length; //获取焦点图个数 var index = 0; var picTimer; //以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮 var btn = " "; for(var i=0; i btn += " "; } btn += " "; $("#focus").append(btn); $("#focus .btnBg").css("opacity",0.5); //작은 버튼 마우스 추가 해당 콘텐츠를 표시하는 슬라이드 이벤트 $("#focus .btnspan").css("opacity",0.4).mouseover(function() { index = $("#focus .btnspan" ).index(this); showPics(index); }).eq(0).trigger("mouseover") //이전 페이지 및 다음 페이지 버튼 투명도 처리 $ ("#focus .preNext").css("불투명도",0.2).hover(function() { $(this).stop(true,false).animate({"불투명도" :"0.5"} ,300); },function() { $(this).stop(true,false).animate({"opacity":"0.2"},300) }); 🎜>//이전 페이지 버튼 $("#focus .pre").click(function() { index -= 1; if(index == -1 ) {index = len - 1;} showPics(index); }); //다음 페이지 버튼 $("#focus .next").click(function() { index = 1 ; if(index == len) {index = 0;} showPics(index); }) //이 예는 왼쪽 및 오른쪽 스크롤입니다. 즉, 모든 li 요소는 부동입니다. 같은 행의 왼쪽에 있으므로 여기서는 주변 ul 요소의 너비를 계산해야 합니다. $("#focus ul").css("width",sWidth * (len)) //초점 이미지 위로 마우스를 슬라이드하면 자동 재생을 중지하고 마우스가 밖으로 슬라이드하면 자동 재생을 시작합니다 $("#focus").hover(function() { clearInterval(picTimer); } ,function() { picTimer = setInterval(function() { showPics(index); index ; if(index == len) {index = 0;} }, 4000); //이 4000은 자동 재생 간격을 나타냅니다. 단위: 밀리초 }).trigger("mouseleave") //이미지 기능 표시, 해당 콘텐츠 표시 수신된 인덱스 값에 따라 function showPics(index) { //정상 전환 var nowLeft = -index*sWidth; //인덱스 값을 기준으로 ul 요소의 왼쪽 값을 계산합니다 $( "#focus ul").stop(true ,false).animate({"left":nowLeft},300); //animate()를 통해 계산된 위치로 스크롤하도록 ul 요소를 조정합니다. $ ("#focus .btn 범위").stop (true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity" :"1"},300); // 현재 버튼에 대해 선택한 효과로 전환 jquery 이미지 스크롤은 왼쪽 및 오른쪽 버튼으로 초점 이미지 전환 및 스크롤을 제어하는 QQ 쇼핑몰을 모방합니다. ;img src="img/01.jpg" alt=" QQ몰 포커스 이미지 효과 다운로드" /> &lt ;/ul> /body> 렌더링은 다음과 같습니다.

jquery는 왼쪽 및 오른쪽 버튼으로 QQ 몰을 모방하여 초점 이미지 전환 스크롤을 제어합니다.

jquery 이미지 스크롤은 왼쪽 및 오른쪽 버튼으로 초점 이미지 전환 및 스크롤을 제어하는 QQ 쇼핑몰을 모방합니다.

;img src="img/01.jpg" alt=" QQ몰 포커스 이미지 효과 다운로드" />

< ;/ul>
< --focus end-->

관련 기사

jquery는 왼쪽 및 오른쪽 버튼으로 QQ 몰을 모방하여 초점 이미지 전환 스크롤을 제어합니다.

jquery 이미지 스크롤은 왼쪽 및 오른쪽 버튼으로 초점 이미지 전환 및 스크롤을 제어하는 ​​QQ 쇼핑몰을 모방합니다. ;img src="img/01.jpg" alt=" QQ몰 포커스 이미지 효과 다운로드" /> < ;/ul> < --focus end-->

관련 기사

jquery 이미지 스크롤은 왼쪽 및 오른쪽 버튼으로 초점 이미지 전환 및 스크롤을 제어하는 QQ 쇼핑몰을 모방합니다.

;img src="img/01.jpg" alt=" QQ몰 포커스 이미지 효과 다운로드" />

< ;/ul>
< --focus end-->