jquery动画轮播

Posted 2020-06-09

哎不多说了....最近过年特忙..所以都忘记了..现在才补起。

还是老样子

1、CSS

<style>
#banner .scroll img {width: 750px;height: 500px;}
#banner .before img{width: 32px;height: 63px;}
#banner .bannerBut ul li:hover {cursor: pointer;}

@charset "utf-8";
*{margin:0px;padding:0px;font-family:"微软雅黑";font-size:12px; text-decoration:none;list-style-type:none;}
img{border:0px;}

#banner{width:100%;height:500px;overflow:hidden;}
#banner .bannerCon{width:750px;height:500px;background:blue;margin:0px auto;position:relative;}
#banner .bannerCon .before{width:600px;height:500px;background:rgba(0,0,0,0.8);position:absolute;left:-600px;bottom:0px;z-index:333;}
#banner .bannerCon .before img{position:absolute;right:20px;top:200px;cursor:pointer;}
#banner .bannerCon .after{width:600px;height:500px;background:rgba(0,0,0,0.8);position:absolute;right:-600px;bottom:0px;z-index:333;}
#banner .bannerCon .after img{position:absolute;left:20px;top:200px;cursor:pointer;}
#banner .bannerCon .scroll{width:2000%;height:500px;position:relative;left:-750px;}
#banner .bannerCon .scroll img{width:750px;height:500px;float:left;}
#banner .bannerBut{width:200px;height:40px;position:absolute;left:275px;bottom:0px;}
#banner .bannerBut ul li{width:7px;height:7px;border-radius:7px;background:#666;margin:5px 7px;float:left;}
#banner .bannerBut ul li.hover{background:#c6171e;}

</style>

2、html

<div id="banner">
　　<div class="bannerCon">
　　　　<div class="before">
　　　　　　<img src="images/1.png" />
　　　　</div>
　　　　<div class="after">
　　　　　　<img src="images/2.png" />
　　　　</div>
　　　　<div class="scroll">
　　　　　　<img src=‘images/9.jpg‘ />
　　　　　　<img src=‘images/1.jpg‘ />
　　　　　　<img src=‘images/2.jpg‘ />
　　　　　　<img src=‘images/3.jpg‘ />
　　　　　　<img src=‘images/4.jpg‘ />
　　　　　　<img src=‘images/5.jpg‘ />
　　　　　　<img src=‘images/6.jpg‘ />
　　　　　　<img src=‘images/7.jpg‘ />
　　　　　　<img src=‘images/8.jpg‘ />
　　　　　　<img src=‘images/9.jpg‘ />
　　　　　　<img src=‘images/1.jpg‘ />
　　　　</div>
　　　　<div class="bannerBut">
　　　　　　<ul>
　　　　　　　　<li style="display:none"></li>
　　　　　　　　<li class="hover"></li>
　　　　　　　　<li></li>
　　　　　　　　<li></li>
　　　　　　　　<li></li>
　　　　　　　　<li></li>
　　　　　　　　<li></li>
　　　　　　　　<li></li>
　　　　　　　　<li></li>
　　　　　　　　<li></li>
　　　　　　　　<li style="display:none"></li>
　　　　　　</ul>
　　　　</div>
　　</div>
</div>

3 、js

$(function(){
　　var _index1=1;
　　var img =$(".scroll");
　　var timers = setInterval(time,2000);
　　/* 自动循环 */
　　function time(){
　　　　_index1++;
　　　　if(_index1 > 9) {
　　　　　　_index1 = 1;
　　　　　　$(‘.scroll‘).css(‘left‘,‘0px‘);
　　　　　　animated();
　　　　}else{
　　　　　　animated();
　　　　}
　　}
　　/*移入停止 移出继续动画*/
　　$(‘#banner .scroll img‘).mouseover(function(){
　　　　clearInterval(timers);
　　}).mouseout(function(){
　　　　timers = setInterval(time,2000);
　　});
　　/* 下标移入时切换 */
　　$(‘.bannerBut ul li‘).mouseover(function() {
　　　　$(this).addClass(‘hover‘).siblings(‘li‘).removeClass(‘hover‘);
　　　　var _index1=$(this).index();
　　　　$(‘.bannerCon .scroll‘).stop().animate({left:-_index1*750},500);
　　});
　　/* 动画 */
　　function animated() {
　　　　$(‘.bannerBut ul li‘).eq(_index1).addClass(‘hover‘).siblings(‘li‘).removeClass(‘hover‘);
　　　　$(‘.scroll‘).animate({left:-_index1*750},500);
　　}
　　/* right */
　　$(‘.after img‘).click(function() {
　　　　if(!$(img).is(":animated")) {
　　　　　　_index1++;
　　　　　　if(_index1 > 9) {
　　　　　　　　_index1 = 1;
　　　　　　　　$(‘.scroll‘).css(‘left‘,‘0px‘);
　　　　　　　　animated();
　　　　　　}else{
　　　　　　　　animated();
　　　　　　}
　　　　}
　　});
　　/* left */
　　$(‘.before img‘).click(function() {
　　　　if(!$(img).is(":animated")) {
　　　　　　_index1--;
　　　　　　if(_index1 < 1) {
　　　　　　　　_index1 = 9;
　　　　　　　　$(‘.scroll‘).css(‘left‘,‘-7500px‘);
　　　　　　　　animated();
　　　　　　}else {
　　　　　　　　animated();
　　　　　　}
　　　　}
　　});
});

 这次写的匆忙有什么不好的请提出来.有什么兼容性问题的请麻烦说说 我好修改 谢谢了各位..