<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>图片轮播器</title> <link rel="stylesheet" type="text/css" href=http://www.3lian.com/edu/2017/05-23/"slider.css" rel="external nofollow" /> <script src=http://www.3lian.com/edu/2017/05-23/"Jquery.js"></script> <script src=http://www.3lian.com/edu/2017/05-23/"slider.js"></script> </head> <body> <div class="wrap"> <!--快捷键 .wrap>(ul>li*4>img[src="https://www.51drink.cn/skin/default/image/lazy.gif" class="lazy" original="http://www.jsgho.com/help/fwq/$.jpg"])+ol>li*4 --> <ul> <li><img src="https://www.51drink.cn/skin/default/image/lazy.gif" class="lazy" original="http://www.3lian.com/edu/2017/05-23/"1.jpg"" alt="11" /></li> <li><img src="https://www.51drink.cn/skin/default/image/lazy.gif" class="lazy" original="http://www.3lian.com/edu/2017/05-23/"2.jpg"" alt="22" /></li> <li><img src="https://www.51drink.cn/skin/default/image/lazy.gif" class="lazy" original="http://www.3lian.com/edu/2017/05-23/"3.jpg"" alt="33" /></li> <li><img src="https://www.51drink.cn/skin/default/image/lazy.gif" class="lazy" original="http://www.3lian.com/edu/2017/05-23/"4.jpg"" alt="44" /></li> </ul> <ol> <li class="current">1</li> <li>2</li> <li>3</li> <li>4</li> </ol> <p class="introduce"></p> </div> </body> </html>
2、css的样式
*{ margin: 0; padding: 0; } img{ border:0; } ol, ul ,li{list-style: none;} body{ margin: 50px; } .wrap{ width: 500px; height: 350px; border: 1px solid red; position: relative; overflow: hidden; } .wrap ul{ width: 2000px; position: absolute; left: 0; top: 0; } .wrap ul li { float: left; width: 500px; } .wrap ol{ position: absolute; bottom: 10px; right:10px; } .wrap ol li{ float: left; width: 16px; height: 16px; line-height: 16px; text-align: center; color: #fff; background: #000; border: 1px solid yellow; margin-right: 3px; cursor: pointer; } .wrap ol li.current{ background: #fff; color:#000; } .wrap .introduce{ width:400px ; height: 30px; line-height: 30px; background: rgba(0, 0, 0, 0.5); color: #fff; position: absolute; bottom: 0; left: 0; }
3、JS控制
$(document).ready(function(){ var oul=$('.wrap ul'); //获取 行； var ali=$('.wrap ul li'); //获取 列； var numLi=$('.wrap ol li');//获取数字的 列； var aliWidth=$('.wrap ul li').eq(0).width(); //获取单张图片的宽度； var _now=0;//这个控制数字样式的计数器 var _now2=0;//这个是控制图片运动距离的计数器 var timeId; //定时器的开关 var aimg=$('.wrap ul img');//获取wrap中img元素 var op=$('.wrap p') //获取wrap中p元素 numLi.click(function() { //鼠标点击触发的函数； var index=$(this).index(); //如果点击第一张图片，index=0； _now=index; //不管_now还是_now2都要和点击时index同步； _now2=index; var imgAlt=aimg.eq(_now).attr('alt');//获取 _now时刻的的alt值 op.html(imgAlt); //并将atl值显示 $(this).addClass('current').siblings().removeClass(); //数字样式 的 增和删； oul.animate({'left':-aliWidth*index},500); //图片的移动，行元素的左侧距离wrap的左侧-500*index }); function slider(){ if (_now==numLi.size()-1) { //当滚动到第四张图片的时候 ali.eq(0).css({ //通过定位的方法将第一张移到最后一张； 'position':'relative', 'left':oul.width() }); _now=0; } else{ _now++; //如果没达到第四张，那就将_new+1； } _now2++; //图片控制计数器 +1； numLi.eq(_now).addClass('current').siblings().removeClass(); //数字样式 的 增和删； var imgAlt=aimg.eq(_now).attr('alt'); //获取 _now时刻的的alt值 op.html(imgAlt); //并将atl值显示 oul.animate({'left':-aliWidth*_now2},500,function(){ //图片的移动，行元素的左侧距离wrap的左侧-500*now2 if (_now==0) { ali.eq(0).css('position','static'); oul.css('left',0); _now2=0; } }); } timeId=setInterval(slider,1500); //每1500ms，自动切换图片 //鼠标点击图片则停止计时器，停止“自动切换图片”；离开则继续定时器切换图片 // $('.wrap').mouseover(function(event) { // clearInterval(timeId); // }); // $('.wrap').mouseover(function(event) { // timeId=setInterval(slider,1500); // }); $('.wrap').hover(function() { clearInterval(timeId); }, function() { timeId=setInterval(slider,1500); }); });
*重要函数
1、获取各个标签值并显示
var imgAlt=aimg.eq(_now).attr('alt');//获取 _now时刻的的alt值 op.html(imgAlt); //并将atl值显示
2、改变数字样式
$(this).addClass('current').siblings().removeClass(); //数字样式 的 增和删；
3、滚动图片
oul.animate({'left':-aliWidth*index},500); //图片的移动，行元素的左侧距离wrap的左侧-500*index
*注意点
1、同步
- 下一篇： Win8一键解锁注册表的教程
- 上一篇： Windows重置网卡错误问题
