//View code
@model IEnumerable<AML.Models.slider> @{ Layout = "~/Views/Shared/_Layout.cshtml"; } <h2>Index</h2> <script src="~/Scripts/jquery-2.1.3.min.js"></script> <style> #slider { position: relative; overflow: hidden; margin: 20px auto 0 auto; border-radius: 4px; } #slider ul { position: relative; margin: 0; padding: 0; height: 200px; list-style: none; } #slider ul li { position: relative; display: block; float: left; margin: 0; padding: 0; width: 500px; height: 300px; background: #ccc; text-align: center; line-height: 300px; } .slider_option { position: relative; margin: 10px auto; width: 160px; font-size: 18px; } </style> <script type="text/javascript"> jQuery(document).ready(function () { //$('li').hide(); setInterval(function () { moveRight(); //$('#slideText').animate({ top: '100px' },1000); }, 5000); }); //setInterval(function () { // ($('#slideText').animate({ top: '-100px' }),1000); //}, 2000); setInterval(function () { $('#slideText').animate({ top: '-=100px' }, 1000, function () { $('#slideText').css({}) }); }, 1000); function moveRight() { $('li').show(); var slideCount = $('#slider ul li').length; var slideWidth = $('#slider ul li').width(); var slideHeight = $('#slider ul li').height(); var sliderUlWidth = slideCount * slideWidth; $('#slider').css({ width: slideWidth, height: slideHeight }); $('#slider ul').css({ width: sliderUlWidth, marginLeft: -slideWidth, }); $('img').css({ width: slideWidth }); $('#slider ul').animate({ left: -slideWidth }, 1000, function () { $('#slider ul li:first-child').appendTo('#slider ul'); $('#slider ul').css('left', ''); }); } </script> @Html.ActionLink("dropdown","dropdownlist") <div id="slider"> @{ <ul id="sampleImage"> @foreach (var a in @Model) { <li> <img src="@a.imagepaths" style="position:relative" /> <p id="slideText" style="color:whitesmoke; z-index:5; removed:absolute; removed38%; removed35%">@a.imageText</p> </li> } </ul> } </div>
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)